/
case_detail.html
164 lines (151 loc) · 7.11 KB
/
case_detail.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
{% extends 'projectroles/project_base.html' %}
{% load projectroles_common_tags %}
{% load rules %}
{% load rules %}
{% load humanize %}
{% load static %}
{% block navi_sub_project_extend %}
<li class="breadcrumb-item"><a href="{% url "variants:case-list" project=project.sodar_uuid %}">Cases</a></li>
<li class="breadcrumb-item active">{{ object.name }}</li>
{% endblock %}
{% block projectroles %}
{% get_app_setting 'variants' 'disable_pedigree_sex_check' project=project as disable_pedigree_sex_check %}
{% get_app_setting 'userprofile' 'enable_project_uuid_copy' user=request.user as enable_uuid_copy %}
<div class="row sodar-pr-content-title pb-2">
{# Project menu dropdown, only visible if browser width < X and sidebar is hidden #}
{% include 'projectroles/_project_menu_btn.html' %}
<h2 class="sodar-pr-content-title">
Case
<small class="text-muted">{{ object.name }}</small>
</h2>
<a role="submit" class="btn btn-link mr-2 sodar-pr-btn-title sodar-pr-btn-copy-uuid sodar-copy-btn"
id="sodar-pr-btn-copy-uuid"
data-clipboard-text="{{ object.sodar_uuid }}"
title="Copy UUID to clipboard" data-toggle="tooltip" data-placement="top">
<i class="fa fa-clipboard text-muted" aria-hidden="true"></i>
</a>
{% include "variants/_case_detail_buttons.html" %}
</div>
<div class="container-fluid sodar-page-container pt-3">
<div class="alert alert-secondary small p-2">
<i class="fa fa-info-circle"></i>
This is the case detail display.
<strong>Use the <span class="badge badge-primary"><i class="fa fa-filter"></i> Filter Variants</span> button on the top right to get start with the variant analysis.</strong>
Below, you can inspect the case meta data in overview, perform quality control, see your variant annotations, and list the export jobs.
</div>
<ul class="nav nav-tabs" id="case-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="overview-tab" data-toggle="tab" href="#overview" role="tab" aria-controls="overview" aria-selected="true">
<i class="fa fa-user"></i>
Overview
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="qc-tab" data-toggle="tab" href="#qc" role="tab" aria-controls="qc" aria-selected="false">
<i class="fa fa-bar-chart"></i>
Quality Control
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="annotation-tab" data-toggle="tab" href="#annotation" role="tab" aria-controls="annotation" aria-selected="false">
<i class="fa fa-comment-o"></i>
{% with annotation_count=object.get_annotation_count|default:0 %}
Variant Annotation <span class="badge badge-pill {% if annotation_count == 0 %}badge-secondary{% else %}badge-primary{% endif %}">{{ annotation_count }}</span>
{% endwith %}
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="bg-jobs-tab" data-toggle="tab" href="#bg-jobs" role="tab" aria-controls="bg-jobs" aria-selected="false">
<i class="fa fa-tasks"></i>
Export Jobs
</a>
</li>
</ul>
<div class="tab-content" id="case-tab-content">
<div class="border border-top-0 tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
<div class="row pt-3">
<div class="col-6">
{% include "variants/case/detail_overview.html" with disable_pedigree_sex_check=disable_pedigree_sex_check %}
{% include "variants/case/detail_pedigree.html" with disable_pedigree_sex_check=disable_pedigree_sex_check %}
{% include "variants/case/detail_release_info.html" %}
</div>
<div class="col-6">
{% include "variants/case/detail_case_terms.html" %}
{% include "variants/case/detail_case_comments.html" %}
{% include "variants/case/overview_var_flags_comments.html" %}
{% include "variants/case/overview_qc_bam.html" %}
{% include "variants/case/overview_qc_vars.html" %}
</div>
</div>
</div>
<div class="border border-top-0 tab-pane fade" id="qc" role="tabpanel" aria-labelledby="qc-tab">
<div class="row pt-3">
<div class="col">
{% include "variants/case/detail_qc_plots.html" %}
</div>
</div>
<div class="row">
<div class="col">
{% include "variants/case/detail_qc_bam.html" %}
</div>
</div>
<div class="row">
<div class="col">
{% include "variants/case/detail_qc.html" %}
</div>
</div>
</div>
<div class="border border-top-0 tab-pane fade" id="annotation" role="tabpanel" aria-labelledby="annotation-tab">
<div class="row pt-3">
<div class="col">
{% include "variants/case/detail_annotation.html" %}
</div>
</div>
</div>
<div class="border border-top-0 tab-pane fade" id="bg-jobs" role="tabpanel" aria-labelledby="bg-jobs-tab">
<div class="row pt-3">
<div class="col">
{% include "variants/case/detail_bg_jobs.html" %}
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// Load data after the page has loaded
$(function() {
axios.get("/variants/{{ object.project.sodar_uuid }}/case/api-qc/{{ object.sodar_uuid }}/")
.then(function (response) {
// Render plots after data has been loaded
plotlyRelatedness(response, 'plot-relatedness')
plotlySexChrxHetHom(response, 'plot-sex-chrx-het-hom')
plotlyVarDps(response, 'plot-var-dps')
plotlyVariantTypes(response, 'plot-var-types')
plotlyVariantEffects(response, 'plot-var-effects')
plotlyIndelSizes(response, 'plot-indel-sizes')
setTimeout(function() { $(window).trigger('resize') }, 2000);
})
})
</script>
{% endblock %}
{% block javascript %}
{{ block.super }}
<script type="text/javascript" src="{% static 'js/vendor/plotly-1.54.5.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/vendor/axios-0.18.0.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/vendor/palette-1.1.0.js' %}"></script>
<script type="text/javascript" src="{% static 'js/qc_plots.js' %}"></script>
<script type="text/javascript" src="{% static 'js/helpers.js' %}"></script>
<script type="text/javascript" src="{% static 'js/variant_comments.js' %}"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#comment-button-submit").on("click", commentSubmit);
$(".comment-button-delete").on("click", commentDeleteToggle);
$(".comment-button-delete-cancel").on("click", commentDeleteToggle);
$(".comment-button-delete-submit").on("click", commentDeleteSubmit);
$(".comment-button-edit").on("click", commentEditToggle);
$(".comment-button-edit-cancel").on("click", commentEditToggle);
$(".comment-button-edit-submit").on("click", commentEditSubmit);
updateCaseCommentsCount();
});
</script>
{% endblock %}