Skip to content

Downloads #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 9, 2018
Merged

Downloads #4

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f8f9707
WIP: downloading capability
keller-mark Oct 4, 2018
041e2ec
Refactored click/mouseover code
keller-mark Oct 9, 2018
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Refactored click/mouseover code
  • Loading branch information
@keller-mark
keller-mark committed Oct 9, 2018
commit 041e2ec81a4d31b706def03edaea2db1b0274662
79 changes: 0 additions & 79 deletions examples-src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,50 +154,6 @@
/>
</PlotContainer>

<PlotContainer
:pWidth="1000"
:pHeight="600"
:pMarginTop="10"
:pMarginLeft="120"
:pMarginRight="10"
:pMarginBottom="180"
>
<Axis
slot="axisLeft"
variable="exposure_brca"
side="left"
:tickRotation="-35"
:getScale="getScale"
:getStack="getStack"
:disableBrushing="true"
ref="brcaPlotAxisY"
/>
<MultiBoxPlot
slot="plot"
data="exposures_brca_data"
x="signature_brca"
y="exposure_brca"
:getData="getData"
:getScale="getScale"
:clickHandler="exampleClickHandler"
:drawOutliers="true"
ref="brcaPlot"
/>
<Axis
slot="axisBottom"
variable="signature_brca"
side="bottom"
:tickRotation="-65"
:getScale="getScale"
:getStack="getStack"
:disableBrushing="true"
ref="brcaPlotAxisX"
/>
</PlotContainer>
<button @click="downloadPlot">Download Plot</button>
<button @click="downloadAxisX">Download X Axis</button>
<button @click="downloadAxisY">Download Y Axis</button>

<h3>&lt;SortOptions/&gt;</h3>
<SortOptions
variable="sample_id"
Expand Down Expand Up @@ -228,9 +184,6 @@ import exposuresSingleData from './data/exposures_single.json';
import rainfallData from './data/rainfall.json';
import xyData from './data/xy.json';

import exposuresDataBRCA from './data/brca_12_exposures.json';


// Scales
import CategoricalScale from '../src/scales/CategoricalScale.js';
import ContinuousScale from '../src/scales/ContinuousScale.js';
Expand Down Expand Up @@ -267,11 +220,6 @@ const xyDataContainer = new DataContainer(
xyData
);

const exposuresBRCADataContainer = new DataContainer(
'exposures_brca_data',
'SBS Exposures for ICGC-BRCA-EU',
exposuresDataBRCA
);

// Initialize data
const getData = function(dataKey) {
Expand All @@ -284,10 +232,6 @@ const getData = function(dataKey) {
return rainfallDataContainer;
case 'xy_data':
return xyDataContainer;
case 'exposures_brca_data':
return exposuresBRCADataContainer;
default:
return {}
}
};

Expand Down Expand Up @@ -319,16 +263,6 @@ const xyXScale = new ContinuousScale(
[0, 50]
);

const signatureScaleBRCA = new CategoricalScale(
'signature_brca',
'Signature',
["COSMIC 1","COSMIC 2","COSMIC 3","COSMIC 5","COSMIC 6","COSMIC 8","COSMIC 13","COSMIC 17","COSMIC 18","COSMIC 20","COSMIC 26","COSMIC 30"]
);
const exposureScaleBRCA = new ContinuousScale(
'exposure_brca',
'Exposure',
[0, 45000]
)

