Feature/genome scatter plot

README.md

@@ -46,7 +46,7 @@ yarn run docs
 - BarPlot :white_check_mark:
 - StackedBarPlot :white_check_mark:
 - ScatterPlot :white_check_mark:
-- GenomeScatterPlot
+- GenomeScatterPlot :white_check_mark:
 - GenomeStackedBarPlot
 - GenomeTrackPlot
 - TrackPlot :white_check_mark:

examples-src/App.vue

@@ -221,7 +221,44 @@
  >
  <GenomeAxis
  slot="axisBottom"
- scaleKey="genome_scale"
+ scaleKey="genome"
+ side="bottom"
+ :getScale="getScale"
+ :getStack="getStack"
+ />
+ </PlotContainer>
+
+ <h3>&lt;GenomeScatterPlot/&gt;</h3>
+ <PlotContainer
+ :pWidth="800"
+ :pHeight="500"
+ :pMarginTop="20"
+ :pMarginLeft="150"
+ :pMarginRight="20"
+ :pMarginBottom="80"
+ > 
+ <Axis
+ slot="axisLeft"
+ variable="mut_dist"
+ side="left"
+ :getScale="getScale"
+ :getStack="getStack"
+ />
+ <GenomeScatterPlot
+ slot="plot"
+ data="rainfall_data"
+ g="genome"
+ chromosomeVariable="chr"
+ positionVariable="pos"
+ c="cat"
+ y="mut_dist"
+ :getData="getData"
+ :getScale="getScale"
+ :clickHandler="exampleClickHandler"
+ />
+ <GenomeAxis
+ slot="axisBottom"
+ scaleKey="genome"
  side="bottom"
  :getScale="getScale"
  :getStack="getStack"
@@ -250,6 +287,8 @@ import { set as d3_set } from 'd3-collection';
 // Plots
 import { PlotContainer, Axis, GenomeAxis } from '../src/index.js';
 import { StackedBarPlot, BarPlot, ScatterPlot, BoxPlot, MultiBoxPlot, TrackPlot } from '../src/index.js';
+import { GenomeScatterPlot } from '../src/index.js';
+
 
 // Data
 import DataContainer from '../src/data/DataContainer.js';
@@ -360,6 +399,48 @@ const ageScale = new ContinuousScale(
  [0, 100]
 );
 const genomeScale = new GenomeScale("genome", "Genome");
