Save state json

docs/_javascript/line_plot_zoom.js

@@ -256,7 +256,7 @@ function genomeLineChart() {
     updateLogoPlot();
   }
 
-  var selectSite = function(circlePoint){
+  selectSite = function(circlePoint){
       var circleData = circlePoint.data()[0];
       // update the FOCUS plot
        circlePoint.style("fill", color_key[circleData.site])
@@ -272,7 +272,7 @@ function genomeLineChart() {
     });
   };
 
-  var deselectSite = function(circlePoint){
+  deselectSite = function(circlePoint){
     var circleData = circlePoint.data()[0];
     // update FOCUS plot
     circlePoint.style("fill", greyColor)
@@ -461,6 +461,7 @@ function genomeLineChart() {
           }
       });
 
+    // brush select/deselect choices
       d3.selectAll("input[name='mode']").on("change", function(){
         lastBrushTypeClick = this.value;
         if ( this.value === 'select' ) {

docs/_javascript/main.js

@@ -80,6 +80,13 @@ window.addEventListener('DOMContentLoaded', (event) => {
         .classed("button", true)
         .on('click', clearbuttonchange);
 
+      var exportButton = d3.select("#line_plot")
+        .insert("button", "svg")
+        .text("export state")
+        .attr("id", "exportButton")
+        .classed("button", true)
+        .on('click', exportbuttonchange);
+
       var conditiondropdown = d3.select("#line_plot")
         .insert("select", "svg")
         .attr("id", 'condition')

docs/_javascript/prot_struct.js

@@ -88,31 +88,36 @@ var polymerSelect = createSelect([
   ["surface", "surface"]
 ], {
   onchange: function(e) {
-    stage.getRepresentationsByName("polymer").dispose()
-    stage.eachComponent(function(o) {
-      o.addRepresentation(e.target.value, {
-          sele: "polymer",
-          name: "polymer",
-          color: greyColor
-        })
-        // on change, reselect the points so they are "on top"
-      d3.selectAll(".selected").data().forEach(function(element) {
-        element.protein_chain.forEach(function(chain){
-          deselectSiteOnProtein(":" + chain + " and " + element.protein_site)
-          selectSiteOnProtein(
-            ":" + chain + " and " + element.protein_site,
-            color_key[element.site]
-          )
-        })
-
-      });
-    })
+    const representation = e.target.value;
+    changeProteinRepresentation(representation)
   }
 }, {
   top: "36px",
   left: "12px"
 })
 
+function changeProteinRepresentation(representation){
+  stage.getRepresentationsByName("polymer").dispose()
+  stage.eachComponent(function(o) {
+    o.addRepresentation(representation, {
+        sele: "polymer",
+        name: "polymer",
+        color: greyColor
+      })
+      // on change, reselect the points so they are "on top"
+    d3.selectAll(".selected").data().forEach(function(element) {
+      element.protein_chain.forEach(function(chain){
+        deselectSiteOnProtein(":" + chain + " and " + element.protein_site)
+        selectSiteOnProtein(
+          ":" + chain + " and " + element.protein_site,
+          color_key[element.site]
+        )
+      })
+
+    });
+  })
+}
+
 // tooltip setup
 tooltip = createElement("div", {}, {
   display: "none",

docs/_javascript/state.js

@@ -0,0 +1,92 @@
+exportbuttonchange = function(){
+  var state = {
+    "site": d3.selectAll('.selected').data().map(d => +d.site),
+    "condition": d3.select("#condition").property('value'),
+    "site-metric": d3.select("#site").property('value'),
+    "mut-metric": d3.select("#mutation_metric").property('value'),
+    "protein-representation": polymerSelect.value
+  }
+  var fname = prompt("File name: ")
+  if(fname === null){
+    fname = "dms-view.json"
+  }
+  state = JSON.stringify(state);
+  download(fname, state);
+};
+
+function download(filename, text) {
+  var element = document.createElement('a');
+  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+  element.setAttribute('download', filename);
+  element.style.display = 'none';
+  document.body.appendChild(element);
+  element.click();
+  document.body.removeChild(element);
+}
+
+function JSONButtonChange () {
+  // Try to load the user's provided URL to a Markdown document.
+  const JSONUrl = d3.select("#state-url").property('value');
+  if (JSONUrl.length > 0) {
+    d3.json(JSONUrl)
+    .then(updateState)
+    .catch(err =>alert("Couldn't parse " + JSONUrl + ".\nIs it a proper JSON?"))
+  }else{
+    alert("No state URL entered.")
+  }
+}
+
+var JSONButton = d3.select("#state-url-submit")
+  .on("click", JSONButtonChange);
+
+function updateState(state){
+  // check state form
+  checkState(state)
+  // figure out what sites to select/deselect
+  var current_selection = d3.selectAll(".selected").data().map(d => +d.site),
+      sites_to_deselect = _.without.apply(_, [current_selection].concat(state["site"])),
+      sites_to_select = _.without.apply(_, [state["site"]].concat(current_selection))
+  // deselect sites.
+  sites_to_deselect.forEach(function(site){
+    deselectSite(d3.select("#site_" + site))
+  })
+  // select sites.
+  sites_to_select.forEach(function(site){
+    selectSite(d3.select("#site_" + site))
+  })
+
+ // update condition
+ updateDropDownMenu("#condition", state["condition"])
+
+ // update site metric
+ updateDropDownMenu("#site", state["site-metric"])
+
+ // update mut metric
+ updateDropDownMenu("#mutation_metric", state["mut-metric"])
+
+// update protein representation
+polymerSelect.value = state["protein-representation"]
+changeProteinRepresentation(state["protein-representation"])
+
+// call change on dropdowns to re-up chart
+d3.select("#site").dispatch("change")
+}
+
+function updateDropDownMenu(dropdownid, target){
+  d3.select(dropdownid)
+     .selectAll("option")
+     .property('selected', function(d){return d === target;})
+}
+
+function checkState(state){
+  var alertMsg;
+  ["condition", "site-metric", "mut-metric", "protein-representation"]
+  .forEach(function(target){
+    if(!(target in state)){
+      alertMsg = alertMsg + "\nCouldn't find " + target + " in JSON. Reverting to current value."
+    }
+  })
+  if(alertMsg){
+    alert(alertMsg)
+  }
+}

docs/index.html

@@ -28,6 +28,12 @@ <h4>Instructions:</h4>
         Select points of interest by <span style="font-weight:bold">clicking</span> or <span style="font-weight:bold">brushing</span> (click, hold and swipe).
         Deselect points by <span style="font-weight:bold">clicking</span> again or <span style="font-weight:bold">brushing</span> after changing the dropdown from <span style="font-style:italic">select</span> to <span style="font-style:italic">deselect</span>.
         Change between different <span style="font-style:italic">sera</span>, different <span style="font-style:italic">site-level metrics</span> and different <span style="font-style:italic">mutation-level metrics</span> using the dropwdown menus.
+        <p>
+          <form>
+            <input id="state-url" text="text" class="form-control" placeholder="state URL" />
+            <input id="state-url-submit" class="btn btn-default" type="button" value="Submit">
+          </form>
+        </p>
       </div>
     </div>
 
@@ -52,5 +58,6 @@ <h4 align="center">site-level metric</h4>
   <script src="_javascript/ngl.js"></script>
   <script src="_javascript/prot_struct.js" type="text/javascript"></script>
   <script src="_javascript/logoplot.js" type="text/javascript"></script>
+  <script src="_javascript/state.js" type="text/javascript"></script>
 </body>
 </html>