Finish adding the SAMP button (finally!)

Goutte
1 parent 6491a1f1
Showing 3 changed files with 165 additions and 17 deletions Show diff stats
web/static/js/swapp.js
web/static/js/swapp.ls
web/view/home.html.jinja2
@@ -30,7 +30,7 @@
       }
       configs = res$;
       configs.forEach(function(target_config){
-        return this$.targets[target_config.slug] = new Target(target_config.slug, target_config.name, target_config);
+        return this$.addTarget(new Target(target_config.slug, target_config.name, target_config));
       });
       this.parameters = {};
       this.configuration['parameters'].forEach(function(p){
@@ -42,7 +42,7 @@
     SpaceWeather.prototype.init = function(){
       "This is called by the inline bootstrap javascript code.\nThis ain't in the constructor because it might return a Promise later on.\n(for the loader, for example)";
       var started_at, stopped_at, this$ = this;
-      started_at = moment().subtract(6, 'month').hours(0).minutes(0).seconds(0);
+      started_at = moment().subtract(1, 'year').hours(0).minutes(0).seconds(0);
       stopped_at = moment().add(1, 'week').hours(0).minutes(0).seconds(0);
       this.setStartAndStop(started_at, stopped_at);
       this.loadAndCreatePlots(started_at, stopped_at);
@@ -76,10 +76,61 @@
       url = url.replace('<stopped_at>', stopped_at.format(API_TIME_FORMAT));
       return url;
     };
+    SpaceWeather.prototype.buildSampUrl = function(){
+      var ref$, started_at, stopped_at, targets, t, parameters, p, url;
+      ref$ = this.getDomain(), started_at = ref$[0], stopped_at = ref$[1];
+      targets = (function(){
+        var results$ = [];
+        for (t in this.targets) {
+          if (this.targets[t].active) {
+            results$.push(t);
+          }
+        }
+        return results$;
+      }.call(this)).sort().join('-');
+      parameters = (function(){
+        var results$ = [];
+        for (p in this.parameters) {
+          if (this.parameters[p].active) {
+            results$.push(p);
+          }
+        }
+        return results$;
+      }.call(this)).sort().join('-');
+      url = this.configuration['api']['samp'];
+      url = url.replace('<targets>', targets);
+      url = url.replace('<params>', parameters);
+      url = url.replace('<started_at>', started_at.format(API_TIME_FORMAT));
+      url = url.replace('<stopped_at>', stopped_at.format(API_TIME_FORMAT));
+      return url;
+    };
+    SpaceWeather.prototype.buildSampName = function(){
+      var ref$, started_at, stopped_at, targets, t;
+      ref$ = this.getDomain(), started_at = ref$[0], stopped_at = ref$[1];
+      targets = (function(){
+        var i$, ref$, len$, results$ = [];
+        for (i$ = 0, len$ = (ref$ = this.getEnabledTargets()).length; i$ < len$; ++i$) {
+          t = ref$[i$];
+          results$.push(t.name);
+        }
+        return results$;
+      }.call(this)).sort().join(', ');
+      return "Heliopropa for " + targets + " from " + started_at.format(API_TIME_FORMAT) + " to " + stopped_at.format(API_TIME_FORMAT) + ".";
+    };
     SpaceWeather.prototype.addTarget = function(target){
       this.targets[target.slug] = target;
       return this;
     };
+    SpaceWeather.prototype.getEnabledTargets = function(){
+      var slug, ref$, target, results$ = [];
+      for (slug in ref$ = this.targets) {
+        target = ref$[slug];
+        if (target.active) {
+          results$.push(target);
+        }
+      }
+      return results$;
+    };
     SpaceWeather.prototype.enableTarget = function(target_slug){
       var this$ = this;
       this.time_series.forEach(function(ts){
@@ -270,6 +321,17 @@
       });
       return this.time_series;
     };
+    SpaceWeather.prototype.getEnabledParameters = function(){
+      var i$, ref$, len$, p, slug, results$ = [];
+      for (i$ = 0, len$ = (ref$ = this.parameters).length; i$ < len$; ++i$) {
+        p = i$;
+        slug = ref$[i$];
+        if (p.active) {
+          results$.push(p);
+        }
+      }
+      return results$;
+    };
     SpaceWeather.prototype.enableParameter = function(parameter_slug){
       var this$ = this;
       if (!(parameter_slug in this.parameters)) {
@@ -11,7 +11,7 @@
 # templates, such as `home.html.jinja2`.
 # Note: We use Promises and ES6 whenever relevant.
-# You also will need d3js v4 documentation : https://d3js.org/
+# You also WILL NEED d3js v4 documentation : https://d3js.org/
 # We're using a custom build of 4.9.1, one line changed, see d3-custom.js
 # Event bubbling cannot trigger two rects unless we make an event dispatcher,
 # and d3's brush is stopping propagation, as it should by default.
@@ -56,13 +56,13 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE
 """  # HelioPropa by CDPP (mushed 'cause we need to escape backslashes)
     @targets = {}
     configs = [@configuration.targets[k] for k of @configuration.targets]
-    configs.forEach((target_config) ~>
-      @targets[target_config.slug] = new Target(target_config.slug, target_config.name, target_config)
-    )
+    configs.forEach (target_config) ~>
+      @addTarget(new Target(target_config.slug, target_config.name, target_config))
+
     @parameters = {}
-    @configuration['parameters'].forEach((p) ~>
-        @parameters[p['id']] = p
-    )
+    @configuration['parameters'].forEach (p) ~>
+      @parameters[p['id']] = p
+
     @orbiter = null    # our Orbiter defined below
     @time_series = []  # a List of TimeSeries objects
@@ -74,7 +74,7 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE
     """
     # Default time interval is from two weeks ago to one week ahead.
     # We set the h/m/s to zero to benefit from a daily cache.
-    started_at = moment().subtract(6, 'month').hours(0).minutes(0).seconds(0)
+    started_at = moment().subtract(1, 'year').hours(0).minutes(0).seconds(0)
     stopped_at = moment().add(1, 'week').hours(0).minutes(0).seconds(0)
     @setStartAndStop(started_at, stopped_at)
     @loadAndCreatePlots(started_at, stopped_at)
@@ -97,6 +97,22 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE
     url = url.replace('<stopped_at>', stopped_at.format(API_TIME_FORMAT))
     url
+  buildSampUrl: ->
+    [started_at, stopped_at] = @getDomain()
+    targets = [t for t of @targets when @targets[t].active].sort().join('-')
+    parameters = [p for p of @parameters when @parameters[p].active].sort().join('-')
+    url = @configuration['api']['samp']
+    url = url.replace('<targets>', targets)
+    url = url.replace('<params>', parameters)
+    url = url.replace('<started_at>', started_at.format(API_TIME_FORMAT))
+    url = url.replace('<stopped_at>', stopped_at.format(API_TIME_FORMAT))
+    url
+
+  buildSampName: ->
+    [started_at, stopped_at] = @getDomain()
+    targets = [t.name for t in @getEnabledTargets()].sort().join(', ')
+    "Heliopropa for #{targets} from #{started_at.format(API_TIME_FORMAT)} to #{stopped_at.format(API_TIME_FORMAT)}."
+
   addTarget: (target) ->
     @targets[target.slug] = target
     this
@@ -106,6 +122,9 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE
 #      enableTarget(slug)
 #    this
+  getEnabledTargets: ->
+    [target for slug, target of @targets when target.active]
+
   enableTarget: (target_slug) ->
     @time_series.forEach((ts) ~> ts.show() if ts.target.slug == target_slug && @parameters[ts.parameter].active)
     @targets[target_slug].active = true
@@ -237,6 +256,9 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE
     )
     @time_series
+  getEnabledParameters: ->
+    [p for slug, p in @parameters when p.active]
+
   enableParameter: (parameter_slug) ->
     if parameter_slug not of @parameters then console.error("Unknown parameter #{parameter_slug}.")
     @parameters[parameter_slug].active = true
@@ -118,10 +118,16 @@
     <div class="mdl-grid">
       <div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-cell--4-col-phone">
         <section id="orbits"></section>
-        <button id="download" class="mdl-button mdl-button--raised mdl-button--primary"
-                title="Download the CSV raw data for each target in a tarball.">
-          Download
-        </button>
+        <div class="plots-actions plots-buttons">
+          <button id="download" class="mdl-button mdl-button--raised mdl-button--primary"
+                  title="Download the CSV raw data for each target in a tarball.">
+            Download
+          </button>
+          <button id="samp" class="samp mdl-button mdl-button--raised mdl-button--primary mdl-button--disabled"
+                  title="Send the data to a connected SAMP hub.">
+            SAMP
+          </button>
+        </div>
       </div>
       <div class="mdl-cell mdl-cell--8-col mdl-cell--8-col-tablet mdl-cell--4-col-phone">
         <section id="time_series">
@@ -234,10 +240,13 @@
       animation-delay: .8s;
     }
-    #download {
-      display: block;
+    .plots-buttons {
+      text-align: center;
       margin: 3em auto;
     }
+    .plots-buttons button {
+      margin: auto 1em;
+    }
     #time_series svg {
       cursor: crosshair;
@@ -526,7 +535,8 @@ var configuration = {
   orbits_container: '#orbits',
   api : {
       'data_for_interval': "{{ request.url_root }}<target>_<started_at>_<stopped_at>.csv",
-      'download': "{{ request.url_root }}<targets>_<started_at>_<stopped_at>.tar.gz"
+      'download': "{{ request.url_root }}<targets>_<started_at>_<stopped_at>.tar.gz",
+      'samp': "{{ request.url_root }}<targets>_<params>_<started_at>_<stopped_at>.nc"
   },
   sun: {
     img: '{{ static('img/sun_128.png') }}'
@@ -655,4 +665,58 @@ jQuery().ready(function($){
 });
 </script>
+
+{#### SAMP ###################################################################}
+<script type="text/javascript">
+  jQuery().ready(function ($) {
+    // Flag to know when a hub is connected or not
+    var isConnected = false;
+
+    // Show SAMP button(s) depending on whether the hub is available or not.
+    var onHubAvailability = function (isHubRunning) {
+      $(".samp").each(function (index, element) {
+        if (isHubRunning) {
+          isConnected = true;
+          $(element).removeClass('disabled mdl-button--disabled');
+        } else {
+          isConnected = false;
+          $(element).addClass('disabled mdl-button--disabled');
+        }
+      });
+    };
+
+    // Update the document about the presence of any SAMP hub every 10 sec.
+    var connector = new samp.Connector("Sender");
+    connector.onHubAvailability(onHubAvailability, 10000);
+    window.onunload = function () {
+      connector.unregister();
+    };
+
+    // Clicking on a SAMP button sends the CDF file to the connected hub.
+    $("#samp").click(function (event) {
+      event.stopPropagation();
+      if ($(this).hasClass('disabled')) { return; }
+      // pitfall : connector.connection is ALWAYS undefined here
+      if ( ! isConnected) {  // so we use a bool flag instead
+        alert("We do not detect any connected SAMP hub.\n" +
+            "Wait some more, or try refreshing this page?");
+        return;
+      }
+      var name = sw.buildSampName();
+      var url = sw.buildSampUrl();
+      console.log(name, url);
+      connector.runWithConnection(function (connection) {
+        var msg = new samp.Message("table.load.cdf", {
+          "name": name,
+          "url": url // absolute URL required
+        });
+        connection.notifyAll([msg]);
+      }, function (error) {
+        var msg = 'Error: ' + error;
+        console.error(msg);
+        alert(msg);  // let's yell at the user as well
+      });
+    });
+  });
+</script>
 {% endblock %}