Skip to content
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.

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

Responsive resizing #55

Open
wants to merge 47 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
53f8d76
Initial size to container div size. Scaling when resized (including t…
davidhoksza Aug 31, 2017
07919c0
Enable loading datasource using url using: url = 'data:text/plain,' …
davidhoksza Sep 28, 2017
1d5ece1
Preserv aspect ratio
davidhoksza Oct 5, 2017
1bdb910
Fixing loading external sources from data URI so that it works also f…
davidhoksza Oct 6, 2017
54d6f37
Invisible path in display viewer (in default view it was not visible …
davidhoksza Oct 6, 2017
70806bd
Non-resizing. FV width obtained dynamically.
davidhoksza Oct 9, 2017
163fe0d
Scaling of categories.
davidhoksza Oct 9, 2017
7e7058a
Variant scaling
davidhoksza Oct 11, 2017
052e55a
Merge branch 'master' into scaling
davidhoksza Oct 11, 2017
977fd74
Listening to iframe event. Added examples.
davidhoksza Oct 12, 2017
b8c296c
Reverting custom data loading.
davidhoksza Oct 12, 2017
a497943
Added missing semicolons.
davidhoksza Oct 12, 2017
f5ab4a4
Enabled specification of the JSON data sources using data URI
davidhoksza Oct 13, 2017
5d14f25
Iframe resize element creation moved from the onready function which …
davidhoksza Nov 27, 2017
79e4095
Merge branch 'scaling' into uri-data-sources
davidhoksza Nov 27, 2017
7e63b7a
Resize after iframe adding
davidhoksza Nov 28, 2017
d2ccdb2
Padding for the main view so that the aa lables do not start at posit…
davidhoksza Nov 30, 2017
268ba54
no message
davidhoksza Nov 30, 2017
244ea95
Modified fv width testing to not create category name element when n…
davidhoksza Dec 18, 2017
494007c
IFrame as child of up_pftv_container.
davidhoksza Jan 10, 2018
909c8c1
Fix leaking fv variable to global scope
davidhoksza Jan 12, 2018
9a6596e
Enabling multiple custom data sources.
davidhoksza Feb 26, 2018
34d7ec6
Fix possibly undefined accession when custom data source's promise re…
davidhoksza Mar 22, 2018
4e4bb73
Fix possibly undefined accession when custom data source's promise re…
davidhoksza Mar 22, 2018
fb3be29
added border-box style to category name (otherwise bootstrap messes t…
davidhoksza Jun 7, 2018
f914765
fix problems with selection caused by introducing box-sizing
davidhoksza Jun 7, 2018
1b859ce
fix problems with selection caused by introducing box-sizing
davidhoksza Jun 7, 2018
38d45b6
fix problems with selection caused by introducing box-sizing
davidhoksza Jun 7, 2018
873166c
Fix wrong variants histogram max height for custom data sources
davidhoksza Sep 11, 2018
02da89b
Fixed overflow of long categories names
davidhoksza Sep 11, 2018
edb8fd4
Update variants histogram with filter change
davidhoksza Sep 26, 2018
a3bf8ca
variantDataUpdated event
davidhoksza Nov 30, 2018
6f95864
temporary category only in memory (issues in FF)
davidhoksza Mar 30, 2020
de62b9e
header changed to dataType
Apr 3, 2020
9788e49
dataType replaced for contentType in post request
Apr 3, 2020
dcf38f4
dataType replaced for contentType in post request
Apr 3, 2020
a127f1a
added unpack function into post request handling
Apr 3, 2020
32b7d6e
temporary fix for obtaining width of category name
davidhoksza May 13, 2020
6b6fa70
make reset highlight available
davidhoksza Jun 30, 2020
3331774
highlight parameter to allow not zooming out if selection is out of c…
davidhoksza Jul 29, 2020
acd00f1
programatically zooming in
davidhoksza Jul 29, 2020
70211d0
Adapt for change in Proteins API
davidhoksza Oct 11, 2020
c55f354
Adapt for change in Proteins API
davidhoksza Oct 11, 2020
0fc5150
fixed incompatible npm and gulp version
davidhoksza Oct 30, 2021
55f1b67
added variantFilterDefaultBehavior enabling variant filter behavior a…
davidhoksza Oct 30, 2021
ab36f83
phantomjs cannot be installed using node 16
piotr-gawron Jul 4, 2022
d5e8390
Merge pull request #1 from piotr-gawron/issue-with-node-16
davidhoksza Jul 4, 2022
File filter

Filter by extension

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
Next Next commit
Variant scaling
davidhoksza committed Oct 11, 2017
commit 7e7058ae41583145029ee323cc4e18466fff63d6
43 changes: 30 additions & 13 deletions src/FeaturesViewer.js
Original file line number Diff line number Diff line change
@@ -134,7 +134,7 @@ var createNavRuler = function(fv, container) {

var navXScale = d3.scale.linear()
.domain([1,fv.maxPos])
.range([fv.padding.left, fv.width - fv.padding.right]);
.range(getFvXScaleRange(fv, true));

var svg = container
.append('div')
@@ -146,16 +146,20 @@ var createNavRuler = function(fv, container) {
// .attr('viewBox', function(){return "0,0," + fv.width + "," + navWithTrapezoid;});

var navXAxis = d3.svg.axis()
.scale(fv.xScale)
.scale(d3.scale.linear()
.domain(fv.xScale.domain())
.range(getFvXScaleRange(fv, true)))
.orient('bottom');

svg.append('g')
.attr('class', 'x axis')
.call(navXAxis);
var xAxis = svg.append('g')
.attr('class', 'x axis');

xAxis.call(navXAxis);

var viewport = d3.svg.brush()
.x(navXScale)
.on("brush", function() {
console.log("brush");
var s = d3.event.target.extent();
if((s[1] - s[0]) < fv.maxZoomSize) {
d3.event.target.extent([s[0],s[0] + fv.maxZoomSize]);
@@ -165,6 +169,10 @@ var createNavRuler = function(fv, container) {
update(fv);
viewport.updateTrapezoid();
});

viewport.xAxis = xAxis;
viewport.navXAxis = navXAxis;

viewport.on("brushstart", function () {
closeTooltipAndPopup(fv);
});
@@ -210,9 +218,9 @@ var createNavRuler = function(fv, container) {

viewport.updateTrapezoid = function() {
var begin = fv.globalContainer.select(".up_pftv_navruler .extent").attr("x");
var tWidth = fv.globalContainer.select(".up_pftv_navruler .extent").attr("width");
var tWidth = jQuery(".up_pftv_navruler .extent").attr("width");
var end = (+begin) + (+tWidth);
var path = "M0," + (navWithTrapezoid) + "L0" + "," + (navWithTrapezoid-2)
var path = "M0," + (navWithTrapezoid) + "L0" + "," + (navWithTrapezoid)
+ "L" + begin + "," + (navHeight-12) + "L" + begin + "," + navHeight
+ "L" + end + "," + navHeight + "L" + end + "," + (navHeight-12)
+ "L" + fv.width + "," + (navWithTrapezoid-2) + "L" + fv.width + "," + (navWithTrapezoid) + "Z";
@@ -469,13 +477,14 @@ var loadSources = function(opts, dataSources, loaders, delegates, fv) {

var getFvWidth = function(fv){
var divCategoryName = jQuery('<div class="up_pftv_category-name"></div>').appendTo(jQuery("body"));
var width = jQuery(fv.parentElement).width() - divCategoryName.outerWidth(true);
var width = jQuery(fv.parentElement).width() - divCategoryName.outerWidth(false);
divCategoryName.remove();
return width;
}

var getFvXScaleRange = function(fv) {
return [fv.padding.left, fv.width - fv.padding.right];
var getFvXScaleRange = function(fv, padding) {
return padding ? [fv.padding.left, fv.width - fv.padding.right] : [0, fv.width];

}

var FeaturesViewer = function(opts) {
@@ -503,9 +512,17 @@ var FeaturesViewer = function(opts) {

fv.xScale.range(getFvXScaleRange(fv));

fv.categories.forEach(function (cat){
cat.update();
});
fv.viewport.x().range(getFvXScaleRange(fv, true));
fv.viewport.domainEndLabel.attr('x',fv.width);
fv.viewport.xAxis.selectAll("*").remove();
fv.viewport.navXAxis.scale().range(getFvXScaleRange(fv, true));
fv.viewport.xAxis.call(fv.viewport.navXAxis);


update(fv);
// fv.viewport.updateTrapezoid();
updateZoomFromChart(fv);
updateViewportFromChart(fv);
});

fv.load = function() {
39 changes: 31 additions & 8 deletions src/VariantViewer.js
Original file line number Diff line number Diff line change
@@ -160,8 +160,29 @@ var drawVariants = function(variantViewer, bars, frequency, fv, container, catTi
variantCircle.exit().remove();
};

var createDataSeries = function(fv, variantViewer, svg, features, series) {
var mainChart = svg.append('g')

var updateChartArea = function(variantViewer){
variantViewer.svg.select('#plotAreaClip rect')
.attr("width", function(){return getClipPathWidth(variantViewer)});

variantViewer.svg.selectAll('.variation-y.axis.left line')
.attr('x2', getAxisLength(variantViewer));

variantViewer.svg.selectAll('.variation-y.axis.right')
.attr('transform','translate(' + getAxisLength(variantViewer) + ', 0)');

}

var getClipPathWidth = function(variantViewer) {
return variantViewer.width - 20;
}

var getAxisLength = function(variantViewer) {
return variantViewer.width - 18;
}

var createDataSeries = function(fv, variantViewer, features, series) {
var mainChart = variantViewer.svg.append('g')
.attr('transform','translate(0,' + variantViewer.margin.top + ')');

var chartArea = mainChart.append('g')
@@ -170,7 +191,7 @@ var createDataSeries = function(fv, variantViewer, svg, features, series) {
mainChart.append('clipPath')
.attr('id', 'plotAreaClip')
.append('rect')
.attr({ width: (variantViewer.width -20) , height: variantViewer.height})
.attr({ width: (getClipPathWidth(variantViewer)) , height: variantViewer.height})
.attr('transform','translate(10, -10)');

var dataSeries = chartArea
@@ -188,12 +209,12 @@ var createDataSeries = function(fv, variantViewer, svg, features, series) {

mainChart.append('g')
.attr('transform','translate(12 ,0)')
.attr('class','variation-y axis')
.attr('class','variation-y axis left')
.call(yAxis);

mainChart.append('g')
.attr('transform','translate(' + (variantViewer.width - 18) + ', 0)')
.attr('class','variation-y axis')
.attr('transform','translate(' + getAxisLength(variantViewer) + ', 0)')
.attr('class','variation-y axis right')
.call(yAxis2);

fv.globalContainer.selectAll('g.variation-y g.tick').attr('class', function(d) {
@@ -274,16 +295,18 @@ var VariantViewer = function(catTitle, features, container, fv, variantHeight, t
return variationPlot;
};

var svg = ViewerHelper.createSVG(container, variantViewer.width, variantViewer.height, fv, 'up_pftv_variants-svg');
variantViewer.svg = ViewerHelper.createSVG(container, variantViewer.width, variantViewer.height, fv, 'up_pftv_variants-svg');

// Data series
var series = variationPlot()
.xScale(variantViewer.xScale)
.yScale(variantViewer.yScale);

var dataSeries = createDataSeries(fv, variantViewer, svg, features, series);
var dataSeries = createDataSeries(fv, variantViewer, features, series);

this.update = function() {
variantViewer.width = fv.width;
updateChartArea(variantViewer);
dataSeries.call(series);
if (fv.selectedFeature) {
ViewerHelper.updateHighlight(fv);
2 changes: 1 addition & 1 deletion style/main.css
Original file line number Diff line number Diff line change
@@ -110,7 +110,7 @@ svg {
line-height: 2.1em;
width: 180px;
vertical-align: bottom;
padding: .485em;
padding: .5em;
border: none;
text-overflow: ellipsis;
white-space: nowrap;