Skip to content

Updating to Current #1

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

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Updating to Current #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6217ecf
change display, update intro slides
KathyLiu20 Jun 28, 2022
3765569
update pop up window
KathyLiu20 Jun 28, 2022
297bf22
finish pop up window
KathyLiu20 Jun 29, 2022
65e0a2e
fixed zoom and pan-genome, timeline
KathyLiu20 Jun 29, 2022
4a32149
fixed intro slides auto pop up
KathyLiu20 Jun 29, 2022
afcb6ca
timeline zoom and pan genome
KathyLiu20 Jun 30, 2022
1adb8a2
update typos
KathyLiu20 Jun 30, 2022
23f1d05
responsive text
KathyLiu20 Jul 1, 2022
8f85030
update responsive
KathyLiu20 Jul 1, 2022
5a60ba9
update nav bar
KathyLiu20 Aug 2, 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
Binary file added data/intro/flip_animating.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added data/intro/flip_apollo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added data/intro/flip_circos.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added data/intro/flip_static.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added data/intro/genome_animated.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added data/intro/genome_apollo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added data/intro/genome_circos.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added data/intro/genome_static2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added data/intro/intro.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added data/intro/intro2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added data/intro/phylo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 26 additions & 5 deletions genome.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,25 @@
</head>

<body>
<div>
<div id="genome_intro_slides" class="modal">
<!-- Modal content -->
<div class="modal-content container">
<div class="row align-items-center" id="modal-content-title">
<div class="col-11 title-text-box" style="top: 5%; font-size: 2.5rem; font-weight: bold;"></div>
<div class="col-1 skip-button-box" style="top: -1%;"></div>
</div>
<div class="row" id="modal-content-body"></div>
<div class="row" id="modal-content-buttons">
<div class="col-8"></div>
<div class="col-2 previous-button-box" style="text-align:right;"></div>
<div class="col-2 next-button-box" style=></div>
</div>
</div>
</div>
<nav class="main-nav navbar-fixed-top" role="navigation">
<h2 class="nav-brand"><a href="/#">Synteny Explorer</h2></a>
<h2 class="nav-brand"><a href=# class="web-name">Synteny Explorer</a></h2>
<p class="nav-brand"><a href=# class="web-name">Genome View</a></p>
<ul id="main-menu" class="sm sm-clean">
<li><a href="#"> Mode</a>
<ul>
Expand All @@ -28,23 +45,26 @@ <h2 class="nav-brand"><a href="/#">Synteny Explorer</h2></a>
<li><a class="mode" id="circos" href="#">Circos</a></li>
</ul>
</li>
<li><a href="#"> Help</a></li>
<li id="reset"><a href="#"> Reset</a></li>
<li id="recenter"><a href="#"> Recenter</a></li>
<li><a href="#" id="show_intro"> Help</a></li>
</ul>
</nav>
<div class="padding"></div>
<div id="chromosomes"></div>
<div id="rightBar">
<div class="topSelectBox" id="speOne">
<p> Click Icons to Select Species.</p>
<p>Click on two different animals from the phylogenetic tree to select,
and then go to the chromosome view to see the genome evolution and
divergence of the two species, based on common ancestors!</p>
</div>
<div class="SelectBox2" id="miniTree">
<button type="button" class="button" id="phylo">Go to phylo view</button>
</div>
<div class="bottomSelectBox" id="speTwo">
<p id=""> Click Icons to Select Species.</p>
</div>
</div>

</div>
<div>
<script src="js/jquery.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
Expand All @@ -55,6 +75,7 @@ <h2 class="nav-brand"><a href="/#">Synteny Explorer</h2></a>
<script src="js/createMiniTree.js"></script>
<script src="js/miniLife.js"></script>
<script src="js/genome/genome.js"></script>
<script src="js/phylo/createIntroSlides.js"></script>


<!-- jQuery -->
Expand Down
56 changes: 37 additions & 19 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,35 +15,49 @@