+const SBS_96_CATEGORIES = [
+ 'A[C>A]A', 'A[C>A]C', 'A[C>A]G', 'A[C>A]T', 
+ 'C[C>A]A', 'C[C>A]C', 'C[C>A]G', 'C[C>A]T', 
+ 'G[C>A]A', 'G[C>A]C', 'G[C>A]G', 'G[C>A]T', 
+ 'T[C>A]A', 'T[C>A]C', 'T[C>A]G', 'T[C>A]T', 
+
+ 'A[C>G]A', 'A[C>G]C', 'A[C>G]G', 'A[C>G]T', 
+ 'C[C>G]A', 'C[C>G]C', 'C[C>G]G', 'C[C>G]T', 
+ 'G[C>G]A', 'G[C>G]C', 'G[C>G]G', 'G[C>G]T', 
+ 'T[C>G]A', 'T[C>G]C', 'T[C>G]G', 'T[C>G]T', 
+
+ 'A[C>T]A', 'A[C>T]C', 'A[C>T]G', 'A[C>T]T', 
+ 'C[C>T]A', 'C[C>T]C', 'C[C>T]G', 'C[C>T]T',
+ 'G[C>T]A', 'G[C>T]C', 'G[C>T]G', 'G[C>T]T', 
+ 'T[C>T]A', 'T[C>T]C', 'T[C>T]G', 'T[C>T]T', 
+
+ 'A[T>A]A', 'A[T>A]C', 'A[T>A]G', 'A[T>A]T', 
+ 'C[T>A]A', 'C[T>A]C', 'C[T>A]G', 'C[T>A]T', 
+ 'G[T>A]A', 'G[T>A]C', 'G[T>A]G', 'G[T>A]T',
+ 'T[T>A]A', 'T[T>A]C', 'T[T>A]G', 'T[T>A]T', 
+
+ 'A[T>C]A', 'A[T>C]C', 'A[T>C]G', 'A[T>C]T', 
+ 'C[T>C]A', 'C[T>C]C', 'C[T>C]G', 'C[T>C]T', 
+ 'G[T>C]A', 'G[T>C]C', 'G[T>C]G', 'G[T>C]T', 
+ 'T[T>C]A', 'T[T>C]C', 'T[T>C]G', 'T[T>C]T', 
+
+ 'A[T>G]A', 'A[T>G]C', 'A[T>G]G', 'A[T>G]T', 
+ 'C[T>G]A', 'C[T>G]C', 'C[T>G]G', 'C[T>G]T', 
+ 'G[T>G]A', 'G[T>G]C', 'G[T>G]G', 'G[T>G]T', 
+ 'T[T>G]A', 'T[T>G]C', 'T[T>G]G', 'T[T>G]T'
+];
+const catScale = new CategoricalScale(
+ 'cat',
+ 'Mutation Category',
+ SBS_96_CATEGORIES
+);
+const mutDistScale = new ContinuousScale(
+ 'mut_dist',
+ 'Distance to Previous Mutation',
+ [0, 6000000]
+);
+
 
 const getScale = function(scaleKey) {
  switch(scaleKey) {
@@ -375,8 +456,12 @@ const getScale = function(scaleKey) {
  return xyXScale;
  case 'age':
  return ageScale;
- case 'genome_scale':
+ case 'genome':
  return genomeScale;
+ case 'cat':
+ return catScale;
+ case 'mut_dist':
+ return mutDistScale;
  }
 };
 
@@ -389,7 +474,9 @@ stack.push(new HistoryEvent(HistoryEvent.types.SCALE, "signature", "reset"), tru
 stack.push(new HistoryEvent(HistoryEvent.types.SCALE, "y", "reset"), true);
 stack.push(new HistoryEvent(HistoryEvent.types.SCALE, "x", "reset"), true);
 stack.push(new HistoryEvent(HistoryEvent.types.SCALE, "age", "reset"), true);
-stack.push(new HistoryEvent(HistoryEvent.types.SCALE, "genome_scale", "reset"), true);
+stack.push(new HistoryEvent(HistoryEvent.types.SCALE, "genome", "reset"), true);
+stack.push(new HistoryEvent(HistoryEvent.types.SCALE, "cat", "reset"), true);
+stack.push(new HistoryEvent(HistoryEvent.types.SCALE, "mut_dist", "reset"), true);
 
 
 
@@ -417,7 +504,8 @@ export default {
  ScatterPlot,
  BoxPlot,
  MultiBoxPlot,
- TrackPlot
+ TrackPlot,
+ GenomeScatterPlot
  },
  data() {
  return {

src/components/GenomeAxis.vue

@@ -51,8 +51,6 @@ const ORIENTATIONS = Object.freeze({ "VERTICAL": 1, "HORIZONTAL": 2 }); // verti
 let uuid = 0;
 /**
  * @prop {string} scaleKey The key for the genome scale instance, passed to getScale.
- * @prop {string} chromosomeVariable The axis chromosome variable key. Default: "chromosome"
- * @prop {string} positionVariable The axis position variable key. Default: "position"
  * @prop {string} side The side for the scale.
  * @prop {number} pWidth The plot width.
  * @prop {number} pHeight The plot height.
@@ -62,7 +60,6 @@ let uuid = 0;
  * @prop {number} pMarginBottom The plot bottom margin.
  * @prop {function} getScale Function that takes a scale key string and returns a scale instance.
  * @prop {function} getStack Function that returns a HistoryStack instance.
- * @prop {boolean} disableBrushing Whether to disable brushing functionality and hide the zoomed-out "context" view.
  * 
  * @example
  * <GenomeAxis
@@ -84,14 +81,6 @@ export default {
  'scaleKey': {
  type: String
  },
- 'chromosomeVariable': {
- type: String,
- default: "chromosome"
- },
- 'positionVariable': {
- type: String,
- default: "position"
- },
  'side': {
  type: String
  },
@@ -118,10 +107,6 @@ export default {
  },
  'getStack': {
  type: Function
- },
- 'disableBrushing': {
- type: Boolean,
- default: false
  }
  },
  data() {
@@ -300,7 +285,7 @@ export default {
  let offset = Math.floor(chromosomeRangeFiltered / 4);
  let newStart = this.selectedChromosomeStart + offset;
  let newEnd = this.selectedChromosomeEnd - offset;
- if(newStart !== this.selectedChromosomeStart && newEnd !== this.selectedChromosomeEnd) {
+ if(newStart !== this.selectedChromosomeStart || newEnd !== this.selectedChromosomeEnd) {
  this._varScale.filterByChromosomeAndPosition(this.selectedChromosome, newStart, newEnd);
  this._stack.push(new HistoryEvent(
  HistoryEvent.types.SCALE, 
@@ -317,7 +302,7 @@ export default {
  let offset = Math.floor(chromosomeRangeFiltered / 2);
  let newStart = Math.max(chromosomeDomain[0], this.selectedChromosomeStart - offset);
  let newEnd = Math.min(chromosomeDomain[1], this.selectedChromosomeEnd + offset);
- if(newStart !== this.selectedChromosomeStart && newEnd !== this.selectedChromosomeEnd) {
+ if(newStart !== this.selectedChromosomeStart || newEnd !== this.selectedChromosomeEnd) {
  this._varScale.filterByChromosomeAndPosition(this.selectedChromosome, newStart, newEnd);
  this._stack.push(new HistoryEvent(
  HistoryEvent.types.SCALE,