Skip to content

Commit 1d4deca

Browse files
scastlarascastlara
committed
TOC for Planexp
1 parent 8b24745 commit 1d4deca

File tree

5 files changed

+81
-4
lines changed

5 files changed

+81
-4
lines changed

‎NetExplorer/static/css/style.css

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2081,4 +2081,43 @@ kbd {
20812081
background: #E7E7E7;
20822082
}
20832083

2084-
#plot-tsne-btn { width: 125px; }
2084+
#plot-tsne-btn { width: 125px; }
2085+
2086+
#planexp-toc {
2087+
padding: 8px;
2088+
background-color: white;
2089+
border: 4px solid #E7E7E7;
2090+
width: 12%;
2091+
min-width: 150px;
2092+
min-height: 400px;
2093+
z-index: 2;
2094+
}
2095+
2096+
#planexp-toc.affix-top {
2097+
width: 100%;
2098+
}
2099+
2100+
#planexp-toc-container {
2101+
z-index: 2;
2102+
width: 12%;
2103+
padding:0px;
2104+
margin-top: calc(9% + 245px);
2105+
}
2106+
2107+
#logo-container .col-sm-8 {
2108+
height: 195px;
2109+
}
2110+
2111+
#logo-container .col-sm-4 {
2112+
height: 195px;
2113+
}
2114+
2115+
2116+
#planexp-summary-toc { display: none; }
2117+
#planexp-dge-table-container-toc { display: none; }
2118+
#planexp-gene-expression-toc { display: none; }
2119+
#planexp-tsne-toc { display: none; }
2120+
2121+
.planexp-toc-link {
2122+
width: 100% !important;
2123+
}

‎NetExplorer/static/js/planexp.js

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -315,10 +315,15 @@ var PlanExp = (function() {
315315
fillConditions(expName, $("select.condition-select"));
316316
fillCtypes(expName, $("select.ctype-select"));
317317

318-
// Hide on change
318+
// Hide and show on change
319+
$("#planexp-summary-toc").show();
320+
$('#planexp-summary-toc').css('display', 'inline-block');
319321
$("#planexp-dge-table-container").hide();
322+
$("#planexp-dge-table-container-toc").hide();
320323
$("#planexp-gene-expression").hide();
324+
$("#planexp-gene-expression-toc").hide();
321325
$("#planexp-tsne").hide();
326+
$("#planexp-tsne-toc").hide();
322327
});
323328

324329

@@ -345,8 +350,14 @@ var PlanExp = (function() {
345350
// Show the necessary cards
346351
$("#planexp-dge-table-container").show(250);
347352
$("#planexp-gene-expression").show(250);
353+
$("#planexp-dge-table-container-toc").show(250);
354+
$('#planexp-dge-table-container-toc').css('display', 'inline-block');
355+
$("#planexp-gene-expression-toc").show(250);
356+
$('#planexp-gene-expression-toc').css('display', 'inline-block');
348357
if (currentExpType == expType['Single-Cell']) {
349358
$("#planexp-tsne").show(250);
359+
$("#planexp-tsne-toc").show(250);
360+
$('#planexp-tsne-toc').css('display', 'inline-block');
350361
}
351362
});
352363

@@ -418,6 +429,13 @@ var PlanExp = (function() {
418429
});
419430

420431

432+
// SCROLL BEHAVIOUR
433+
$(".planexp-toc-link").on("click", function(event){
434+
event.preventDefault();
435+
console.log($(this).attr("href"));
436+
$.scrollTo($(this).attr("href"), 500);
437+
438+
});
421439

422440

423441
})();

‎NetExplorer/templates/NetExplorer/base.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,11 @@
1717
</head>
1818

1919
<body>
20+
21+
{% block toc %}
22+
{% endblock toc %}
2023
<div id="page-container">
24+
2125
<div id="content">
2226
<div id="logo-container">
2327
<div class="row row-eq-height">
@@ -63,6 +67,7 @@
6367
</div>
6468
</nav>
6569

70+
6671

6772
<div id="body-wrapper">
6873
{% block content %}

‎NetExplorer/templates/NetExplorer/planexp.html

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,19 @@
55
{% block title %}- PlanExp{% endblock title %}
66

77

8+
{% block toc %}
9+
<nav id="planexp-toc-container" class="col-sm-2">
10+
<ul id="planexp-toc" class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="420">
11+
<li><a class="planexp-toc-link" id="select-experiment-div-toc" href="#select-experiment-div">Select Experiment</a></li>
12+
<li><a class="planexp-toc-link" id="planexp-summary-toc" href="#planexp-summary">Summary</a></li>
13+
<li><a class="planexp-toc-link" id="planexp-dge-table-container-toc" href="#planexp-dge-table-container">DGE table</a></li>
14+
<li><a class="planexp-toc-link" id="planexp-gene-expression-toc" href="#planexp-gene-expression">Gene Expression Plot</a></li>
15+
<li><a class="planexp-toc-link" id="planexp-tsne-toc" href="#planexp-tsne">t-SNE Plot</a></li>
16+
<hr>
17+
<li id="back_home"><a href="{% url index_view %}" ><span class="glyphicon glyphicon-triangle-left"></span>Go back Home</a></li>
18+
</ul>
19+
</nav>
20+
{% endblock toc %}
821

922
{% block content %}
1023
<!-- HIDDEN CARD OVERLAY -->
@@ -23,6 +36,8 @@
2336
</div>
2437

2538

39+
40+
2641
<div class="panel panel-planexp">
2742
<div class="panel-heading">
2843
<div class="row row-eq-height">
@@ -36,7 +51,7 @@ <h1>PlanExp</h1>
3651
</div>
3752
<div class="panel-body">
3853
<!-- Select experiment card -->
39-
<div class="planexp-card">
54+
<div id="select-experiment-div" class="planexp-card">
4055
<div class="planexp-h1">Select Experiment and Database:<hr class="planexp-rule"></div>
4156
<form class= "form-inline" method="GET" action="#">
4257
{% csrf_token %}
@@ -180,6 +195,7 @@ <h4>Color By:</h4>
180195

181196
{% block scripts %}
182197
<script src="https://cdn.plot.ly/plotly-1.32.0.min.js"></script>
198+
<script src="{% static 'js/scrollTo.js' %}"></script>
183199
<script src="{% static 'js/planexp.js' %}"></script>
184200
{% endblock scripts%}
185201

‎NetExplorer/views/get_card.py

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ def get_card(request, symbol=None, database=None):
77
if request.method == 'GET' and request.is_ajax():
88
symbol = request.GET['target']
99
database = request.GET['targetDB']
10-
print("AJAX")
1110
try:
1211
card_node = query_node(symbol, database)
1312
if database != "Human":

0 commit comments

Comments
 (0)