Merge pull request #81 from lrgr/feature/hierarchical-clustering

Feature/hierarchical clustering

src/api.js

@@ -1,77 +1,151 @@
 import * as d3 from 'd3';
+import { getHashCode } from './helpers';
+
+const globalPlotData = {};
 
 export default class API {
     static api_base = process.env.VUE_APP_API_BASE;
 
+    // Cache helpers
+    static checkStored(hashCode) {
+        if(globalPlotData[hashCode] !== undefined) {
+            return Promise.resolve(globalPlotData[hashCode]);
+        }
+    }
+
+    static request(pr, url, dataOptions) {
+        let hashCode = getHashCode(url, dataOptions);
+        var stored = API.checkStored(hashCode);
+        if(stored == null) {
+            // Use the promise that was passed in
+            stored = pr;
+            globalPlotData[hashCode] = pr;
+        }
+        return stored;
+    }
+
+    // Fetches without cacheing
     static fetchDataListing() {
-        var url = API.api_base + "data-listing";
+        let url = API.api_base + "data-listing";
 
         return fetch(url, { method: "POST" })
-        .then(function(response) {
-            return response.json();
-        });
+            .then(function(response) {
+                return response.json();
+            });
     }
+
+    // Fetches with cacheing
+    static fetchChromosomes() {
+        let url = API.api_base + "chromosomes";
+
+        return API.request(
+            fetch(url, { method: "POST" })
+                .then(function(response) {
+                    return response.json();
+                }), 
+            url,
+            null
+        );
+    }
+
+    static fetchKaryotype() {
+        let url = API.api_base + "karyotype";
+
+        return API.request(
+            d3.csv(url, { method: "POST" }),
+            url,
+            null
+        );
+    }
+
     static fetchGenomeSignatureBins(dataOptions) {
-        var url = API.api_base + "signature-genome-bins";
+        let url = API.api_base + "signature-genome-bins";
         dataOptions['regionWidth'] = 5000000;
 
-        return d3.json(url, { method: "POST", body: JSON.stringify(dataOptions) });
+        return API.request(
+                d3.json(url, { method: "POST", body: JSON.stringify(dataOptions) }),
+                url,
+                dataOptions
+            );
     }
     static fetchKataegis(dataOptions) {
-        var url = API.api_base + "kataegis";
+        let url = API.api_base + "kataegis";
 
-        return d3.json(url, { method: "POST", body: JSON.stringify(dataOptions) });
+        return API.request(
+                d3.json(url, { method: "POST", body: JSON.stringify(dataOptions) }),
+                url,
+                dataOptions
+            );
     }
 
-    static fetchRainfall(rainfallOptions) {
-        var url = API.api_base + "kataegis-rainfall";
+    static fetchRainfall(dataOptions) {
+        let url = API.api_base + "kataegis-rainfall";
 
-        return d3.csv(url, { method: "POST", body: JSON.stringify(rainfallOptions) });
+        return API.request(
+            d3.csv(url, { method: "POST", body: JSON.stringify(dataOptions) }),
+            url,
+            dataOptions
+        );
     }
 
     static fetchExposures(dataOptions) {
-        var url = API.api_base + "exposures";
+        let url = API.api_base + "exposures";
 
-        return d3.json(url, { method: "POST", body: JSON.stringify(dataOptions) });
+        return API.request(
+            d3.json(url, { method: "POST", body: JSON.stringify(dataOptions) }),
+            url,
+            dataOptions
+        );
     }
 
     static fetchSingleDonorExposures(dataOptions) {
-        var url = API.api_base + "exposures-single-donor";
+        let url = API.api_base + "exposures-single-donor";
 
-        return d3.json(url, { method: "POST", body: JSON.stringify(dataOptions) });
-    }
-
-    static fetchChromosomes() {
-        var url = API.api_base + "chromosomes";
-
-        return fetch(url, { method: "POST" })
-        .then(function(response) {
-            return response.json();
-        });
+        return API.request(
+            d3.json(url, { method: "POST", body: JSON.stringify(dataOptions) }),
+            url,
+            dataOptions
+        );
     }
 
     static fetchSignature(dataOptions) {
-        var url = API.api_base + "signature";
+        let url = API.api_base + "signature";
 
-        return d3.json(url, { method: "POST", body: JSON.stringify(dataOptions) });
+        return API.request(
+            d3.json(url, { method: "POST", body: JSON.stringify(dataOptions) }),
+            url,
+            dataOptions
+        );
     }
 
     static fetchSamplesWithSignatures(dataOptions) {
-        var url = API.api_base + "samples-with-signatures";
+        let url = API.api_base + "samples-with-signatures";
 
-        return d3.json(url, { method: "POST", body: JSON.stringify(dataOptions) });
+        return API.request(
+            d3.json(url, { method: "POST", body: JSON.stringify(dataOptions) }),
+            url,
+            dataOptions
+        );
     }
 
     static fetchSingleDonorGenomeSignatureBins(dataOptions) {
-        var url = API.api_base + "signature-genome-bins-single-donor";
+        let url = API.api_base + "signature-genome-bins-single-donor";
         dataOptions['regionWidth'] = 5000000;
 
-        return d3.json(url, { method: "POST", body: JSON.stringify(dataOptions) });
+        return API.request(
+            d3.json(url, { method: "POST", body: JSON.stringify(dataOptions) }),
+            url,
+            dataOptions
+        );
     }
 
-    static fetchKaryotype() {
-        var url = API.api_base + "karyotype";
-
-        return d3.csv(url, { method: "POST" });
+    static fetchClustering(dataOptions) {
+        let url = API.api_base + "clustering";
+
+        return API.request(
+            d3.json(url, { method: "POST", body: JSON.stringify(dataOptions) }),
+            url,
+            dataOptions
+        );
     }
 }

src/buses.js

@@ -1,4 +1,5 @@
 import Vue from 'vue';
 
 export const DataOptionsBus = new Vue();
-export const LegendListBus = new Vue();
+export const LegendListBus = new Vue();
+export const PlotDataBus = new Vue();

src/components/Plot.vue

@@ -35,6 +35,7 @@ import RainfallPlot from './plots/RainfallPlot.vue'
 import SingleDonorExposuresPlot from './plots/SingleDonorExposuresPlot.vue'
 import SignaturePlot from './plots/SignaturePlot.vue'
 import SamplesWithSignaturesPlot from './plots/SamplesWithSignaturesPlot.vue'
+import ClusterPlot from './plots/ClusterPlot.vue'
 
 
 export default {
@@ -107,7 +108,8 @@ export default {
       RainfallPlot,
       SingleDonorExposuresPlot,
       SignaturePlot,
-      SamplesWithSignaturesPlot
+      SamplesWithSignaturesPlot,
+      ClusterPlot
   }
 }
 </script>