<body onmousedown="return false" onselectstart="return false">
<div>
<div id="intro_slides" class="modal">
<!-- Modal content -->
<div class="modal-content container">
<div class="row align-items-center" id="modal-content-title">
<div class="col-11 title-text-box" style="top: 5%; font-weight: bold;"></div>
<div class="col-1 skip-button-box" style="top: -1%;"></div>
</div>
<div class="row" id="modal-content-body"></div>
<div class="row" id="modal-content-buttons">
<div class="col-6"></div>
<div class="col-3 previous-button-box" style="text-align:right;"></div>
<div class="col-3 next-button-box" style=></div>
</div>
</div>
</div>
<nav class="main-nav navbar-fixed-top" role="navigation">
<h2 class="nav-brand"><a href="#">Synteny Explorer</h2></a>
<h2 class="nav-brand"><a href=# class="web-name">Synteny Explorer</a></h2>
<p class="nav-brand"><a href=# class="web-name">Phylo View</a></p>
<ul id="main-menu" class="sm sm-clean">
<li><a href="#">Display</a>
<ul>
<li><a href="#">Layout</a>
<!--<li><a href="#">Display</a>
<ul>!-->
<!--<li><a href="#">Layout</a>
<ul>
<li><a href="#" id="radial">Radial</a></li>
<li><a href="#" id="linear">Linear</a></li>
</ul>
</li>
<li><a href="#">Zoom</a>
</li>!-->
<!--<li><a href="#">Zoom</a>
<ul>
<li>
<input id="zoomValue" type="number" value="100" min="1" max="200" onkeypress="return event.charCode >= 48 && event.charCode <= 57" />%
</li>
</ul>
</li>
<li><a href="#">Show</a>
</li>!-->
<li><a href="#">Labels</a>
<ul>
<li>
<a id="show_timeLine" href="#">Timeline </a> </li>
<li><a id="show_name" href="#">species names </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"> Help</a></li>
<li id="Reset"><a href="#"> Undo</a></li>
<li><a id="show_timeLine" href="#">Timeline </a> </li>
<li><a id="show_name" href="#">Species Names </a></li>
</ul>
</li>
<!--</ul>
</li>!-->
<li><a href="#" id="show_intro"> Help</a></li>
</ul>
</nav>
<div class="map" id="tree"></div>
Expand All @@ -57,12 +71,14 @@ <h2 class="nav-brand"><a href="#">Synteny Explorer</h2></a>
<div id="rightBar">
<div class="topSelectBox" id="speOne">
<div class="innerBox">
<p id="selectSpe1"> Click Icons to Select Species.</p>
<p id="selectSpe1">Click on two different animals from the phylogenetic tree to select,
and then go to the chromosome view to see the genome evolution and
divergence of the two species, based on common ancestors!</p></p>
</div>

</div>
<div class="SelectBox2" id="miniTree">
<button type="button" class="button" id="genome">genome view</button>
<button type="button" class="button" id="genome">Go to genome view</button>
</div>
<div class="bottomSelectBox" id="speTwo">
<div class="innerBox">
Expand All @@ -85,6 +101,7 @@ <h2 class="nav-brand"><a href="#">Synteny Explorer</h2></a>
<script src="js/phylo/createLinearContextTree.js"></script>
<script src="js/phylo/createRadialContextTree.js"></script>
<script src="js/phylo/panAndZoom.js"></script>
<script src="js/phylo/createIntroSlides.js"></script>

<!-- jQuery -->
<script type="text/javascript" src="smartmenus/libs/jquery/jquery.js"></script>
Expand All @@ -94,6 +111,7 @@ <h2 class="nav-brand"><a href="#">Synteny Explorer</h2></a>

<!-- SmartMenus jQuery init -->
<script type="text/javascript" src="js/smartMenuInitial.js"></script>

</div>
</body>

Expand Down
62 changes: 39 additions & 23 deletions js/genome/genome.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@