const getScale = function(scaleKey) {
switch(scaleKey) {
Expand All @@ -342,10 +276,6 @@ const getScale = function(scaleKey) {
return xyYScale;
case 'x':
return xyXScale;
case 'exposure_brca':
return exposureScaleBRCA;
case 'signature_brca':
return signatureScaleBRCA;
}
};

Expand Down Expand Up @@ -404,15 +334,6 @@ export default {
methods: {
exampleClickHandler(x, y, c) {
alert("You clicked something with data: " + JSON.stringify({x: x, y: y, c: c}));
},
downloadPlot() {
this.$refs.brcaPlot.downloadPlot();
},
downloadAxisX() {
this.$refs.brcaPlotAxisX.downloadAxis();
},
downloadAxisY() {
this.$refs.brcaPlotAxisY.downloadAxis();
}
}
}
Expand Down
20 changes: 10 additions & 10 deletions src/components/plots/BarPlot.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,17 +257,21 @@ export default {
*/
const canvasNode = canvas.node();

const getDataFromMouse = (mouseX, mouseY) => {
// Get the corresponding pixel color on the hidden canvas
const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;
const colString = "rgb(" + col[0] + "," + col[1] + ","+ col[2] + ")";
// Look up the node in our map
return colToNode[colString];
};

const debouncedTooltipDestroy = debounce(vm.tooltipDestroy, TOOLTIP_DEBOUNCE);
canvas.on("mousemove", () => {
const mouse = d3_mouse(canvasNode);
const mouseX = mouse[0];
const mouseY = mouse[1];

// Get the corresponding pixel color on the hidden canvas
const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;
const colString = "rgb(" + col[0] + "," + col[1] + ","+ col[2] + ")";
// Look up the node in our map
const node = colToNode[colString];
const node = getDataFromMouse(mouseX, mouseY);

if(node) {
vm.tooltip(mouseX, mouseY, node["x"], node["y"]);
Expand All @@ -283,11 +287,7 @@ export default {
const mouseX = mouse[0];
const mouseY = mouse[1];

// Get the corresponding pixel color on the hidden canvas
const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;
const colString = "rgb(" + col[0] + "," + col[1] + ","+ col[2] + ")";
// Look up the node in our map
const node = colToNode[colString];
const node = getDataFromMouse(mouseX, mouseY);

if(node) {
vm.clickHandler(node["x"], node["y"]);
Expand Down
20 changes: 10 additions & 10 deletions src/components/plots/MultiBoxPlot.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -372,17 +372,21 @@ export default {
*/
const canvasNode = canvas.node();

const getDataFromMouse = (mouseX, mouseY) => {
// Get the corresponding pixel color on the hidden canvas
const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;
const colString = "rgb(" + col[0] + "," + col[1] + ","+ col[2] + ")";
// Look up the node in our map
return colToNode[colString];
}

const debouncedTooltipDestroy = debounce(vm.tooltipDestroy, TOOLTIP_DEBOUNCE);
canvas.on("mousemove", () => {
const mouse = d3_mouse(canvasNode);
const mouseX = mouse[0];
const mouseY = mouse[1];

// Get the corresponding pixel color on the hidden canvas
const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;
const colString = "rgb(" + col[0] + "," + col[1] + ","+ col[2] + ")";
// Look up the node in our map
const node = colToNode[colString];
const node = getDataFromMouse(mouseX, mouseY);

if(node) {
vm.tooltip(mouseX, mouseY, node);
Expand All @@ -398,11 +402,7 @@ export default {
const mouseX = mouse[0];
const mouseY = mouse[1];

// Get the corresponding pixel color on the hidden canvas
const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;
const colString = "rgb(" + col[0] + "," + col[1] + ","+ col[2] + ")";
// Look up the node in our map
const node = colToNode[colString];
const node = getDataFromMouse(mouseX, mouseY);

if(node) {
vm.clickHandler(node["x"]);
Expand Down
11 changes: 7 additions & 4 deletions src/components/plots/ScatterPlot.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,14 +227,18 @@ export default {
*/
const canvasNode = canvas.node();

const getDataFromMouse = (mouseX, mouseY) => {
const i = delaunay.find(mouseX, mouseY);
return data[i];
};

const debouncedTooltipDestroy = debounce(vm.tooltipDestroy, TOOLTIP_DEBOUNCE);
canvas.on("mousemove", () => {
const mouse = d3_mouse(canvasNode);
const mouseX = mouse[0];
const mouseY = mouse[1];

const i = delaunay.find(mouseX, mouseY);
const node = data[i];
const node = getDataFromMouse(mouseX, mouseY);

if(node) {
vm.tooltip(mouseX, mouseY, node[vm.x], node[vm.y]);
Expand All @@ -250,8 +254,7 @@ export default {
const mouseX = mouse[0];
const mouseY = mouse[1];

const i = delaunay.find(mouseX, mouseY);
const node = data[i];
const node = getDataFromMouse(mouseX, mouseY);

if(node) {
vm.clickHandler(node[vm.x], node[vm.y]);
Expand Down
20 changes: 10 additions & 10 deletions src/components/plots/StackedBarPlot.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,17 +285,21 @@ export default {
*/
const canvasNode = canvas.node();

const getDataFromMouse = (mouseX, mouseY) => {
// Get the corresponding pixel color on the hidden canvas
const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;
const colString = "rgb(" + col[0] + "," + col[1] + ","+ col[2] + ")";
// Look up the node in our map
return colToNode[colString];
};

const debouncedTooltipDestroy = debounce(vm.tooltipDestroy, TOOLTIP_DEBOUNCE);
canvas.on("mousemove", () => {
const mouse = d3_mouse(canvasNode);
const mouseX = mouse[0];
const mouseY = mouse[1];

// Get the corresponding pixel color on the hidden canvas
const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;
const colString = "rgb(" + col[0] + "," + col[1] + ","+ col[2] + ")";
// Look up the node in our map
const node = colToNode[colString];
const node = getDataFromMouse(mouseX, mouseY);

if(node) {
vm.tooltip(mouseX, mouseY, node["x"], node["y"], node["c"]);
Expand All @@ -311,11 +315,7 @@ export default {
const mouseX = mouse[0];
const mouseY = mouse[1];

// Get the corresponding pixel color on the hidden canvas
const col = contextHidden.getImageData(mouseX * ratio, mouseY * ratio, scaledWidth, scaledHeight).data;
const colString = "rgb(" + col[0] + "," + col[1] + ","+ col[2] + ")";
// Look up the node in our map
const node = colToNode[colString];
const node = getDataFromMouse(mouseX, mouseY);

if(node) {
vm.clickHandler(node["x"], node["y"], node["c"]);
Expand Down