$("#reset").click(function(){
// reload whole page to reset visualizations (not efficient)
window.location.reload();
$("#recenter").click(function(){
// recenter the zoomed svg
svg
.call(zoom_function.transform, d3.zoomIdentity)
.attr("transform", "translate(" + margin.left + "," + (0) + ")");;
});

$("#phylo").click(function(){
// window will load in the same tag
window.location.replace("phylo.html");
});


//get filename from previous page.
Expand Down Expand Up @@ -65,23 +71,26 @@ var margin = {
width = 550 - margin.left - margin.right,
height = 1050 - margin.top - margin.bottom;

var zoom_function = d3.zoom().scaleExtent([1, 2.5]).on("zoom", function () { svg.attr("transform", d3.event.transform); })

var svg = d3.select("#chromosomes")
.append("svg")
.style("cursor","move")
.attr("width", 1800 + margin.left + margin.right)
//.attr("width", 1800 + margin.left + margin.right)
.attr("width", '84%')
.attr("id", "chrSvg")
.attr("height", 1400 + margin.top + margin.bottom)
//.attr("height", 1400 + margin.top + margin.bottom)
.attr("height", '100%')
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 1800 1550")
.call(d3.zoom().scaleExtent([1, 2.5]).on("zoom", function () {
svg.attr("transform", d3.event.transform);
}))// enable zoom and pan with d3
.append("g")
.attr("id", "tree")
.attr("transform", "translate(" + margin.left + "," + (-130) + ")");
.call(zoom_function)// enable zoom and pan with d3
.append("g")
.attr("id", 'tree')
.attr("class", "panSelect")
.attr("transform", "translate(" + margin.left + "," + (0) + ")");


//make svg responsive ????
//make svg responsive
var chart = $("#chrSvg"),
originalWidth = chart.width(),
aspect = originalWidth / $(window).width();
Expand Down Expand Up @@ -399,7 +408,6 @@ queue.awaitAll(function(error, csvDataSets) {
});

function changeCursorStyle() {
console.log("here418");
d3.select(this).style("cursor","zoom-in");
}

Expand Down Expand Up @@ -455,7 +463,7 @@ queue.awaitAll(function(error, csvDataSets) {
if (mode == "forward" || mode == "backward") {
$("#morphthenslide").css("color", "#d23600");
d3.select("#tree")
.attr("transform", "translate(" + margin.left + "," + (-130) + ")");
.attr("transform", "translate(" + margin.left + "," + (0) + ")");
d3.selectAll(".circos").remove();
d3.selectAll(".chrChart path").remove();
for (b = data.length - 1; b >= 0; b--) {
Expand All @@ -474,7 +482,7 @@ queue.awaitAll(function(error, csvDataSets) {
forward_pointer_event();
$("#morphthenslide").css("color", "#555555");
d3.select("#tree")
.attr("transform", "translate(" + margin.left + "," + (-130) + ")");
.attr("transform", "translate(" + margin.left + "," + (0) + ")");
selectedLink = [];
for (b = data.length - 1; b >= 0; b--) {
d3.select("#" + childrens[b] + " text").style("opacity", 1);
Expand Down Expand Up @@ -886,8 +894,11 @@ function appendRow(num, temparray, data, layer, spe) {
}

function circos(data, data2, childSpe, parentSpe) {
d3.select("#tree")
.attr("transform", "translate(" + (margin.left) + "," + (-50) + ")scale(1.2)");
//d3.select("#tree")
//.attr("transform", "translate(" + (margin.left) + "," + (-50) + ")scale(1.2)");
//d3.select(".link_big .node").attr("transform", "translate(" + (margin.left) + "," + (-50) + ")scale(1.2)");

//console.log("2")

var groupCounts = {};
var translocations = [];
Expand Down Expand Up @@ -920,7 +931,9 @@ function circos(data, data2, childSpe, parentSpe) {
else{
y = y2 + (y1 - y2)/2.5;
}
var x = x1 + (x2 - x1)/1.8;
var x = x1 + (x2 - x1)/5; // 1,8

console.log(x)

data2.forEach(function(d, i) {
if(uniqueCounts[d.chr + d.name] === undefined){
Expand Down Expand Up @@ -969,10 +982,12 @@ function circos(data, data2, childSpe, parentSpe) {
.groups(groups)
.edges(translocations);

var g = d3.select("#chrSvg").append("g")
var g = d3.select("#tree").append("g")
.attr("transform", "translate(" + x + "," + y + ")")
.attr("class", parentSpe + "_" + childSpe + "_circos circos")
.attr('pointer-events', 'all');
.attr('class', `${parentSpe}_${childSpe}_circos circos panSelect`)
//.attr("class", parentSpe + "_" + childSpe + "_circos circos")
.attr('pointer-events', 'all')


var line = g.append("line")
.style("stroke", "white")
Expand Down Expand Up @@ -1019,7 +1034,8 @@ function circos(data, data2, childSpe, parentSpe) {
})
.attr("class",function(d){return chr[d.index];})
.attr("d", d3.arc().innerRadius(innerRadius).outerRadius(outerRadius))
.on("click",fade(0.5));
.on("click",fade(0.5))
.attr("cursor", "pointer");

group.append("text")
.filter(function(d) { return unique.indexOf(d.index) != -1; })
Expand All @@ -1042,7 +1058,7 @@ function circos(data, data2, childSpe, parentSpe) {
}
})
.style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : ""; })
.text(function(d) { return chr[d.index].split("_")[1]; });
.text(function(d) { return chr[d.index].split("_")[1]; })

g.append("g").attr("class", "ribbons")
.selectAll("path")
Expand Down
Loading