diff options
Diffstat (limited to 'uploader/templates')
73 files changed, 3226 insertions, 1384 deletions
diff --git a/uploader/templates/background-jobs/base.html b/uploader/templates/background-jobs/base.html new file mode 100644 index 0000000..7201207 --- /dev/null +++ b/uploader/templates/background-jobs/base.html @@ -0,0 +1,10 @@ +{%extends "base.html"%} + +{%block breadcrumbs%} +{{super()}} +<li class="breadcrumb-item"> + <a href="{{url_for('background-jobs.list_jobs')}}"> + background jobs + </a> +</li> +{%endblock%} diff --git a/uploader/templates/background-jobs/delete-job.html b/uploader/templates/background-jobs/delete-job.html new file mode 100644 index 0000000..242c775 --- /dev/null +++ b/uploader/templates/background-jobs/delete-job.html @@ -0,0 +1,61 @@ +{%extends "background-jobs/base.html"%} +{%from "flash_messages.html" import flash_all_messages%} +{%from "background-jobs/macro-display-job-details.html" import display_job_details%} + +{%block title%}Background Jobs{%endblock%} + +{%block pagetitle%}Background Jobs{%endblock%} + +{%block breadcrumbs%} +{{super()}} +<li class="breadcrumb-item"> + <a href="{{url_for('background-jobs.job_summary', job_id=job.job_id)}}"> + summary + </a> +</li> +{%endblock%} + +{%block contents%} +{{flash_all_messages()}} + +<div class="row"> + <h2 class="heading">background jobs: delete?</h2> + + <p class="text-danger">Are you sure you want to delete the job below?</p> + + {{display_job_details(job, display_datetime)}} +</div> + +<div class="row"> + <form id="frm-delete-job" + method="POST" + action="{{url_for('background-jobs.delete_single', job_id=job.job_id)}}"> + <div class="row"> + <div class="col"> + <input type="submit" + class="btn btn-info" + value="cancel" + name="btn-confirm-delete" /> + </div> + <div class="col"> + <input type="submit" + class="btn btn-danger" + value="delete" + name="btn-confirm-delete" /> + </div> + </div> + </form> +</div> +{%endblock%} + + +{%block sidebarcontents%} +<div class="row"> + <h6 class="subheading">What is this?</h6> +</div> +<div class="row"> + <p>Confirm whether or not you want to delete job + <strong>{{job.job_id}}</strong>.</p> +</div> +{{super()}} +{%endblock%} diff --git a/uploader/templates/background-jobs/job-status.html b/uploader/templates/background-jobs/job-status.html new file mode 100644 index 0000000..50cf6e5 --- /dev/null +++ b/uploader/templates/background-jobs/job-status.html @@ -0,0 +1,41 @@ +{%extends "background-jobs/base.html"%} +{%from "background-jobs/macro-display-job-details.html" import display_job_details%} + +{%from "flash_messages.html" import flash_all_messages%} + +{%block extrameta%} +<meta http-equiv="refresh" content="5" /> +{%endblock%} + +{%block title%}Background Jobs{%endblock%} + +{%block pagetitle%}Background Jobs{%endblock%} + +{%block contents%} +{{flash_all_messages()}} + +<div class="row"> + <h2 class="heading">job status</h2> + + {{display_job_details(job, display_datetime)}} +</div> + +<div class="row"> + <div class="col"> + <a href="{{url_for('background-jobs.stop_job', job_id=job.job_id)}}" + title="Stop/Kill this job." + class="btn btn-danger">stop job</a> + </div> +</div> + +<div class="row"> + <h3 class="subheading">STDOUT</h3> + <pre>{{job["stdout"]}}</pre> +</div> + +<div class="row"> + <h3 class="subheading">STDERR</h3> + <pre>{{job["stderr"]}}</pre> +</div> + +{%endblock%} diff --git a/uploader/templates/background-jobs/job-summary.html b/uploader/templates/background-jobs/job-summary.html new file mode 100644 index 0000000..c2c2d6b --- /dev/null +++ b/uploader/templates/background-jobs/job-summary.html @@ -0,0 +1,71 @@ +{%extends "background-jobs/base.html"%} +{%from "flash_messages.html" import flash_all_messages%} +{%from "background-jobs/macro-display-job-details.html" import display_job_details%} + +{%block title%}Background Jobs{%endblock%} + +{%block pagetitle%}Background Jobs{%endblock%} + +{%block breadcrumbs%} +{{super()}} +<li class="breadcrumb-item"> + <a href="{{url_for('background-jobs.job_summary', job_id=job.job_id)}}"> + summary + </a> +</li> +{%endblock%} + +{%block contents%} +{{flash_all_messages()}} + +<div class="row"> + <h2 class="heading">background jobs: summary</h2> + + {{display_job_details(job, display_datetime)}} +</div> + +<div class="row"> + {%if view_under_construction%} + <div class="col"> + <a href="#" + class="btn btn-info not-implemented" + title="Update the expiry date and time for this job.">update expiry</a> + </div> + + {%if job.metadata.status in ("stopped",)%} + <div class="col"> + <a href="#" + class="btn btn-warning not-implemented" + title="Create a new copy of this job, and run the copy.">Run Copy</a> + </div> + {%endif%} + {%endif%} + + <div class="col"> + <a href="{{url_for('background-jobs.delete_single', job_id=job.job_id)}}" + class="btn btn-danger" + title="Delete this job.">delete</a> + </div> +</div> + +<div class="row"> + <h3 class="subheading">Script Errors and Logging</h3> + <pre>{{job["stderr"]}}</pre> +</div> + +<div class="row"> + <h3 class="subheading">Script Output</h3> + <pre>{{job["stdout"]}}</pre> +</div> +{%endblock%} + + +{%block sidebarcontents%} +<div class="row"> + <h6 class="subheading">What is this?</h6> +</div> +<div class="row"> + <p>This page shows the results of running job '{{job.job_id}}'.</p> +</div> +{{super()}} +{%endblock%} diff --git a/uploader/templates/background-jobs/list-jobs.html b/uploader/templates/background-jobs/list-jobs.html new file mode 100644 index 0000000..c16b850 --- /dev/null +++ b/uploader/templates/background-jobs/list-jobs.html @@ -0,0 +1,79 @@ +{%extends "background-jobs/base.html"%} +{%from "flash_messages.html" import flash_all_messages%} + +{%block title%}Background Jobs{%endblock%} + +{%block pagetitle%}Background Jobs{%endblock%} + +{%block contents%} +{{flash_all_messages()}} + +<div class="row"><h2 class="heading">Background Jobs</h2></div> + +<div class="row"> + <div class="table-responsive"> + <table class="table"> + <thead> + <tr class="table-primary"> + <th>Type</th> + <th>Created</th> + <th title="Date and time past which the job's details will be deleted from the system."> + Expires</th> + <th>Status</th> + <th>Actions</th> + </tr> + </thead> + + <tbody> + {%for job in jobs%} + <tr> + <td>{{job.metadata["job-type"]}}</td> + <td>{{display_datetime(job.created)}}</td> + <td title="Date and time past which the job's details will be deleted from the system."> + {{display_datetime(job.expires)}} + </td> + <td {%if job.metadata.status == "completed"%} + class="fw-bold text-capitalize text-success" + {%elif job.metadata.status == "error"%} + class="fw-bold text-capitalize text-danger" + {%elif job.metadata.status == "stopped"%} + class="fw-bold text-capitalize text-warning" + {%else%} + class="fw-bold text-capitalize text-info" + {%endif%}> + <div> + {{job.metadata.status}} + </div> + </td> + <td> + <a href="{{url_for('background-jobs.job_summary', job_id=job.job_id)}}" + class="btn btn-info" + title="View more detailed information about this job."> + view summary</a> + </td> + </tr> + {%else%} + <tr> + <td colspan="5"> + You do not have any jobs you have run in the background.</td> + </tr> + {%endfor%} + </tbody> + </table> + </div> +</div> +{%endblock%} + + +{%block sidebarcontents%} +<div class="row"> + <h6 class="subheading">What is this?</h6> +</div> +<div class="row"> + <p>The table lists the jobs that are running in the background, that you + started.</p> + <p>You can use the tools provided on this page to manage the jobs, and to view + each job's details.</p> +</div> +{{super()}} +{%endblock%} diff --git a/uploader/templates/background-jobs/macro-display-job-details.html b/uploader/templates/background-jobs/macro-display-job-details.html new file mode 100644 index 0000000..82e33c0 --- /dev/null +++ b/uploader/templates/background-jobs/macro-display-job-details.html @@ -0,0 +1,29 @@ +{%macro display_job_details(job, display_datetime)%} +<table class="table"> + <thead> + </thead> + + <tbody> + <tr> + <th class="table-primary">Job ID</th> + <td>{{job.job_id}}</td> + </tr> + <tr> + <th class="table-primary">Type</th> + <td>{{job.metadata["job-type"]}}</td> + </tr> + <tr> + <th class="table-primary">Created</th> + <td>{{display_datetime(job.created)}}</td> + </tr> + <tr> + <th class="table-primary">Expires</th> + <td>{{display_datetime(job.expires)}}</td> + </tr> + <tr> + <th class="table-primary">Status</th> + <td>{{job.metadata.status}}</td> + </tr> + </tbody> +</table> +{%endmacro%} diff --git a/uploader/templates/background-jobs/stop-job.html b/uploader/templates/background-jobs/stop-job.html new file mode 100644 index 0000000..fc190ac --- /dev/null +++ b/uploader/templates/background-jobs/stop-job.html @@ -0,0 +1,61 @@ +{%extends "background-jobs/base.html"%} +{%from "flash_messages.html" import flash_all_messages%} +{%from "background-jobs/macro-display-job-details.html" import display_job_details%} + +{%block title%}Background Jobs{%endblock%} + +{%block pagetitle%}Background Jobs{%endblock%} + +{%block breadcrumbs%} +{{super()}} +<li class="breadcrumb-item"> + <a href="{{url_for('background-jobs.job_summary', job_id=job.job_id)}}"> + summary + </a> +</li> +{%endblock%} + +{%block contents%} +{{flash_all_messages()}} + +<div class="row"> + <h2 class="heading">background jobs: stop?</h2> + + <p class="text-danger">Are you sure you want to stop the job below?</p> + + {{display_job_details(job, display_datetime)}} +</div> + +<div class="row"> + <form id="frm-stop-job" + method="POST" + action="{{url_for('background-jobs.stop_job', job_id=job.job_id)}}"> + <div class="row"> + <div class="col"> + <input type="submit" + class="btn btn-info" + value="cancel" + name="btn-confirm-stop" /> + </div> + <div class="col"> + <input type="submit" + class="btn btn-danger" + value="stop" + name="btn-confirm-stop" /> + </div> + </div> + </form> +</div> +{%endblock%} + + +{%block sidebarcontents%} +<div class="row"> + <h6 class="subheading">What is this?</h6> +</div> +<div class="row"> + <p>Confirm whether or not you want to stop job + <strong>{{job.job_id}}</strong>.</p> +</div> +{{super()}} +{%endblock%} diff --git a/uploader/templates/base.html b/uploader/templates/base.html index 3a8ef16..ae4ecef 100644 --- a/uploader/templates/base.html +++ b/uploader/templates/base.html @@ -8,126 +8,114 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0" /> {%block extrameta%}{%endblock%} - <title>GN Uploader: {%block title%}{%endblock%}</title> + <title>Data Upload and Quality Control: {%block title%}{%endblock%}</title> <link rel="stylesheet" type="text/css" href="{{url_for('base.bootstrap', filename='css/bootstrap.min.css')}}" /> <link rel="stylesheet" type="text/css" - href="{{url_for('base.bootstrap', - filename='css/bootstrap-theme.min.css')}}" /> - <link rel="stylesheet" type="text/css" href="/static/css/styles.css" /> + href="{{url_for('base.datatables', + filename='css/dataTables.bootstrap5.min.css')}}" /> + <link rel="stylesheet" type="text/css" href="/static/css/layout-common.css" /> + <link rel="stylesheet" type="text/css" href="/static/css/layout-large.css" /> + <link rel="stylesheet" type="text/css" href="/static/css/layout-medium.css" /> + <link rel="stylesheet" type="text/css" href="/static/css/layout-small.css" /> + <link rel="stylesheet" type="text/css" href="/static/css/theme.css" /> {%block css%}{%endblock%} </head> <body> - <header id="header" class="container-fluid"> - <div class="row"> - <span class="header col-lg-9">GeneNetwork Data Quality Control and Upload</span> - <nav class="header-nav col-lg-3"> - <ul class="nav justify-content-end"> - <li> - {%if user_logged_in()%} - <a href="{{url_for('oauth2.logout')}}" - title="Log out of the system">{{user_email()}} — Log Out</a> - {%else%} - <a href="{{authserver_authorise_uri()}}" - title="Log in to the system">Log In</a> - {%endif%} - </li> - </ul> - </nav> + <header id="header"> + <span id="header-text">GeneNetwork</span> + <nav id="header-nav"> + <ul class="nav"> + {%if user_logged_in()%} + <li> + <a href="{{url_for('background-jobs.list_jobs')}}" + title="User's background jobs."> + <!-- https://icons.getbootstrap.com/icons/back/ --> + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-back" viewBox="0 0 16 16"> + <path d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"/> + </svg> + Background jobs + </a> + </li> + + <li> + <a href="{{url_for('oauth2.logout')}}" + title="Log out of the system"> + <!-- https://icons.getbootstrap.com/icons/file-person/ --> + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-person" viewBox="0 0 16 16"> + <path d="M12 1a1 1 0 0 1 1 1v10.755S12 11 8 11s-5 1.755-5 1.755V2a1 1 0 0 1 1-1zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/> + <path d="M8 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/> + </svg> + <span class="glyphicon glyphicon-user"></span> + Sign Out ({{user_email()}})</a> + </li> + {%else%} + <li> + <a href="{{authserver_authorise_uri()}}" + title="Log in to the system">Sign In</a> + {%endif%} + </li> + </ul> + </nav> </header> - <aside id="nav-sidebar" class="container-fluid"> - <ul class="nav flex-column"> - <li {%if activemenu=="home"%}class="activemenu"{%endif%}> - <a href="/" >Home</a></li> - <li {%if activemenu=="species"%}class="activemenu"{%endif%}> - <a href="{{url_for('species.list_species')}}" - title="View and manage species information.">Species</a></li> - <li {%if activemenu=="platforms"%}class="activemenu"{%endif%}> - <a href="{{url_for('species.platforms.index')}}" - title="View and manage species platforms.">Sequencing Platforms</a></li> - <li {%if activemenu=="populations"%}class="activemenu"{%endif%}> - <a href="{{url_for('species.populations.index')}}" - title="View and manage species populations.">Populations</a></li> - <li {%if activemenu=="samples"%}class="activemenu"{%endif%}> - <a href="{{url_for('species.populations.samples.index')}}" - title="Upload population samples.">Samples</a></li> - <li {%if activemenu=="genotypes"%}class="activemenu"{%endif%}> - <a href="{{url_for('species.populations.genotypes.index')}}" - title="Upload Genotype data.">Genotype Data</a></li> - <!-- - TODO: Maybe include menus here for managing studies and dataset or - maybe have the studies/datasets managed under their respective - sections, e.g. "Publish*" studies/datasets under the "Phenotypes" - section, "ProbeSet*" studies/datasets under the "Expression Data" - sections, etc. - --> - <li {%if activemenu=="phenotypes"%}class="activemenu"{%endif%}> - <a href="{{url_for('species.populations.phenotypes.index')}}" - title="Upload phenotype data.">Phenotype Data</a></li> - <li {%if activemenu=="expression-data"%}class="activemenu"{%endif%}> - <a href="{{url_for('species.populations.expression-data.index')}}" - title="Upload expression data." - class="not-implemented">Expression Data</a></li> - <li {%if activemenu=="individuals"%}class="activemenu"{%endif%}> - <a href="#" - class="not-implemented" - title="Upload individual data.">Individual Data</a></li> - <li {%if activemenu=="rna-seq"%}class="activemenu"{%endif%}> - <a href="#" - class="not-implemented" - title="Upload RNA-Seq data.">RNA-Seq Data</a></li> - <li {%if activemenu=="async-jobs"%}class="activemenu"{%endif%}> - <a href="#" - class="not-implemented" - title="View and manage the backgroud jobs you have running"> - Background Jobs</a></li> - </ul> - </aside> - - <main id="main" class="main container-fluid"> - - <div class="pagetitle row"> - <h1>GN Uploader: {%block pagetitle%}{%endblock%}</h1> - <nav> - <ol class="breadcrumb"> - <li {%if activelink is not defined or activelink=="home"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> - <a href="{{url_for('base.index')}}">Home</a> - </li> - {%block lvl1_breadcrumbs%}{%endblock%} - </ol> - </nav> - </div> - - <div class="row"> - <div class="container-fluid"> - <div class="col-md-8 main-content"> - {%block contents%}{%endblock%} - </div> - <div class="sidebar-content col-md-4"> - {%block sidebarcontents%}{%endblock%} - </div> + + <main id="main" class="main"> + <nav id="breadcrumbs" aria-label="breadcrumb"> + <ol class="breadcrumb"> + {%block breadcrumbs%} + <li class="breadcrumb-item"> + <a href="{{url_for('base.index')}}">Home</a></li> + {%endblock%} + </ol> + </nav> + + <div id="main-content"> + {%block contents%}{%endblock%} + </div> + + <div id="sidebar-content"> + {%block sidebarcontents%}{%endblock%} </div> - </div> </main> + + <script type="text/javascript" src="/static/js/debug.js"></script> + <!-- + Core dependencies + --> <script src="{{url_for('base.jquery', filename='jquery.min.js')}}"></script> <script src="{{url_for('base.bootstrap', filename='js/bootstrap.min.js')}}"></script> - <script type="text/javascript" src="/static/js/misc.js"></script> - {%block javascript%}{%endblock%} - </body> + <!-- + DataTables dependencies + --> + <script type="text/javascript" + src="{{url_for('base.datatables', + filename='js/dataTables.min.js')}}"></script> + <script type="text/javascript" + src="{{url_for('base.datatables_extensions', + filename='scroller/js/dataTables.scroller.min.js')}}"></script> + <script type="text/javascript" + src="{{url_for('base.datatables_extensions', + filename='buttons/js/dataTables.buttons.min.js')}}"></script> + <script type="text/javascript" + src="{{url_for('base.datatables_extensions', + filename='select/js/dataTables.select.min.js')}}"></script> + <!-- + local dependencies + --> + <script type="text/javascript" src="/static/js/utils.js"></script> + <script type="text/javascript" src="/static/js/datatables.js"></script> + {%block javascript%}{%endblock%} + </body> </html> diff --git a/uploader/templates/cli-output.html b/uploader/templates/cli-output.html index 64b1a9a..9cff09d 100644 --- a/uploader/templates/cli-output.html +++ b/uploader/templates/cli-output.html @@ -1,7 +1,7 @@ {%macro cli_output(job, stream)%} <h4 class="subheading">{{stream | upper}} Output</h4> -<div class="cli-output" style="max-height: 10em; overflow: auto;"> +<div class="cli-output" style="overflow: auto;"> <pre>{{job.get(stream, "")}}</pre> </div> diff --git a/uploader/templates/flash_messages.html b/uploader/templates/flash_messages.html index b7af178..b42e64e 100644 --- a/uploader/templates/flash_messages.html +++ b/uploader/templates/flash_messages.html @@ -1,11 +1,11 @@ {%macro flash_all_messages()%} {%with messages = get_flashed_messages(with_categories=true)%} {%if messages:%} -<ul> +<div> {%for category, message in messages:%} - <li class="{{category}}">{{message}}</li> + <div class="alert {{category}}">{{message}}</div> {%endfor%} -</ul> +</div> {%endif%} {%endwith%} {%endmacro%} @@ -13,13 +13,13 @@ {%macro flash_messages(filter_class)%} {%with messages = get_flashed_messages(with_categories=true)%} {%if messages:%} -<ul> +<div> {%for category, message in messages:%} {%if filter_class in category%} - <li class="{{category}}">{{message}}</li> + <div class="alert {{category}}">{{message}}</div> {%endif%} {%endfor%} -</ul> +</div> {%endif%} {%endwith%} {%endmacro%} diff --git a/uploader/templates/genotypes/base.html b/uploader/templates/genotypes/base.html index 7d61312..8d1b951 100644 --- a/uploader/templates/genotypes/base.html +++ b/uploader/templates/genotypes/base.html @@ -1,23 +1,18 @@ {%extends "populations/base.html"%} +{%from "populations/macro-display-population-card.html" import display_sui_population_card%} -{%block lvl3_breadcrumbs%} -<li {%if activelink=="genotypes"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> - {%if population is mapping%} +{%block breadcrumbs%} +{{super()}} +<li class="breadcrumb-item"> <a href="{{url_for('species.populations.genotypes.list_genotypes', - species_id=species.SpeciesId, - population_id=population.Id)}}"> - {%if dataset is defined and dataset is mapping%} - {{dataset.Name}} - {%else%} - Genotypes - {%endif%}</a> - {%else%} - <a href="{{url_for('species.populations.genotypes.index')}}">Genotypes</a> - {%endif%} + species_id=species['SpeciesId'], + population_id=population['Id'])}}"> + genotype + </a> </li> -{%block lvl4_breadcrumbs%}{%endblock%} +{%endblock%} + + +{%block sidebarcontents%} +{{display_sui_population_card(species, population)}} {%endblock%} diff --git a/uploader/templates/genotypes/index.html b/uploader/templates/genotypes/index.html index e749f5a..b50ebc5 100644 --- a/uploader/templates/genotypes/index.html +++ b/uploader/templates/genotypes/index.html @@ -26,3 +26,7 @@ species)}} </div> {%endblock%} + +{%block javascript%} +<script type="text/javascript" src="/static/js/species.js"></script> +{%endblock%} diff --git a/uploader/templates/genotypes/list-genotypes.html b/uploader/templates/genotypes/list-genotypes.html index 0f074fd..a2b98c8 100644 --- a/uploader/templates/genotypes/list-genotypes.html +++ b/uploader/templates/genotypes/list-genotypes.html @@ -1,23 +1,10 @@ {%extends "genotypes/base.html"%} {%from "flash_messages.html" import flash_all_messages%} -{%from "populations/macro-display-population-card.html" import display_population_card%} {%block title%}Genotypes{%endblock%} {%block pagetitle%}Genotypes{%endblock%} -{%block lvl4_breadcrumbs%} -<li {%if activelink=="list-genotypes"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> - <a href="{{url_for('species.populations.genotypes.list_genotypes', - species_id=species.SpeciesId, - population_id=population.Id)}}">List genotypes</a> -</li> -{%endblock%} - {%block contents%} {{flash_all_messages()}} @@ -143,7 +130,3 @@ all the rest.</p> </div> {%endblock%} - -{%block sidebarcontents%} -{{display_population_card(species, population)}} -{%endblock%} diff --git a/uploader/templates/genotypes/list-markers.html b/uploader/templates/genotypes/list-markers.html index a705ae3..5f3dd6f 100644 --- a/uploader/templates/genotypes/list-markers.html +++ b/uploader/templates/genotypes/list-markers.html @@ -1,20 +1,18 @@ {%extends "genotypes/base.html"%} {%from "flash_messages.html" import flash_all_messages%} -{%from "species/macro-display-species-card.html" import display_species_card%} {%block title%}Genotypes: List Markers{%endblock%} {%block pagetitle%}Genotypes: List Markers{%endblock%} -{%block lvl4_breadcrumbs%} -<li {%if activelink=="list-markers"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> +{%block breadcrumbs%} +{{super()}} +<li class="breadcrumb-item"> <a href="{{url_for('species.populations.genotypes.list_markers', - species_id=species.SpeciesId, - population_id=population.Id)}}">List markers</a> + species_id=species['SpeciesId'], + population_id=population['Id'])}}"> + markers + </a> </li> {%endblock%} @@ -99,7 +97,3 @@ </div> {%endif%} {%endblock%} - -{%block sidebarcontents%} -{{display_species_card(species)}} -{%endblock%} diff --git a/uploader/templates/genotypes/select-population.html b/uploader/templates/genotypes/select-population.html index 7c81943..acdd063 100644 --- a/uploader/templates/genotypes/select-population.html +++ b/uploader/templates/genotypes/select-population.html @@ -12,20 +12,14 @@ {{flash_all_messages()}} <div class="row"> - <p> - You have indicated that you intend to upload the genotypes for species - '{{species.FullName}}'. We now just require the population for your - experiment/study, and you should be good to go. - </p> -</div> - -<div class="row"> - {{select_population_form(url_for("species.populations.genotypes.select_population", - species_id=species.SpeciesId), - populations)}} + {{select_population_form(url_for("species.populations.genotypes.select_population", species_id=species.SpeciesId), species, populations)}} </div> {%endblock%} {%block sidebarcontents%} {{display_species_card(species)}} {%endblock%} + +{%block javascript%} +<script type="text/javascript" src="/static/js/populations.js"></script> +{%endblock%} diff --git a/uploader/templates/genotypes/view-dataset.html b/uploader/templates/genotypes/view-dataset.html index e7ceb36..1c4eccf 100644 --- a/uploader/templates/genotypes/view-dataset.html +++ b/uploader/templates/genotypes/view-dataset.html @@ -1,21 +1,17 @@ {%extends "genotypes/base.html"%} {%from "flash_messages.html" import flash_all_messages%} -{%from "populations/macro-display-population-card.html" import display_population_card%} {%block title%}Genotypes: View Dataset{%endblock%} {%block pagetitle%}Genotypes: View Dataset{%endblock%} -{%block lvl4_breadcrumbs%} -<li {%if activelink=="view-dataset"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> +{%block breadcrumbs%} +{{super()}} +<li class="breadcrumb-item"> <a href="{{url_for('species.populations.genotypes.view_dataset', species_id=species.SpeciesId, population_id=population.Id, - dataset_id=dataset.Id)}}">view dataset</a> + dataset_id=dataset.Id)}}">dataset</a> </li> {%endblock%} @@ -55,7 +51,3 @@ </div> {%endblock%} - -{%block sidebarcontents%} -{{display_population_card(species, population)}} -{%endblock%} diff --git a/uploader/templates/index.html b/uploader/templates/index.html index d6f57eb..e426732 100644 --- a/uploader/templates/index.html +++ b/uploader/templates/index.html @@ -1,99 +1,162 @@ {%extends "base.html"%} {%from "flash_messages.html" import flash_all_messages%} +{%from "macro-forms.html" import add_http_feature_flags%} {%block title%}Home{%endblock%} {%block pagetitle%}Home{%endblock%} +{%block extra_breadcrumbs%}{%endblock%} + {%block contents%} +{%macro add_form_buttons()%} +<div class="row form-buttons"> + <div class="col"> + <input type="submit" + class="btn btn-primary" + value="use selected species" /> + </div> + <div class="col"> + <a href="{{url_for('species.create_species', return_to='base.index')}}" + class="btn btn-outline-primary" + title="Create a new species.">Create a new Species</a> + </div> +</div> +{%endmacro%} + +<div class="row">{{flash_all_messages()}}</div> + +{%if user_logged_in()%} + +<div class="row"> + <ul class="nav nav-tabs" id="index-actions"> + <li class="nav-item presentation"> + <button class="nav-link active" + id="upload-data-tab" + data-bs-toggle="tab" + data-bs-target="#upload-data-content" + type="button" + role="tab" + aria-controls="upload-data-content" + aria-selected="false">Upload Data</button></li> + <li class="nav-item presentation"> + <button class="nav-link" + id="publications-tab" + data-bs-toggle="tab" + data-bs-target="#publications-content" + type="button" + role="tab" + aria-controls="publications-content" + aria-selected="true">Publications</button></li> + </ul> +</div> + <div class="row"> - {{flash_all_messages()}} - <div class="explainer"> - <p>Welcome to the <strong>GeneNetwork Data Quality Control and Upload System</strong>. This system is provided to help in uploading your data onto GeneNetwork where you can do analysis on it.</p> - - <p>The sections below provide an overview of what features the menu items on - the left provide to you. Please peruse the information to get a good - big-picture understanding of what the system provides you and how to get - the most out of it.</p> - - {%block extrapageinfo%}{%endblock%} - - <h2>Species</h2> - - <p>The GeneNetwork service provides datasets and tools for doing genetic - studies — from - <a href="{{gn2server_intro}}" - target="_blank" - title="GeneNetwork introduction — opens in a new tab."> - its introduction</a>: - - <blockquote class="blockquote"> - <p>GeneNetwork is a group of linked data sets and tools used to study - complex networks of genes, molecules, and higher order gene function - and phenotypes. …</p> - </blockquote> - </p> - - <p>With this in mind, it follows that the data in the system is centered - aroud a variety of species. The <strong>species section</strong> will - list the currently available species in the system, and give you the - ability to add new ones, if the one you want to work on does not currently - exist on GeneNetwork</p> - - <h2>Populations</h2> - - <p>Your studies will probably focus on a particular subset of the entire - species you are interested in – your population.</p> - <p>Populations are a way to organise the species data so as to link data to - specific know populations for a particular species, e.g. The BXD - population of mice (Mus musculus)</p> - <p>In older GeneNetwork documentation, you might run into the term - <em>InbredSet</em>. Should you run into it, it is a term that we've - deprecated that essentially just means the population.</p> - - <h2>Samples</h2> - - <p>These are the samples or individuals (sometimes cases) that were involved - in the experiment, and from whom the data was derived.</p> - - <h2>Genotype Data</h2> - - <p>This section will allow you to view and upload the genetic markers for - your species, and the genotype encodings used for your particular - population.</p> - <p>While, technically, genetic markers relate to the species in general, and - not to a particular population, the data (allele information) itself - relates to the particular population it was generated from – - specifically, to the actual individuals used in the experiment.</p> - <p>This is the reason why the genotype data information comes under the - population, and will check for the prior existence of the related - samples/individuals before attempting an upload of your data.</p> - - <h2>Expression Data</h2> - - <p class="text-danger"> - <span class="glyphicon glyphicon-exclamation-sign"></span> - <strong>TODO</strong>: Document this …</p> - - <h2>Phenotype Data</h2> - - <p class="text-danger"> - <span class="glyphicon glyphicon-exclamation-sign"></span> - <strong>TODO</strong>: Document this …</p> - - <h2>Individual Data</h2> - - <p class="text-danger"> - <span class="glyphicon glyphicon-exclamation-sign"></span> - <strong>TODO</strong>: Document this …</p> - - <h2>RNA-Seq Data</h2> - - <p class="text-danger"> - <span class="glyphicon glyphicon-exclamation-sign"></span> - <strong>TODO</strong>: Document this …</p> + <div class="tab-content" id="upload-data-tabs-content"> + <div class="tab-pane fade show active" + id="upload-data-content" + role="tabpanel" + aria-labelledby="upload-data-content-tab"> + <h2 class="heading">Species</h2> + + <p>Select the species you want to work with.</p> + + <form method="GET" action="{{url_for('base.index')}}" class="form-horizontal"> + {{add_http_feature_flags()}} + + {{add_form_buttons()}} + + {%if species | length != 0%} + <div style="margin-top:1em;"> + <table id="tbl-select-species" class="table compact stripe" + data-species-list='{{species | tojson}}'> + <thead> + <tr> + <th></th> + <th>Species Name</th> + </tr> + </thead> + + <tbody></tbody> + </table> + </div> + + {%else%} + + <label class="control-label" for="rdo-cant-find-species"> + <input id="rdo-cant-find-species" type="radio" name="species_id" + value="CREATE-SPECIES" /> + There are no species to select from. Create the first one.</label> + + <div class="col-sm-offset-10 col-sm-2"> + <input type="submit" + class="btn btn-primary col-sm-offset-1" + value="continue" /> + </div> + + {%endif%} + + {{add_form_buttons()}} + + </form> + </div> + + <div class="tab-pane fade" + id="publications-content" + role="tabpanel" + aria-labelledby="publications-content-tab"> + <p>View, edit and delete existing publications, and add new + publications by clicking on the button below.</p> + + <a href="{{url_for('publications.index')}}" + title="Manage publications." + class="btn btn-primary">manage publications</a> + </div> </div> </div> -{%endblock%} + {%else%} + + <div class="row"> + <p>The Genenetwork Uploader (<em>gn-uploader</em>) enables upload of new data + into the Genenetwork System. It provides Quality Control over data, and + guidance in case you data does not meet the standards for acceptance.</p> + <p> + <a href="{{authserver_authorise_uri()}}" + title="Sign in to the system" + class="btn btn-primary">Sign in</a> + to get started.</p> + </div> + {%endif%} + + {%endblock%} + + + + {%block sidebarcontents%} + {%if view_under_construction%} + <div class="row"> + <p>The data in Genenetwork is related to one species or another. Use the form + provided to select from existing species, or click on the + "Create a New Species" button if you cannot find the species you want to + work with.</p> + </div> + <div class="row"> + <form id="frm-quick-navigation"> + <legend>Quick Navigation</legend> + <div class="form-group"> + <label for="fqn-species-id">Species</label> + <select name="species_id"> + <option value="">Select species</option> + </select> + </div> + </form> + </div> + {%endif%} + {%endblock%} + + + {%block javascript%} + <script type="text/javascript" src="/static/js/species.js"></script> + {%endblock%} diff --git a/uploader/templates/jobs/job-error.html b/uploader/templates/jobs/job-error.html new file mode 100644 index 0000000..b3015fc --- /dev/null +++ b/uploader/templates/jobs/job-error.html @@ -0,0 +1,17 @@ +{%extends "base.html"%} + +{%from "flash_messages.html" import flash_all_messages%} + +{%block title%}Background Jobs: Error{%endblock%} + +{%block pagetitle%}Background Jobs: Error{%endblock%} + +{%block contents%} + +<h1>Background Jobs: Error</h1> +<p>Job <strong>{{job["job_id"]}}</strong> failed!</p> +<p>The error details are in the "STDERR" section below.</p> + +<h2>STDERR</h2> +<pre>{{job["stderr"]}}</pre> +{%endblock%} diff --git a/uploader/templates/jobs/job-not-found.html b/uploader/templates/jobs/job-not-found.html new file mode 100644 index 0000000..a71e66f --- /dev/null +++ b/uploader/templates/jobs/job-not-found.html @@ -0,0 +1,11 @@ +{%extends "base.html"%} + +{%from "flash_messages.html" import flash_all_messages%} + +{%block title%}Background Jobs{%endblock%} + +{%block pagetitle%}Background Jobs{%endblock%} + +{%block contents%} +<p>Could not find job with ID: {{job_id}}</p> +{%endblock%} diff --git a/uploader/templates/jobs/job-status.html b/uploader/templates/jobs/job-status.html new file mode 100644 index 0000000..83c02fd --- /dev/null +++ b/uploader/templates/jobs/job-status.html @@ -0,0 +1,24 @@ +{%extends "base.html"%} + +{%from "flash_messages.html" import flash_all_messages%} + +{%block extrameta%} +<meta http-equiv="refresh" content="5" /> +{%endblock%} + +{%block title%}Background Jobs{%endblock%} + +{%block pagetitle%}Background Jobs{%endblock%} + +{%block contents%} + +<p>Status: {{job["metadata"]["status"]}}</p> +<p>Job Type: {{job["metadata"]["job-type"]}}</p> + +<h2>STDOUT</h2> +<pre>{{job["stdout"]}}</pre> + +<h2>STDERR</h2> +<pre>{{job["stderr"]}}</pre> + +{%endblock%} diff --git a/uploader/templates/login.html b/uploader/templates/login.html deleted file mode 100644 index 1f71416..0000000 --- a/uploader/templates/login.html +++ /dev/null @@ -1,11 +0,0 @@ -{%extends "index.html"%} - -{%block title%}Data Upload{%endblock%} - -{%block pagetitle%}log in{%endblock%} - -{%block extrapageinfo%} -<p class="text-dark text-primary"> - You <strong>do need to be logged in</strong> to upload data onto this system. - Please do that by clicking the "Log In" button at the top of the page.</p> -{%endblock%} diff --git a/uploader/templates/macro-forms.html b/uploader/templates/macro-forms.html new file mode 100644 index 0000000..0ccab32 --- /dev/null +++ b/uploader/templates/macro-forms.html @@ -0,0 +1,9 @@ +{%macro add_http_feature_flags()%} +{%for flag in http_feature_flags():%} +{%if (request.args.get(flag) or request.form.get(flag) or ""):%} +<input type="hidden" + name="{{flag}}" + value="{{(request.args.get(flag) or request.form.get(flag))}}" /> +{%endif%} +{%endfor%} +{%endmacro%} diff --git a/uploader/templates/macro-step-indicator.html b/uploader/templates/macro-step-indicator.html new file mode 100644 index 0000000..ac0be77 --- /dev/null +++ b/uploader/templates/macro-step-indicator.html @@ -0,0 +1,15 @@ +{%macro step_indicator(step, width=100)%} +<svg width="{{width}}" height="{{width}}" xmlns="http://www.w3.org/2000/svg"> + <circle cx="{{0.5*width}}" + cy="{{0.5*width}}" + r="{{0.5*width}}" + fill="#E5E5FF" /> + <text x="{{0.5*width}}" + y="{{0.6*width}}" + font-size="{{0.2*width}}" + text-anchor="middle" + fill="#555555"> + Step {{step}} + </text> +</svg> +{%endmacro%} diff --git a/uploader/templates/phenotypes/add-phenotypes-base.html b/uploader/templates/phenotypes/add-phenotypes-base.html index 97b55f2..690c7e1 100644 --- a/uploader/templates/phenotypes/add-phenotypes-base.html +++ b/uploader/templates/phenotypes/add-phenotypes-base.html @@ -1,26 +1,13 @@ {%extends "phenotypes/base.html"%} {%from "flash_messages.html" import flash_all_messages%} {%from "macro-table-pagination.html" import table_pagination%} -{%from "phenotypes/macro-display-pheno-dataset-card.html" import display_pheno_dataset_card%} {%block title%}Phenotypes{%endblock%} {%block pagetitle%}Phenotypes{%endblock%} -{%block lvl4_breadcrumbs%} -<li {%if activelink=="add-phenotypes"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> - <a href="{{url_for('species.populations.phenotypes.add_phenotypes', - species_id=species.SpeciesId, - population_id=population.Id, - dataset_id=dataset.Id)}}">Add Phenotypes</a> -</li> -{%endblock%} - {%block contents%} +{{super()}} {{flash_all_messages()}} <div class="row"> @@ -42,110 +29,30 @@ {%block frm_add_phenotypes_elements%}{%endblock%} - <div class="checkbox"> - <label> - <input id="chk-published" type="checkbox" name="published?" /> - These phenotypes are published</label> - </div> - - <fieldset id="fldset-publication-info" class="hidden"> + <fieldset id="fldset-publication-info"> <legend>Publication Information</legend> - <div class="form-group"> - <label for="txt-pubmed-id" class="form-label">Pubmed ID</label> - <div class="input-group"> - <input id="txt-pubmed-id" name="pubmed-id" type="text" - class="form-control" /> - <span class="input-group-btn"> - <button id="btn-search-pubmed-id" class="btn btn-info">Search</button> - </span> - </div> - <span id="search-pubmed-id-error" - class="form-text text-muted text-danger hidden"> - </span><br /> - <span class="form-text text-muted"> - Enter your publication's PubMed ID above and click "Search" to search - for some (or all) of the publication details requested below. - </span> - </div> - - <div class="form-group"> - <label for="txt-publication-authors" class="form-label">Authors</label> - <input id="txt-publication-authors" name="publication-authors" - type="text" class="form-control" /> - <span class="form-text text-muted"> - Enter the authors in the following format …</span> - </div> - - <div class="form-group"> - <label for="txt-publication-title" class="form-label"> - Publication Title</label> - <input id="txt-publication-title" name="publication-title" type="text" - class="form-control" /> - <span class="form-text text-muted"> - Enter your publication's title.</span> - </div> - - <div class="form-group"> - <label for="txt-publication-abstract" class="form-label"> - Publication Abstract</label> - <textarea id="txt-publication-abstract" name="publication-abstract" - class="form-control" rows="10"></textarea> - <span class="form-text text-muted"> - Enter the abstract for your publication.</span> - </div> - - <div class="form-group"> - <label for="txt-publication-journal" class="form-label">Journal</label> - <input id="txt-publication-journal" name="journal" type="text" - class="form-control" /> - <span class="form-text text-muted"> - Enter the name of the journal where your work was published.</span> - </div> - - <div class="form-group"> - <label for="txt-publication-volume" class="form-label">Volume</label> - <input id="txt-publication-volume" name="publication-volume" type="text" - class="form-control" /> - <span class="form-text text-muted"> - Enter the volume in the following format …</span> - </div> - - <div class="form-group"> - <label for="txt-publication-pages" class="form-label">Pages</label> - <input id="txt-publication-pages" name="publication-pages" type="text" - class="form-control" /> - <span class="form-text text-muted"> - Enter the journal volume where your work was published.</span> - </div> - - <div class="form-group"> - <label for="select-publication-month" class="form-label"> - Publication Month</label> - <select id="select-publication-month" name="publication-month" - class="form-control"> - {%for month in monthnames%} - <option value="{{month | lower}}" - {%if current_month | lower == month | lower%} - selected="selected" - {%endif%}>{{month | capitalize}}</option> - {%endfor%} - </select> - <span class="form-text text-muted"> - Select the month when the work was published. - <span class="text-danger"> - This cannot be before, say 1600 and cannot be in the future!</span></span> - </div> - - <div class="form-group"> - <label for="txt-publication-year" class="form-label">Publication Year</label> - <input id="txt-publication-year" name="publication-year" type="text" - class="form-control" value="{{current_year}}" /> - <span class="form-text text-muted"> - Enter the year your work was published. - <span class="text-danger"> - This cannot be before, say 1600 and cannot be in the future!</span> - </span> - </div> + <input type="hidden" name="publication-id" id="txt-publication-id" /> + <span class="form-text text-muted"> + Select a publication for your data. <br /> + Can't find a publication you can use? Go ahead and + <a href="{{url_for( + 'publications.create_publication', + return_to='species.populations.phenotypes.add_phenotypes', + species_id=species.SpeciesId, + population_id=population.Id, + dataset_id=dataset.Id)}}">create a new publication</a>.</span> + <table id="tbl-select-publication" class="table compact stripe"> + <thead> + <tr> + <th>#</th> + <th>PubMed ID</th> + <th>Title</th> + <th>Authors</th> + </tr> + </thead> + + <tbody></tbody> + </table> </fieldset> <div class="form-group"> @@ -163,167 +70,84 @@ {%endblock%} -{%block javascript%} -<script type="text/javascript"> - var remove_class = (element, classvalue) => { - new_classes = (element.attr("class") || "").split(" ").map((val) => { - return val.trim(); - }).filter((val) => { - return ((val !== classvalue) && - (val !== "")) - }).join(" "); - - if(new_classes === "") { - element.removeAttr("class"); - } else { - element.attr("class", new_classes); - } - }; - - var add_class = (element, classvalue) => { - remove_class(element, classvalue); - element.attr("class", (element.attr("class") || "") + " " + classvalue); - }; - $("#chk-published").on("click", (event) => { - pub_details = $("#fldset-publication-info") - if(event.target.checked) { - // display the publication details - remove_class(pub_details, "hidden"); - } else { - // hide the publication details - add_class(pub_details, "hidden"); - } - }); - - var extract_details = (pubmed_id, details) => { - var months = { - "jan": "January", - "feb": "February", - "mar": "March", - "apr": "April", - "may": "May", - "jun": "June", - "jul": "July", - "aug": "August", - "sep": "September", - "oct": "October", - "nov": "November", - "dec": "December" - }; - var _date = details[pubmed_id].pubdate.split(" "); - return { - "authors": details[pubmed_id].authors.map((authobj) => { - return authobj.name; - }), - "title": details[pubmed_id].title, - "journal": details[pubmed_id].fulljournalname, - "volume": details[pubmed_id].volume, - "pages": details[pubmed_id].pages, - "month": _date.length > 1 ? months[_date[1].toLowerCase()] : "jan", - "year": _date[0], - }; - }; - var update_publication_details = (details) => { - Object.entries(details).forEach((entry) => {; - switch(entry[0]) { - case "authors": - $("#txt-publication-authors").val(entry[1].join(", ")); - break; - case "month": - $("#select-publication-month") - .children("option") - .each((index, child) => { - child.selected = child.value == entry[1].toLowerCase(); - }); - default: - $("#txt-publication-" + entry[0]).val(entry[1]); - break; - } +{%block javascript%} +<script type="text/javascript"> + $(function() { + var publicationsDataTable = buildDataTable( + "#tbl-select-publication", + [], + [ + {data: "index"}, + { + searchable: true, + data: (pub) => { + if(pub.PubMed_ID) { + return `<a href="https://pubmed.ncbi.nlm.nih.gov/` + + `${pub.PubMed_ID}/" target="_blank" ` + + `title="Link to publication on NCBI.">` + + `${pub.PubMed_ID}</a>`; + } + return ""; + } + }, + { + searchable: true, + data: (pub) => { + var title = "⸻"; + if(pub.Title) { + title = pub.Title + } + return `<a href="/publications/view/${pub.Id}" ` + + `target="_blank" ` + + `title="Link to view publication details">` + + `${title}</a>`; + } + }, + { + searchable: true, + data: (pub) => { + authors = pub.Authors.split(",").map( + (item) => {return item.trim();}); + if(authors.length > 1) { + return authors[0] + ", et. al."; + } + return authors[0]; + } + } + ], + { + serverSide: true, + ajax: { + url: "/publications/list", + dataSrc: "publications" + }, + select: "single", + paging: true, + scrollY: 700, + deferRender: true, + scroller: true, + scrollCollapse: true, + layout: { + topStart: "info", + topEnd: "search" + } + }); + publicationsDataTable.on("select", (event, datatable, type, indexes) => { + indexes.forEach((element, index, thearray) => { + let row = datatable.row(element).node(); + console.debug(datatable.row(element).data()); + $("#frm-add-phenotypes #txt-publication-id").val( + datatable.row(element).data().Id); + }); + }); + publicationsDataTable.on("deselect", (event, datatable, type, indexes) => { + indexes.forEach((element, index, thearray) => { + let row = datatable.row(element).node(); + $("#frm-add-phenotypes #txt-publication-id").val(null); + }); }); - }; - - var fetch_publication_abstract = (pubmed_id, pub_details) => { - $.ajax("https://eutils.ncbi.nlm.nih.gov/entrez/eutils/efetch.fcgi", - { - "method": "GET", - "data": { - "db": "pubmed", - "id": pubmed_id, - "rettype": "abstract", - "retmode": "xml" - }, - "success": (data, textStatus, jqXHR) => { - update_publication_details({ - ...pub_details, - ...{ - "abstract": Array.from(data - .getElementsByTagName( - "Abstract")[0] - .children) - .map((elt) => {return elt.textContent.trim();}) - .join("\r\n") - }}); - }, - "error": (jqXHR, textStatus, errorThrown) => {}, - "complete": (jqXHR, textStatus) => {}, - "dataType": "xml" - }); - }; - - var fetch_publication_details = (pubmed_id, complete_thunks) => { - error_display = $("#search-pubmed-id-error"); - error_display.text(""); - add_class(error_display, "hidden"); - $.ajax("https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi", - { - "method": "GET", - "data": {"db": "pubmed", "id": pubmed_id, "format": "json"}, - "success": (data, textStatus, jqXHR) => { - // process and update publication details - hasError = ( - Object.hasOwn(data, "error") || - Object.hasOwn(data.result[pubmed_id], "error")); - if(hasError) { - error_display.text( - "There was an error fetching a publication with " + - "the given PubMed ID! The error received " + - "was: '" + ( - data.error || - data.result[pubmed_id].error) + - "'. Please check ID you provided and try " + - "again."); - remove_class(error_display, "hidden"); - } else { - fetch_publication_abstract( - pubmed_id, - extract_details(pubmed_id, data.result)); - } - }, - "error": (jqXHR, textStatus, errorThrown) => {}, - "complete": () => { - complete_thunks.forEach((thunk) => {thunk()}); - }, - "dataType": "json" - }); - }; - - $("#btn-search-pubmed-id").on("click", (event) => { - event.preventDefault(); - var search_button = event.target; - var pubmed_id = $("#txt-pubmed-id").val().trim(); - remove_class($("#txt-pubmed-id").parent(), "has-error"); - if(pubmed_id == "") { - add_class($("#txt-pubmed-id").parent(), "has-error"); - return false; - } - - search_button.disabled = true; - // Fetch publication details - fetch_publication_details(pubmed_id, - [() => {search_button.disabled = false;}]); - return false; }); </script> diff --git a/uploader/templates/phenotypes/add-phenotypes-raw-files.html b/uploader/templates/phenotypes/add-phenotypes-raw-files.html index 8de67a0..a02fae7 100644 --- a/uploader/templates/phenotypes/add-phenotypes-raw-files.html +++ b/uploader/templates/phenotypes/add-phenotypes-raw-files.html @@ -1,7 +1,6 @@ {%extends "phenotypes/add-phenotypes-base.html"%} {%from "flash_messages.html" import flash_all_messages%} {%from "macro-table-pagination.html" import table_pagination%} -{%from "phenotypes/macro-display-pheno-dataset-card.html" import display_pheno_dataset_card%} {%from "phenotypes/macro-display-preview-table.html" import display_preview_table%} {%from "phenotypes/macro-display-resumable-elements.html" import display_resumable_elements%} @@ -9,19 +8,6 @@ {%block pagetitle%}Phenotypes{%endblock%} -{%block lvl4_breadcrumbs%} -<li {%if activelink=="add-phenotypes"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> - <a href="{{url_for('species.populations.phenotypes.add_phenotypes', - species_id=species.SpeciesId, - population_id=population.Id, - dataset_id=dataset.Id)}}">Add Phenotypes</a> -</li> -{%endblock%} - {%block frm_add_phenotypes_documentation%} <p>This page will allow you to upload all the separate files that make up your phenotypes. Here, you will have to upload each separate file individually. If @@ -105,111 +91,213 @@ </div> </fieldset> -<fieldset id="fldset-data-files"> +<fieldset id="fldset-files"> <legend>Data File(s)</legend> - <div class="form-group non-resumable-elements"> - <label for="finput-phenotype-descriptions" class="form-label"> - Phenotype Descriptions</label> - <input id="finput-phenotype-descriptions" - name="phenotype-descriptions" - class="form-control" - type="file" - data-preview-table="tbl-preview-pheno-desc" - required="required" /> - <span class="form-text text-muted"> - Provide a file that contains only the phenotype descriptions, - <a href="#docs-file-phenotype-description" - title="Documentation of the phenotype data file format."> - the documentation for the expected format of the file</a>.</span> - </div> - - {{display_resumable_elements( - "resumable-phenotype-descriptions", - "phenotype descriptions", - '<p>You can drop a CSV file that contains the phenotype descriptions here, - or you can click the "Browse" button (below and to the right) to select it - from your computer.</p> - <p>The CSV file must conform to some standards, as documented in the - <a href="#docs-file-phenotype-description" - title="Documentation of the phenotype data file format."> - "Phenotypes Descriptions" documentation</a> section below.</p>')}} - - - <div class="form-group non-resumable-elements"> - <label for="finput-phenotype-data" class="form-label">Phenotype Data</label> - <input id="finput-phenotype-data" - name="phenotype-data" - class="form-control" - type="file" - data-preview-table="tbl-preview-pheno-data" - required="required" /> - <span class="form-text text-muted"> - Provide a file that contains only the phenotype data. See - <a href="#docs-file-phenotype-data" - title="Documentation of the phenotype data file format."> - the documentation for the expected format of the file</a>.</span> - </div> - - {{display_resumable_elements( - "resumable-phenotype-data", - "phenotype data", - '<p>You can drop a CSV file that contains the phenotype data here, - or you can click the "Browse" button (below and to the right) to select it - from your computer.</p> - <p>The CSV file must conform to some standards, as documented in the - <a href="#docs-file-phenotype-data" - title="Documentation of the phenotype data file format."> - "Phenotypes Data" documentation</a> section below.</p>')}} - - {%if population.Family in families_with_se_and_n%} - <div class="form-group non-resumable-elements"> - <label for="finput-phenotype-se" class="form-label">Phenotype: Standard Errors</label> - <input id="finput-phenotype-se" - name="phenotype-se" - class="form-control" - type="file" - data-preview-table="tbl-preview-pheno-se" - required="required" /> - <span class="form-text text-muted"> - Provide a file that contains only the standard errors for the phenotypes, - computed from the data above.</span> - </div> - {{display_resumable_elements( - "resumable-phenotype-se", - "standard errors", - '<p>You can drop a CSV file that contains the computed standard-errors data - here, or you can click the "Browse" button (below and to the right) to - select it from your computer.</p> - <p>The CSV file must conform to some standards, as documented in the - <a href="#docs-file-phenotype-se" - title="Documentation of the phenotype data file format."> - "Phenotypes Data" documentation</a> section below.</p>')}} + <fieldset id="fldset-descriptions-file"> + <div class="form-group"> + <div class="form-check"> + <input id="chk-phenotype-descriptions-transposed" + name="phenotype-descriptions-transposed" + type="checkbox" + class="form-check-input" + style="border: solid #8EABF0" /> + <label for="chk-phenotype-descriptions-transposed" + class="form-check-label"> + Description file transposed?</label> + </div> + + <div class="non-resumable-elements"> + <label for="finput-phenotype-descriptions" class="form-label"> + Phenotype Descriptions</label> + <input id="finput-phenotype-descriptions" + name="phenotype-descriptions" + class="form-control" + type="file" + data-preview-table="tbl-preview-pheno-desc" + required="required" /> + <span class="form-text text-muted"> + Provide a file that contains only the phenotype descriptions, + <a href="#docs-file-phenotype-description" + title="Documentation of the phenotype data file format."> + the documentation for the expected format of the file</a>.</span> + </div> + {{display_resumable_elements( + "resumable-phenotype-descriptions", + "phenotype descriptions", + '<p>Drag and drop the CSV file that contains the descriptions of your + phenotypes here.</p> + + <p>The CSV file should be a matrix of + <strong>phenotypes × descriptions</strong> i.e. The first column + contains the phenotype names/identifiers whereas the first row is a list + of metadata fields like, "description", "units", etc.</p> + + <p>If the format is transposed (i.e. + <strong>descriptions × phenotypes</strong>) select the checkbox above. + </p> + + <p>Please see the + <a href="#docs-file-phenotype-description" + title="Documentation of the phenotype data file format."> + "Phenotypes Descriptions" documentation</a> section below for more + information on the expected format of the file provided here.</p>')}} + {{display_preview_table( + "tbl-preview-pheno-desc", "phenotype descriptions")}} + </div> + </fieldset> + + + <fieldset id="fldset-data-file"> + <div class="form-group"> + <div class="form-check"> + <input id="chk-phenotype-data-transposed" + name="phenotype-data-transposed" + type="checkbox" + class="form-check-input" + style="border: solid #8EABF0" /> + <label for="chk-phenotype-data-transposed" class="form-check-label"> + Data file transposed?</label> + </div> + + <div class="non-resumable-elements"> + <label for="finput-phenotype-data" class="form-label">Phenotype Data</label> + <input id="finput-phenotype-data" + name="phenotype-data" + class="form-control" + type="file" + data-preview-table="tbl-preview-pheno-data" + required="required" /> + <span class="form-text text-muted"> + Provide a file that contains only the phenotype data. See + <a href="#docs-file-phenotype-data" + title="Documentation of the phenotype data file format."> + the documentation for the expected format of the file</a>.</span> + </div> + + {{display_resumable_elements( + "resumable-phenotype-data", + "phenotype data", + '<p>Drag and drop a CSV file that contains the phenotypes numerical data + here. You can click the "Browse" button (below and to the right) to + select the file from your computer.</p> + + <p>The CSV should be a matrix of <strong>samples × phenotypes</strong>, + i.e. The first column contains the samples identifiers while the first + row is the list of phenotypes identifiers occurring in the phenotypes + descriptions file.</p> + + <p>If the format is transposed (i.e <strong>phenotypes × samples</strong>) + select the checkbox above.</p> + <p>Please see the + <a href="#docs-file-phenotype-data" + title="Documentation of the phenotype data file format."> + "Phenotypes Data" documentation</a> section below for more information + on the expected format for the file provided here.</p>')}} + {{display_preview_table("tbl-preview-pheno-data", "phenotype data")}} + </div> + </fieldset> - <div class="form-group non-resumable-elements"> - <label for="finput-phenotype-n" class="form-label">Phenotype: Number of Samples/Individuals</label> - <input id="finput-phenotype-n" - name="phenotype-n" - class="form-control" - type="file" - data-preview-table="tbl-preview-pheno-n" - required="required" /> - <span class="form-text text-muted"> - Provide a file that contains only the number of samples/individuals used in - the computation of the standard errors above.</span> - </div> - {{display_resumable_elements( - "resumable-phenotype-n", - "number of samples/individuals", - '<p>You can drop a CSV file that contains the number of samples/individuals - used in computation of the standard-errors here, or you can click the - "Browse" button (below and to the right) to select it from your computer. - </p> - <p>The CSV file must conform to some standards, as documented in the - <a href="#docs-file-phenotype-n" - title="Documentation of the phenotype data file format."> - "Phenotypes Data" documentation</a> section below.</p>')}} + {%if population.Family in families_with_se_and_n%} + <fieldset id="fldset-se-file"> + <div class="form-group"> + <div class="form-check"> + <input id="chk-phenotype-se-transposed" + name="phenotype-se-transposed" + type="checkbox" + class="form-check-input" + style="border: solid #8EABF0" /> + <label for="chk-phenotype-se-transposed" class="form-check-label"> + Standard-Errors file transposed?</label> + </div> + <div class="group non-resumable-elements"> + <label for="finput-phenotype-se" class="form-label">Phenotype: Standard Errors</label> + <input id="finput-phenotype-se" + name="phenotype-se" + class="form-control" + type="file" + data-preview-table="tbl-preview-pheno-se" + required="required" /> + <span class="form-text text-muted"> + Provide a file that contains only the standard errors for the phenotypes, + computed from the data above.</span> + </div> + + {{display_resumable_elements( + "resumable-phenotype-se", + "standard errors", + '<p>Drag and drop a CSV file that contains the phenotypes standard-errors + data here. You can click the "Browse" button (below and to the right) to + select the file from your computer.</p> + + <p>The CSV should be a matrix of <strong>samples × phenotypes</strong>, + i.e. The first column contains the samples identifiers while the first + row is the list of phenotypes identifiers occurring in the phenotypes + descriptions file.</p> + + <p>If the format is transposed (i.e <strong>phenotypes × samples</strong>) + select the checkbox above.</p> + + <p>Please see the + <a href="#docs-file-phenotype-se" + title="Documentation of the phenotype data file format."> + "Phenotypes Data" documentation</a> section below for more information + on the expected format of the file provided here.</p>')}} + + {{display_preview_table("tbl-preview-pheno-se", "standard errors")}} + </div> + </fieldset> + + + <fieldset id="fldset-n-file"> + <div class="form-group"> + <div class="form-check"> + <input id="chk-phenotype-n-transposed" + name="phenotype-n-transposed" + type="checkbox" + class="form-check-input" + style="border: solid #8EABF0" /> + <label for="chk-phenotype-n-transposed" class="form-check-label"> + Counts file transposed?</label> + </div> + <div class="non-resumable-elements"> + <label for="finput-phenotype-n" class="form-label">Phenotype: Number of Samples/Individuals</label> + <input id="finput-phenotype-n" + name="phenotype-n" + class="form-control" + type="file" + data-preview-table="tbl-preview-pheno-n" + required="required" /> + <span class="form-text text-muted"> + Provide a file that contains only the number of samples/individuals used in + the computation of the standard errors above.</span> + </div> + + {{display_resumable_elements( + "resumable-phenotype-n", + "number of samples/individuals", + '<p>Drag and drop a CSV file that contains the samples\' phenotypes counts + data here. You can click the "Browse" button (below and to the right) to + select the file from your computer.</p> + + <p>The CSV should be a matrix of <strong>samples × phenotypes</strong>, + i.e. The first column contains the samples identifiers while the first + row is the list of phenotypes identifiers occurring in the phenotypes + descriptions file.</p> + + <p>If the format is transposed (i.e <strong>phenotypes × samples</strong>) + select the checkbox above.</p> + + <p>Please see the + <a href="#docs-file-phenotype-se" + title="Documentation of the phenotype data file format."> + "Phenotypes Data" documentation</a> section below for more information + on the expected format of the file provided here.</p>')}} + + {{display_preview_table("tbl-preview-pheno-n", "number of samples/individuals")}} + </div> + </fieldset> </fieldset> {%endif%} {%endblock%} @@ -322,15 +410,15 @@ <span id="docs-file-phenotype-data"></span> <span id="docs-file-phenotype-se"></span> <span id="docs-file-phenotype-n"></span> - <p>The data is a matrix of <em>phenotypes × individuals</em>, e.g.</p> + <p>The data is a matrix of <em>samples(or individuals) × phenotypes</em>, e.g.</p> <code> # num-cases: 2549 # num-phenos: 13 - id,IND001,IND002,IND003,IND004,…<br /> - pheno10001,61.400002,54.099998,483,49.799999,…<br /> - pheno10002,49,50.099998,403,45.5,…<br /> - pheno10003,62.5,53.299999,501,62.900002,…<br /> - pheno10004,53.099998,55.099998,403,NA,…<br /> + id,pheno10001,pheno10002,pheno10003,pheno10004,53.099998,…<br /> + IND001,61.400002,49,62.5,55.099998,…<br /> + IND002,54.099998,50.099998,53.299999,55.099998,…<br /> + IND003,483,403,501,403,…<br /> + IND004,49.799999,45.5,62.900002,NA,…<br /> ⋮<br /></code> <p>where <code>IND001,IND002,IND003,IND004,…</code> are the @@ -345,16 +433,6 @@ {%endblock%} -{%block sidebarcontents%} -{{display_preview_table("tbl-preview-pheno-desc", "descriptions")}} -{{display_preview_table("tbl-preview-pheno-data", "data")}} -{%if population.Family in families_with_se_and_n%} -{{display_preview_table("tbl-preview-pheno-se", "standard errors")}} -{{display_preview_table("tbl-preview-pheno-n", "number of samples")}} -{%endif%} -{{display_pheno_dataset_card(species, population, dataset)}} -{%endblock%} - {%block more_javascript%} <script src="{{url_for('base.node_modules', @@ -429,9 +507,9 @@ }); if(table.find("tbody tr.data-row").length > 0) { - add_class(table.find(".data-row-template"), "hidden"); + add_class(table.find(".data-row-template"), "visually-hidden"); } else { - remove_class(table.find(".data-row-template"), "hidden"); + remove_class(table.find(".data-row-template"), "visually-hidden"); } }; @@ -467,13 +545,24 @@ Object.entries(preview_tables_to_elements_map).forEach((mapentry) => { var preview_table = $(mapentry[0]); var file_input = $(mapentry[1]); - if(file_input.length === 1) { + if(file_input[0].files.length > 0) { readFirstNLines( file_input[0].files[0], 10, [makePreviewUpdater(preview_table)]); } }); + + if(typeof(resumables) !== "undefined") { + resumables.forEach((resumable) => { + if(resumable.files.length > 0) { + readFirstNLines( + resumable.files[0].file, + 10, + [makePreviewUpdater(resumable.preview_table)]); + } + }); + } }; [ @@ -506,7 +595,7 @@ var display_element = display_area .find(".file-display-template") .clone(); - remove_class(display_element, "hidden"); + remove_class(display_element, "visually-hidden"); remove_class(display_element, "file-display-template"); add_class(display_element, "file-display"); display_element.find(".filename").text(file.name @@ -526,7 +615,7 @@ return () => {/*Has no event!*/ var progress = (resumable.progress() * 100).toFixed(2); var pbar = progress_bar.find(".progress-bar"); - remove_class(progress_bar, "hidden"); + remove_class(progress_bar, "visually-hidden"); pbar.css("width", progress+"%"); pbar.attr("aria-valuenow", progress); pbar.text("Uploading: " + progress + "%"); @@ -536,9 +625,9 @@ var retryUpload = (retry_button, cancel_button) => { retry_button.on("click", (event) => { resumable.files.forEach((file) => {file.retry();}); - add_class(retry_button, "hidden"); - remove_class(cancel_button, "hidden"); - add_class(browse_button, "hidden"); + add_class(retry_button, "visually-hidden"); + remove_class(cancel_button, "visually-hidden"); + add_class(browse_button, "visually-hidden"); }); }; @@ -549,35 +638,69 @@ file.abort(); } }); - add_class(cancel_button, "hidden"); - remove_class(retry_button, "hidden"); - remove_class(browse_button, "hidden"); + add_class(cancel_button, "visually-hidden"); + remove_class(retry_button, "visually-hidden"); + remove_class(browse_button, "visually-hidden"); }); }; var startUpload = (browse_button, retry_button, cancel_button) => { return (event) => { - remove_class(cancel_button, "hidden"); - add_class(retry_button, "hidden"); - add_class(browse_button, "hidden"); + remove_class(cancel_button, "visually-hidden"); + add_class(retry_button, "visually-hidden"); + add_class(browse_button, "visually-hidden"); }; }; + var processForm = (form) => { + var formdata = new FormData(form); + uploaded_files.forEach((msg) => { + formdata.delete(msg["file-input-name"]); + formdata.append(msg["file-input-name"], JSON.stringify({ + "uploaded-file": msg["uploaded-file"], + "original-name": msg["original-name"] + })); + }); + formdata.append("resumable-upload", "true"); + formdata.append("publication-id", $("#txt-publication-id").val()); + return formdata; + } + var uploaded_files = new Set(); var submitForm = (new_file) => { uploaded_files.add(new_file); if(uploaded_files.size === resumables.length) { - //TODO: build up the new form from existing form and uploaded files - //TODO: submit the form to appropriate endpoint + var form = $("#frm-add-phenotypes"); + if(form.length !== 1) { + // TODO: Handle error somehow? + alert("Could not find form!!!"); + return false; + } + + $.ajax({ + "url": form.attr("action"), + "type": "POST", + "data": processForm(form[0]), + "processData": false, + "contentType": false, + "success": (data, textstatus, jqxhr) => { + // TODO: Redirect to endpoint that should come as part of the + // success/error message. + console.log("SUCCESS DATA: ", data); + console.log("SUCCESS STATUS: ", textstatus); + console.log("SUCCESS jqXHR: ", jqxhr); + window.location.assign(window.location.origin + data["redirect-to"]); + }, + }); + return false; } + return false; }; - var uploadSuccess = () => { + var uploadSuccess = (file_input_name) => { return (file, message) => { - console.log("THE FILE:", file); - console.log("THE SUCCESS MESSAGE:", message); - submitForm(file.file.name); + submitForm({...JSON.parse(message), "file-input-name": file_input_name}); }; }; @@ -609,7 +732,7 @@ file_input.parent(), $("#" + resumable_element_id), submit_button, - ["csv", "tsv"]), + ["csv", "tsv", "txt"]), file_input.parent(), $("#" + resumable_element_id), $("#" + resumable_element_id + "-browse-button")), @@ -628,7 +751,7 @@ startUpload($("#" + resumable_element_id + "-browse-button"), $("#" + resumable_element_id + "-retry-button"), $("#" + resumable_element_id + "-cancel-button"))), - uploadSuccess()), + uploadSuccess(file_input.attr("name"))), uploadError()); /** Setup progress indicator **/ @@ -645,13 +768,20 @@ ["frm-add-phenotypes", "finput-phenotype-se", "resumable-phenotype-se", "tbl-preview-pheno-se"], ["frm-add-phenotypes", "finput-phenotype-n", "resumable-phenotype-n", "tbl-preview-pheno-n"], ].map((row) => { - return makeResumableObject(row[0], row[1], row[2], row[3]); + r = makeResumableObject(row[0], row[1], row[2], row[3]); + r.preview_table = $("#" + row[3]); + return r; }).filter((val) => { return Boolean(val); }); $("#frm-add-phenotypes input[type=submit]").on("click", (event) => { event.preventDefault(); + console.debug(); + if ($("#txt-publication-id").val() == "") { + alert("You MUST provide a publication for the phenotypes."); + return false; + } // TODO: Check all the relevant files exist // TODO: Verify that files are not duplicated var filenames = []; diff --git a/uploader/templates/phenotypes/add-phenotypes-with-rqtl2-bundle.html b/uploader/templates/phenotypes/add-phenotypes-with-rqtl2-bundle.html index 898fc0c..4afd6ab 100644 --- a/uploader/templates/phenotypes/add-phenotypes-with-rqtl2-bundle.html +++ b/uploader/templates/phenotypes/add-phenotypes-with-rqtl2-bundle.html @@ -1,25 +1,11 @@ {%extends "phenotypes/add-phenotypes-base.html"%} {%from "flash_messages.html" import flash_all_messages%} {%from "macro-table-pagination.html" import table_pagination%} -{%from "phenotypes/macro-display-pheno-dataset-card.html" import display_pheno_dataset_card%} {%block title%}Phenotypes{%endblock%} {%block pagetitle%}Phenotypes{%endblock%} -{%block lvl4_breadcrumbs%} -<li {%if activelink=="add-phenotypes"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> - <a href="{{url_for('species.populations.phenotypes.add_phenotypes', - species_id=species.SpeciesId, - population_id=population.Id, - dataset_id=dataset.Id)}}">Add Phenotypes</a> -</li> -{%endblock%} - {%block frm_add_phenotypes_documentation%} <p>Select the zip file bundle containing information on the phenotypes you wish to upload, then click the "Upload Phenotypes" button below to @@ -201,7 +187,3 @@ <em>phenotypes × individuals</em>.</p> </div> {%endblock%} - -{%block sidebarcontents%} -{{display_pheno_dataset_card(species, population, dataset)}} -{%endblock%} diff --git a/uploader/templates/phenotypes/base.html b/uploader/templates/phenotypes/base.html index adbc012..fe7ccd3 100644 --- a/uploader/templates/phenotypes/base.html +++ b/uploader/templates/phenotypes/base.html @@ -1,19 +1,25 @@ {%extends "populations/base.html"%} +{%from "phenotypes/macro-display-pheno-dataset-card.html" import display_sui_pheno_dataset_card%} -{%block lvl3_breadcrumbs%} -<li {%if activelink=="phenotypes"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> - {%if dataset is mapping%} +{%block breadcrumbs%} +{{super()}} +<li class="breadcrumb-item"> <a href="{{url_for('species.populations.phenotypes.view_dataset', - species_id=species.SpeciesId, - population_id=population.Id, - dataset_id=dataset.Id)}}">{{dataset.Name}}</a> - {%else%} - <a href="{{url_for('species.populations.phenotypes.index')}}">Phenotypes</a> - {%endif%} + species_id=species['SpeciesId'], + population_id=population['Id'], + dataset_id=dataset['Id'])}}"> + {{dataset["Name"]}} + </a> </li> -{%block lvl4_breadcrumbs%}{%endblock%} +{%endblock%} + +{%block contents%} +<div class="row"> + <h2 class="heading">{{dataset.FullName}} ({{dataset.Name}})</h2> +</div> +{%endblock%} + + +{%block sidebarcontents%} +{{display_sui_pheno_dataset_card(species, population, dataset)}} {%endblock%} diff --git a/uploader/templates/phenotypes/bulk-edit-upload.html b/uploader/templates/phenotypes/bulk-edit-upload.html new file mode 100644 index 0000000..d0f38f5 --- /dev/null +++ b/uploader/templates/phenotypes/bulk-edit-upload.html @@ -0,0 +1,62 @@ +{%extends "phenotypes/base.html"%} +{%from "flash_messages.html" import flash_all_messages%} +{%from "macro-table-pagination.html" import table_pagination%} +{%from "populations/macro-display-population-card.html" import display_population_card%} + +{%block title%}Phenotypes{%endblock%} + +{%block pagetitle%}Phenotypes{%endblock%} + +{%block lvl4_breadcrumbs%} +<li {%if activelink=="view-dataset"%} + class="breadcrumb-item active" + {%else%} + class="breadcrumb-item" + {%endif%}> + <a href="{{url_for('species.populations.phenotypes.view_dataset', + species_id=species.SpeciesId, + population_id=population.Id, + dataset_id=dataset.Id)}}">View</a> +</li> +{%endblock%} + +{%block contents%} +<div class="row"> + <p>Upload the edited file you downloaded and edited.</p> +</div> + +<div class="row"> + <form id="frm-bulk-edit-upload" + class="form-horizontal" + method="POST" + action="{{url_for( + 'species.populations.phenotypes.edit_upload_phenotype_data', + species_id=species.SpeciesId, + population_id=population.Id, + dataset_id=dataset.Id)}}" + enctype="multipart/form-data"> + + <div class="form-group row"> + <label for="file-upload-bulk-edit-upload" + class="form-label col-form-label col-sm-2"> + Edited File</label> + <div class="col-sm-10"> + <input id="file-upload-bulk-edit-upload" + name="file-upload-bulk-edit-upload" + class="form-control" + type="file" + accept="text/tab-separated-values" + required="required" /> + </div> + </div> + + <input type="submit" class="btn btn-primary" + value="upload to edit" /> + + </form> +</div> +{%endblock%} + + +{%block javascript%} +{%endblock%} diff --git a/uploader/templates/phenotypes/create-dataset.html b/uploader/templates/phenotypes/create-dataset.html index 93de92f..19a2b34 100644 --- a/uploader/templates/phenotypes/create-dataset.html +++ b/uploader/templates/phenotypes/create-dataset.html @@ -42,7 +42,7 @@ <input type="text" name="dataset-name" id="txt-dataset-name" - value="{{original_formdata.get('dataset-name') or (population.InbredSetCode + 'Publish')}}" + value="{{original_formdata.get('dataset-name') or (population.Name + 'Publish')}}" {%if errors["dataset-name"] is defined%} class="form-control danger" {%else%} @@ -51,7 +51,7 @@ required="required" /> <small class="form-text text-muted"> <p>A short representative name for the dataset.</p> - <p>Recommended: Use the population code and append "Publish" at the end. + <p>Recommended: Use the population name and append "Publish" at the end. <br />This field will only accept names composed of letters ('A-Za-z'), numbers (0-9), hyphens and underscores.</p> </small> @@ -74,8 +74,10 @@ {%endif%} required="required" /> <small class="form-text text-muted"> - <p>A longer, descriptive name for the dataset — useful for humans. - </p></small> + <p>A longer, descriptive name for the dataset. The name is meant for use + by humans, and therefore, it should be clear what the dataset contains + from the name.</p> + </small> </div> <div class="form-group"> @@ -84,7 +86,7 @@ name="dataset-shortname" type="text" class="form-control" - value="{{original_formdata.get('dataset-shortname') or (population.InbredSetCode + ' Publish')}}" /> + value="{{original_formdata.get('dataset-shortname') or (population.Name + 'Publish')}}" /> <small class="form-text text-muted"> <p>An optional, short name for the dataset. <br /> If this is not provided, it will default to the value provided for the diff --git a/uploader/templates/phenotypes/edit-phenotype.html b/uploader/templates/phenotypes/edit-phenotype.html new file mode 100644 index 0000000..115d6af --- /dev/null +++ b/uploader/templates/phenotypes/edit-phenotype.html @@ -0,0 +1,208 @@ +{%extends "phenotypes/base.html"%} +{%from "flash_messages.html" import flash_all_messages%} +{%from "populations/macro-display-population-card.html" import display_population_card%} + +{%block title%}Phenotypes{%endblock%} + +{%block pagetitle%}Phenotypes{%endblock%} + +{%block lvl4_breadcrumbs%} +<li {%if activelink=="edit-phenotype"%} + class="breadcrumb-item active" + {%else%} + class="breadcrumb-item" + {%endif%}> + <a href="{{url_for('species.populations.phenotypes.edit_phenotype_data', + species_id=species.SpeciesId, + population_id=population.Id, + dataset_id=dataset.Id, + xref_id=xref_id)}}">View Datasets</a> +</li> +{%endblock%} + +{%block contents%} +{{flash_all_messages()}} + +<div class="row"> + <h2 class="heading">edit phenotype data</h2> + <p>The forms provided in this page help you update the data for the + phenotypes, and the publication information for the phenotype, + respectively.</p> +</div> + +<div class="row"> + <h3 class="subheading">Basic metadata</h3> + <form name="frm-phenotype-basic-metadata" + class="form-horizontal" + method="POST" + action="{{url_for( + 'species.populations.phenotypes.edit_phenotype_data', + species_id=species.SpeciesId, + population_id=population.Id, + dataset_id=dataset.Id, + xref_id=xref_id)}}"> + <input type="hidden" name="phenotype-id" value="{{phenotype.Id}}" /> + <div class="form-group"> + <label for="txt-pre-publication-description" + class="control-label col-sm-2">Pre-Publication Description</label> + <div class="col-sm-10"> + <input type="text" + id="txt-pre-publication-description" + name="pre-publication-description" + class="form-control" + value="{{phenotype['Pre_publication_description'] or ''}}" /> + </div> + </div> + + <div class="form-group"> + <label for="txt-pre-publication-abbreviation" + class="control-label col-sm-2">Pre-Publication Abbreviation</label> + <div class="col-sm-10"> + <input type="text" + id="txt-pre-publication-abbreviation" + name="pre-publication-abbreviation" + class="form-control" + value="{{phenotype['Pre_publication_abbreviation'] or ''}}" /> + </div> + </div> + + <div class="form-group"> + <label for="txt-post-publication-description" + class="control-label col-sm-2">Post-Publication Description</label> + <div class="col-sm-10"> + <input type="text" + id="txt-post-publication-description" + name="post-publication-description" + class="form-control" + value="{{phenotype['Post_publication_description'] or ''}}" /> + </div> + </div> + + <div class="form-group"> + <label for="txt-post-publication-abbreviation" + class="control-label col-sm-2">Post-Publication Abbreviation</label> + <div class="col-sm-10"> + <input type="text" + id="txt-post-publication-abbreviation" + name="post-publication-abbreviation" + class="form-control" + value="{{phenotype['Post_publication_abbreviation'] or ''}}" /> + </div> + </div> + + <div class="form-group"> + <label for="txt-original-description" + class="control-label col-sm-2">Original Description</label> + <div class="col-sm-10"> + <input type="text" + id="txt-original-description" + name="original-description" + class="form-control" + value="{{phenotype['Original_description'] or ''}}" /> + </div> + </div> + + <div class="form-group"> + <label for="txt-units" + class="control-label col-sm-2">units</label> + <div class="col-sm-10"> + <input type="text" + id="txt-units" + name="units" + class="form-control" + required="required" + value="{{phenotype['Units']}}" /> + </div> + </div> + + <div class="form-group"> + <div class="col-sm-offset-2 col-sm-10"> + <input type="submit" + name="submit" + class="btn btn-primary" + value="update basic metadata"> + </div> + </div> + </form> +</div> + + +<div class="row"> + <h3 class="subheading">phenotype data</h3> + <form id="frm-edit-phenotype-data" + class="form-horizontal" + method="POST" + action="{{url_for( + 'species.populations.phenotypes.edit_phenotype_data', + species_id=species.SpeciesId, + population_id=population.Id, + dataset_id=dataset.Id, + xref_id=xref_id)}}"> + <div style="max-height: 23.37em;overflow-y: scroll;"> + <table class="table table-striped table-responsive table-form-table"> + <thead style="position: sticky; top: 0;"> + <tr> + <th>#</th> + <th>Sample</th> + <th>Value</th> + {%if population.Family in families_with_se_and_n%} + <th>Standard-Error</th> + <th>Number of Samples</th> + {%endif%} + </tr> + </thead> + + <tbody> + {%for item in phenotype.data%} + <tr> + <td>{{loop.index}}</td> + <td>{{item.StrainName}}</td> + <td> + <input type="text" + name="value-new::{{item.DataId}}::{{item.StrainId}}" + value="{{item.value}}" + class="form-control" /> + <input type="hidden" + name="value-original::{{item.DataId}}::{{item.StrainId}}" + value="{{item.value}}" /></td> + {%if population.Family in families_with_se_and_n%} + <td> + <input type="text" + name="se-new::{{item.DataId}}::{{item.StrainId}}" + value="{{item.error or ''}}" + data-original-value="{{item.error or ''}}" + class="form-control" /> + <input type="hidden" + name="se-original::{{item.DataId}}::{{item.StrainId}}" + value="{{item.error or ''}}" /></td> + <td> + <input type="text" + name="n-new::{{item.DataId}}::{{item.StrainId}}" + value="{{item.count or ''}}" + data-original-value="{{item.count or "-"}}" + class="form-control" /> + <input type="hidden" + name="n-original::{{item.DataId}}::{{item.StrainId}}" + value="{{item.count or ''}}" /></td> + {%endif%} + </tr> + {%endfor%} + </tbody> + </table> + </div> + <div class="form-group"> + <div class="col-sm-offset-2 col-sm-10"> + <input type="submit" + name="submit" + class="btn btn-primary" + value="update data" /> + </div> + </div> + </form> +</div> + +{%endblock%} + +{%block sidebarcontents%} +{{display_population_card(species, population)}} +{%endblock%} diff --git a/uploader/templates/phenotypes/index.html b/uploader/templates/phenotypes/index.html index 0c691e6..689c28e 100644 --- a/uploader/templates/phenotypes/index.html +++ b/uploader/templates/phenotypes/index.html @@ -11,16 +11,11 @@ {{flash_all_messages()}} <div class="row"> - <p>This section deals with phenotypes that - <span class="text-warning"> - <span class="glyphicon glyphicon-exclamation-sign"></span> - … what are the characteristics of these phenotypes? …</span></p> - <p>Select the species to begin the process of viewing/uploading data about - your phenotypes</p> + {{select_species_form(url_for("species.populations.phenotypes.index"), species)}} </div> +{%endblock%} -<div class="row"> - {{select_species_form(url_for("species.populations.phenotypes.index"), - species)}} -</div> + +{%block javascript%} +<script type="text/javascript" src="/static/js/species.js"></script> {%endblock%} diff --git a/uploader/templates/phenotypes/job-status.html b/uploader/templates/phenotypes/job-status.html index 5f13876..0bbe8e0 100644 --- a/uploader/templates/phenotypes/job-status.html +++ b/uploader/templates/phenotypes/job-status.html @@ -2,7 +2,6 @@ {%from "cli-output.html" import cli_output%} {%from "flash_messages.html" import flash_all_messages%} {%from "macro-table-pagination.html" import table_pagination%} -{%from "phenotypes/macro-display-pheno-dataset-card.html" import display_pheno_dataset_card%} {%block extrameta%} {%if job and job.status not in ("success", "completed:success", "error", "completed:error")%} @@ -14,27 +13,17 @@ {%block pagetitle%}Phenotypes{%endblock%} -{%block lvl4_breadcrumbs%} -<li {%if activelink=="add-phenotypes"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> - <a href="{{url_for('species.populations.phenotypes.add_phenotypes', - species_id=species.SpeciesId, - population_id=population.Id, - dataset_id=dataset.Id)}}">View Datasets</a> -</li> -{%endblock%} - {%block contents%} {%if job%} -<h4 class="subheading">Progress</h4> <div class="row"> + <h2 class="heading">{{dataset.FullName}} ({{dataset.Name}})</h2> + <h3 class="subheading">upload progress</h3> +</div> +<div class="row" style="overflow:scroll;"> <p><strong>Process Status:</strong> {{job.status}}</p> {%if metadata%} - <table class="table"> + <table class="table table-responsive"> <thead> <tr> <th>File</th> @@ -56,32 +45,39 @@ </tbody> </table> {%endif%} +</div> + +<div class="row"> {%if job.status in ("completed:success", "success")%} <p> {%if errors | length == 0%} - <a href="#" - class="not-implemented btn btn-primary" + <a href="{{url_for('species.populations.phenotypes.review_job_data', + species_id=species.SpeciesId, + population_id=population.Id, + dataset_id=dataset.Id, + job_id=job_id)}}" + class="btn btn-primary" title="Continue to process data">Continue</a> {%else%} <span class="text-muted" - disabled="disabled" - style="border: solid 2px;border-radius: 5px;padding: 0.3em;"> + disabled="disabled" + style="border: solid 2px;border-radius: 5px;padding: 0.3em;"> Cannot continue due to errors. Please fix the errors first. - </a> + </span> {%endif%} </p> {%endif%} </div> -<h4 class="subheading">Errors</h4> -<div class="row" style="max-height: 20em; overflow: auto;"> +<h3 class="subheading">upload errors</h3> +<div class="row" style="max-height: 20em; overflow: scroll;"> {%if errors | length == 0 %} <p class="text-info"> <span class="glyphicon glyphicon-info-sign"></span> No errors found so far </p> {%else%} - <table class="table"> + <table class="table table-responsive"> <thead style="position: sticky; top: 0; background: white;"> <tr> <th>File</th> @@ -89,6 +85,7 @@ <th>Column</th> <th>Value</th> <th>Message</th> + </tr> </thead> <tbody style="font-size: 0.9em;"> @@ -97,7 +94,7 @@ <td>{{error.filename}}</td> <td>{{error.rowtitle}}</td> <td>{{error.coltitle}}</td> - <td>{%if error.cellvalue | length > 25%} + <td>{%if error.cellvalue is not none and error.cellvalue | length > 25%} {{error.cellvalue[0:24]}}… {%else%} {{error.cellvalue}} @@ -141,7 +138,3 @@ </div> {%endif%} {%endblock%} - -{%block sidebarcontents%} -{{display_pheno_dataset_card(species, population, dataset)}} -{%endblock%} diff --git a/uploader/templates/phenotypes/list-datasets.html b/uploader/templates/phenotypes/list-datasets.html index 2eaf43a..2cf2c7f 100644 --- a/uploader/templates/phenotypes/list-datasets.html +++ b/uploader/templates/phenotypes/list-datasets.html @@ -48,9 +48,12 @@ </tbody> </table> {%else%} - <p class="text-warning"> - <span class="glyphicon glyphicon-exclamation-sign"></span> - There is no dataset for this population!</p> + <p>Phenotypes need to go into a dataset. We do not currently have a dataset + for species <strong>'{{species["FullName"]}} ({{species["Name"]}})'</strong> + phenotypes.</p> + + <p>Do, please, create a new dataset by clicking on the "Create Dataset" button + below and following the prompts/instructions.</p> <p><a href="{{url_for('species.populations.phenotypes.create_dataset', species_id=species.SpeciesId, population_id=population.Id)}}" diff --git a/uploader/templates/phenotypes/load-phenotypes-success.html b/uploader/templates/phenotypes/load-phenotypes-success.html new file mode 100644 index 0000000..1fb0e61 --- /dev/null +++ b/uploader/templates/phenotypes/load-phenotypes-success.html @@ -0,0 +1,26 @@ +{%extends "phenotypes/base.html"%} +{%from "flash_messages.html" import flash_all_messages%} +{%from "macro-table-pagination.html" import table_pagination%} + +{%block title%}Phenotypes{%endblock%} + +{%block pagetitle%}Phenotypes{%endblock%} + +{%block contents%} +{{super()}} + +<div class="row"> + <p>You have successfully loaded + <!-- maybe indicate the number of phenotypes here? -->your + new phenotypes into the database.</p> + <!-- TODO: Maybe notify user that they have sole access. --> + <!-- TODO: Maybe provide a link to go to GeneNetwork to view the data. --> + <p>View your data + <a href="{{search_page_uri}}" + target="_blank">on GeneNetwork2</a>. + You might need to login to GeneNetwork2 to view specific traits.</p> +</div> +{%endblock%} + + +{%block more_javascript%}{%endblock%} diff --git a/uploader/templates/phenotypes/macro-display-pheno-dataset-card.html b/uploader/templates/phenotypes/macro-display-pheno-dataset-card.html index 11b108b..641421d 100644 --- a/uploader/templates/phenotypes/macro-display-pheno-dataset-card.html +++ b/uploader/templates/phenotypes/macro-display-pheno-dataset-card.html @@ -1,4 +1,4 @@ -{%from "populations/macro-display-population-card.html" import display_population_card%} +{%from "populations/macro-display-population-card.html" import display_population_card, display_sui_population_card%} {%macro display_pheno_dataset_card(species, population, dataset)%} {{display_population_card(species, population)}} @@ -29,3 +29,29 @@ </div> </div> {%endmacro%} + +{%macro display_sui_pheno_dataset_card(species, population, dataset)%} +{{display_sui_population_card(species, population)}} + +<div class="row"> + <table class="table"> + <caption>Current dataset</caption> + <tbody> + <tr> + <th>Name</th> + <td>{{dataset.Name}}</td> + </tr> + + <tr> + <th>Full Name</th> + <td>{{dataset.FullName}}</td> + </tr> + + <tr> + <th>Short Name</th> + <td>{{dataset.ShortName}}</td> + </tr> + </tbody> + </table> +</div> +{%endmacro%} diff --git a/uploader/templates/phenotypes/macro-display-preview-table.html b/uploader/templates/phenotypes/macro-display-preview-table.html index 7509158..5a4c422 100644 --- a/uploader/templates/phenotypes/macro-display-preview-table.html +++ b/uploader/templates/phenotypes/macro-display-preview-table.html @@ -1,17 +1,15 @@ {%macro display_preview_table(tableid, filetype)%} -<div class="card" style="max-width: 676px;"> +<div class="card"> <div class="card-body"> - <h5 class="card-title">Phenotypes '{{filetype | title}}' File Preview</h5> - <div class="card-text"> - <table id="{{tableid}}" class="table table-condensed table-responsive" style="overflow: hidden;"> + <h5 class="card-title">{{filetype | title}}: File Preview</h5> + <div class="card-text" style="overflow: scroll;"> + <table id="{{tableid}}" class="table table-condensed table-responsive"> <thead> <tr> </tr> <tbody> <tr> - <td class="data-row-template text-info"> - Provide a phenotype '{{filetype | lower}}' file to preview. - </td> + <td class="data-row-template text-info"></td> </tr> </tbody> </table> diff --git a/uploader/templates/phenotypes/macro-display-resumable-elements.html b/uploader/templates/phenotypes/macro-display-resumable-elements.html new file mode 100644 index 0000000..ed14ea5 --- /dev/null +++ b/uploader/templates/phenotypes/macro-display-resumable-elements.html @@ -0,0 +1,60 @@ +{%macro display_resumable_elements(id, title, help)%} +<div id="{{id}}" + class="resumable-elements visually-hidden" + style="background:#D4D4EE;border-radius: 5px;;padding: 1em;border-left: solid #B2B2CC 1px;border-bottom: solid #B2B2CC 2px;margin-top:0.3em;"> + <strong style="line-height: 1.2em;">{{title | title}}</strong> + + <span class="form-text text-muted">{{help | safe}}</span> + + <div id="{{id}}-selected-files" + class="resumable-selected-files" + style="display:flex;flex-direction:row;flex-wrap: wrap;justify-content:space-around;gap:10px 20px;"> + <div class="panel panel-info file-display-template visually-hidden"> + <div class="panel-heading filename">The Filename Goes Here!</div> + <div class="panel-body"> + <ul> + <li> + <strong>Name</strong>: + <span class="filename">the file's name</span></li> + + <li><strong>Size</strong>: <span class="filesize">0 MB</span></li> + + <li> + <strong>Unique Identifier</strong>: + <span class="fileuniqueid">brrr</span></li> + + <li> + <strong>Mime</strong>: + <span class="filemimetype">text/csv</span></li> + </ul> + </div> + </div> + </div> + + <a id="{{id}}-browse-button" + class="resumable-browse-button btn btn-info" + href="#{{id}}" + style="margin-left: 80%;">Browse</a> + + <div id="{{id}}-progress-bar" class="progress visually-hidden"> + <div class="progress-bar" + role="progress-bar" + aria-valuenow="60" + aria-valuemin="0" + aria-valuemax="100" + style="width: 0%;"> + Uploading: 60% + </div> + </div> + + <div id="{{id}}-cancel-resume-buttons"> + <a id="{{id}}-resume-button" + class="resumable-resume-button btn btn-info visually-hidden" + href="#">resume upload</a> + + <a id="{{id}}-cancel-button" + class="resumable-cancel-button btn btn-danger visually-hidden" + href="#">cancel upload</a> + </div> +</div> +{%endmacro%} diff --git a/uploader/templates/phenotypes/review-job-data.html b/uploader/templates/phenotypes/review-job-data.html new file mode 100644 index 0000000..c8355b2 --- /dev/null +++ b/uploader/templates/phenotypes/review-job-data.html @@ -0,0 +1,121 @@ +{%extends "phenotypes/base.html"%} +{%from "cli-output.html" import cli_output%} +{%from "flash_messages.html" import flash_all_messages%} +{%from "macro-table-pagination.html" import table_pagination%} +{%from "phenotypes/macro-display-pheno-dataset-card.html" import display_pheno_dataset_card%} + +{%block extrameta%} +{%if not job%} +<meta http-equiv="refresh" + content="20; url={{url_for('species.populations.phenotypes.view_dataset', species_id=species.SpeciesId, + population_id=population.Id, + dataset_id=dataset.Id)}}" /> +{%endif%} +{%endblock%} + +{%block title%}Phenotypes{%endblock%} + +{%block pagetitle%}Phenotypes{%endblock%} + +{%block lvl4_breadcrumbs%} +<li {%if activelink=="add-phenotypes"%} + class="breadcrumb-item active" + {%else%} + class="breadcrumb-item" + {%endif%}> + <a href="{{url_for('species.populations.phenotypes.add_phenotypes', + species_id=species.SpeciesId, + population_id=population.Id, + dataset_id=dataset.Id)}}">View Datasets</a> +</li> +{%endblock%} + +{%block contents%} + +{%if job%} +<div class="row"> + <h3 class="heading">Data Review</h3> + <p class="text-info"><strong> + The data has <em>NOT</em> been added/saved yet. Review the details below + and click "Continue" to save the data.</strong></p> + <p>The “<strong>{{dataset.FullName}}</strong>” dataset from the + “<strong>{{population.FullName}}</strong>” population of the + species “<strong>{{species.SpeciesName}} ({{species.FullName}})</strong>” + will be updated as follows:</p> + + <ul> + {%if publication%} + <li>All {{summary.get("pheno", {}).get("total-data-rows", "0")}} phenotypes + are linked to the following publication: + <ul> + <li><strong>Publication Title:</strong> + {{publication.Title or "—"}}</li> + <li><strong>Author(s):</strong> + {{publication.Authors or "—"}}</li> + </ul> + </li> + {%endif%} + {%for ftype in ("phenocovar", "pheno", "phenose", "phenonum")%} + {%if summary.get(ftype, False)%} + <li>A total of {{summary[ftype]["number-of-files"]}} files will be processed + adding {%if ftype == "phenocovar"%}(possibly){%endif%} + {{summary[ftype]["total-data-rows"]}} new + {%if ftype == "phenocovar"%} + phenotypes + {%else%} + {{summary[ftype]["description"]}} rows + {%endif%} + to the database. + </li> + {%endif%} + {%endfor%} + </ul> + + <form id="frm-review-phenotype-data" + method="POST" + action="{{url_for('species.populations.phenotypes.load_data_to_database', + species_id=species.SpeciesId, + population_id=population.Id, + dataset_id=dataset.Id)}}"> + <input type="hidden" name="data-qc-job-id" value="{{job.jobid}}" /> + <input type="submit" + value="continue" + class="btn btn-primary" /> + </form> +</div> +{%else%} +<div class="row"> + <h4 class="subheading">Invalid Job</h3> + <p class="text-danger"> + Could not find a job with the ID: <strong>{{job_id}}.</p> + <p>You will be redirected in + <span id="countdown-element" class="text-info">20</span> second(s)</p> + <p class="text-muted"> + <small> + If you are not redirected, please + <a href="{{url_for( + 'species.populations.phenotypes.view_dataset', + species_id=species.SpeciesId, + population_id=population.Id, + dataset_id=dataset.Id)}}">click here</a> to continue + </small> + </p> +</div> +{%endif%} +{%endblock%} + + +{%block javascript%} +<script type="text/javascript"> + $(document).ready(function() { + var countdown = 20; + var countdown_element = $("#countdown-element"); + if(countdown_element.length === 1) { + intv = window.setInterval(function() { + countdown = countdown - 1; + countdown_element.html(countdown); + }, 1000); + } + }); +</script> +{%endblock%} diff --git a/uploader/templates/phenotypes/select-population.html b/uploader/templates/phenotypes/select-population.html index eafd4a7..48c19b1 100644 --- a/uploader/templates/phenotypes/select-population.html +++ b/uploader/templates/phenotypes/select-population.html @@ -11,18 +11,16 @@ {%block contents%} {{flash_all_messages()}} -<div class="row"> - <p>Select the population for your phenotypes to view and manage the phenotype - datasets that relate to it.</p> -</div> <div class="row"> - {{select_population_form(url_for("species.populations.phenotypes.select_population", - species_id=species.SpeciesId), - populations)}} + {{select_population_form(url_for("species.populations.phenotypes.select_population", species_id=species.SpeciesId), species, populations)}} </div> {%endblock%} {%block sidebarcontents%} {{display_species_card(species)}} {%endblock%} + +{%block javascript%} +<script type="text/javascript" src="/static/js/populations.js"></script> +{%endblock%} diff --git a/uploader/templates/phenotypes/view-dataset.html b/uploader/templates/phenotypes/view-dataset.html index 66de5d8..1fd15b2 100644 --- a/uploader/templates/phenotypes/view-dataset.html +++ b/uploader/templates/phenotypes/view-dataset.html @@ -1,7 +1,6 @@ {%extends "phenotypes/base.html"%} {%from "flash_messages.html" import flash_all_messages%} {%from "macro-table-pagination.html" import table_pagination%} -{%from "populations/macro-display-population-card.html" import display_population_card%} {%block title%}Phenotypes{%endblock%} @@ -46,51 +45,163 @@ </div> <div class="row"> - <p><a href="{{url_for('species.populations.phenotypes.add_phenotypes', - species_id=species.SpeciesId, - population_id=population.Id, - dataset_id=dataset.Id)}}" - title="Add a bunch of phenotypes" - class="btn btn-primary">Add phenotypes</a></p> + <div class="col"> + <a href="{{url_for('species.populations.phenotypes.add_phenotypes', + species_id=species.SpeciesId, + population_id=population.Id, + dataset_id=dataset.Id)}}" + title="Add a bunch of phenotypes" + class="btn btn-primary">Add phenotypes</a> + </div> + + <div class="col"> + <form id="frm-recompute-phenotype-means" + method="POST" + action="{{url_for( + 'species.populations.phenotypes.recompute_means', + species_id=species['SpeciesId'], + population_id=population['Id'], + dataset_id=dataset['Id'])}}" + class="d-flex flex-row align-items-center flex-wrap" + style="display: inline;"> + <input type="submit" + title="Compute/Recompute the means for all phenotypes." + class="btn btn-info" + value="(rec/c)ompute means" + id="submit-frm-recompute-phenotype-means" /> + </form> + </div> + + <div class="col"> + <form id="frm-run-qtlreaper" + method="POST" + action="{{url_for( + 'species.populations.phenotypes.rerun_qtlreaper', + species_id=species['SpeciesId'], + population_id=population['Id'], + dataset_id=dataset['Id'])}}" + class="d-flex flex-row align-items-center flex-wrap" + style="display: inline;"> + <input type="submit" + title="Run/Rerun QTLReaper." + class="btn btn-info" + value="(re)run QTLReaper" + id="submit-frm-rerun-qtlreaper" /> + </form> + </div> </div> <div class="row"> <h2>Phenotype Data</h2> - <p>This dataset has a total of {{phenotype_count}} phenotypes.</p> + <p>Click on any of the phenotypes in the table below to view and edit that + phenotype's data.</p> + <p>Use the search to filter through all the phenotypes and find specific + phenotypes of interest.</p> +</div> - {{table_pagination(start_from, count, phenotype_count, url_for('species.populations.phenotypes.view_dataset', species_id=species.SpeciesId, population_id=population.Id, dataset_id=dataset.Id), "phenotypes")}} - <table class="table"> +<div class="row"> + + <table id="tbl-phenotypes-list" class="table compact stripe cell-border"> <thead> <tr> - <th>#</th> + <th></th> + <th>Index</th> <th>Record</th> <th>Description</th> </tr> </thead> - <tbody> - {%for pheno in phenotypes%} - <tr> - <td>{{pheno.sequence_number}}</td> - <td><a href="{{url_for('species.populations.phenotypes.view_phenotype', - species_id=species.SpeciesId, - population_id=population.Id, - dataset_id=dataset.Id, - xref_id=pheno['pxr.Id'])}}" - title="View phenotype details"> - {{pheno.InbredSetCode}}_{{pheno["pxr.Id"]}}</a></td> - <td>{{pheno.Post_publication_description or pheno.Pre_publication_abbreviation or pheno.Original_description}}</td> - </tr> - {%else%} - <tr><td colspan="5"></td></tr> - {%endfor%} - </tbody> + <tbody></tbody> </table> </div> {%endblock%} -{%block sidebarcontents%} -{{display_population_card(species, population)}} + +{%block javascript%} +<script type="text/javascript" src="/static/js/urls.js"></script> + +<script type="text/javascript"> + $(function() { + var species_id = {{species.SpeciesId}}; + var population_id = {{population.Id}}; + var dataset_id = {{dataset.Id}}; + var dataset_name = "{{dataset.Name}}"; + var data = {{phenotypes | tojson}}; + + var dtPhenotypesList = buildDataTable( + "#tbl-phenotypes-list", + data, + [ + { + data: function(pheno) { + return `<input type="checkbox" name="selected-phenotypes" ` + + `id="chk-selected-phenotypes-${pheno.InbredSetCode}_${pheno.xref_id}" ` + + `value="${pheno.InbredSetCode}_${pheno.xref_id}" ` + + `class="chk-row-select" />` + } + }, + {data: "sequence_number"}, + { + data: function(pheno, type, set, meta) { + var spcs_id = {{species.SpeciesId}}; + var pop_id = {{population.Id}}; + var dtst_id = {{dataset.Id}}; + var url = buildURLFromCurrentURL( + (`/species/${spcs_id}` + + `/populations/${pop_id}` + + `/phenotypes/datasets/${dtst_id}` + + `/phenotype/${pheno.xref_id}`)); + return `<a href="${url.toString()}" target="_blank">` + + `${pheno.InbredSetCode}_${pheno.xref_id}` + + `</a>`; + } + }, + { + data: function(pheno) { + return (pheno.Post_publication_description || + pheno.Original_description || + pheno.Pre_publication_description); + } + } + ], + { + select: "multi+shift", + layout: { + top1Start: { + pageLength: { + text: "Show _MENU_ of _TOTAL_" + } + }, + topStart: "info", + top1End: null + }, + rowId: function(pheno) { + return `${pheno.InbredSetCode}_${pheno.xref_id}`; + } + }); + + + $("#submit-frm-rerun-qtlreaper").on( + "click", + function(event) { + // (Re)run the QTLReaper script for selected phenotypes. + event.preventDefault(); + var form = $("#frm-run-qtlreaper"); + form.find(".dynamically-added-element").remove(); + dtPhenotypesList.rows({selected: true}).nodes().each((node, index) => { + _cloned = $(node).find(".chk-row-select").clone(); + _cloned.removeAttr("id"); + _cloned.removeAttr("class"); + _cloned.attr("style", "display: none;"); + _cloned.attr("data-type", "dynamically-added-element"); + _cloned.attr("class", "dynamically-added-element checkbox"); + _cloned.prop("checked", true); + form.append(_cloned); + }); + form.submit(); + }); + }); +</script> {%endblock%} diff --git a/uploader/templates/phenotypes/view-phenotype.html b/uploader/templates/phenotypes/view-phenotype.html index 99bb8e5..a69b024 100644 --- a/uploader/templates/phenotypes/view-phenotype.html +++ b/uploader/templates/phenotypes/view-phenotype.html @@ -1,31 +1,18 @@ {%extends "phenotypes/base.html"%} {%from "flash_messages.html" import flash_all_messages%} -{%from "populations/macro-display-population-card.html" import display_population_card%} {%block title%}Phenotypes{%endblock%} {%block pagetitle%}Phenotypes{%endblock%} -{%block lvl4_breadcrumbs%} -<li {%if activelink=="view-phenotype"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> - <a href="{{url_for('species.populations.phenotypes.view_phenotype', - species_id=species.SpeciesId, - population_id=population.Id, - dataset_id=dataset.Id, - xref_id=xref_id)}}">View Datasets</a> -</li> -{%endblock%} - {%block contents%} {{flash_all_messages()}} <div class="row"> - <div class="panel panel-default"> - <div class="panel-heading"><strong>Basic Phenotype Details</strong></div> + <div class="card"> + <div class="card-header"> + <h5 class="card-title">Basic Phenotype Details</h5> + </div> <table class="table"> <tbody> @@ -34,11 +21,7 @@ <td>{{phenotype.Post_publication_description or phenotype.Pre_publication_abbreviation or phenotype.Original_description}} </tr> <tr> - <td><strong>Cross-Reference ID</strong></td> - <td>{{phenotype.xref_id}}</td> - </tr> - <tr> - <td><strong>Collation</strong></td> + <td><strong>Database</strong></td> <td>{{dataset.FullName}}</td> </tr> <tr> @@ -47,38 +30,71 @@ </tr> </tbody> </table> + </div> +</div> - <form action="#edit-delete-phenotype" - method="POST" - id="frm-delete-phenotype"> +<div class="row" style="margin-top:5px;"> + <div class="card"> + <div class="card-header"> + <h5 class="card-title">Publication Details</h5> + </div> - <input type="hidden" name="species_id" value="{{species.SpeciesId}}" /> - <input type="hidden" name="population_id" value="{{population.Id}}" /> - <input type="hidden" name="dataset_id" value="{{dataset.Id}}" /> - <input type="hidden" name="phenotype_id" value="{{phenotype.Id}}" /> + <div class="card-body"> + <table class="table"> + <tbody> + <tr> + {%for key in ("PubMed_ID", "Authors", "Title", "Journal"):%} + <tr> + <td><strong>{{key}}</strong></td> + <td>{{publication.get(key, "")}}</td> + </tr> + {%else%} + <tr> + <td colspan="2" class="text-muted"> + <span class="glyphicon glyphicon-exclamation-sign"></span> + No publication data found. + </td> + </tr> + {%endfor%} + </tr> + </tbody> + </table> + <div style="text-align: right;"> + <a href="{{url_for('publications.edit_publication', publication_id=publication.Id, next=next)}}" + class="btn btn-info">edit</a> + <a href="#" class="btn btn-danger not-implemented">change</a> + </div> + </div> + </div> +</div> - <div class="btn-group btn-group-justified"> - <div class="btn-group"> - {%if "group:resource:edit-resource" in privileges%} - <input type="submit" - title="Edit the values for the phenotype. This is meant to be used when you need to update only a few values." - class="btn btn-primary not-implemented" - value="edit" /> - {%endif%} - </div> - <div class="btn-group"></div> - <div class="btn-group"> - {%if "group:resource:delete-resource" in privileges%} - <input type="submit" - title="Delete the entire phenotype. This is useful when you need to change data for most or all of the fields for this phenotype." - class="btn btn-danger not-implemented" - value="delete" /> - {%endif%} - </div> - </div> - </form> +{%if "group:resource:edit-resource" in privileges +or "group:resource:delete-resource" in privileges%} +<div class="row"> + <div class="btn-group btn-group-justified"> + <div class="btn-group"> + {%if "group:resource:edit-resource" in privileges%} + <a href="{{url_for('species.populations.phenotypes.edit_phenotype_data', + species_id=species.SpeciesId, + population_id=population.Id, + dataset_id=dataset.Id, + xref_id=xref_id)}}" + title="Edit the values for the phenotype. This is meant to be used when you need to update only a few values." + class="btn btn-primary">Edit</a> + {%endif%} + </div> + <div class="btn-group"></div> + <div class="btn-group"> + {%if "group:resource:delete-resource" in privileges%} + <a href="#" + title="Delete the entire phenotype. This is useful when you need to change data for most or all of the fields for this phenotype." + class="btn btn-danger not-implemented" + disabled="disabled">delete</a> + {%endif%} + </div> </div> </div> +{%endif%} <div class="row"> <div class="panel panel-default"> @@ -90,9 +106,10 @@ <th>#</th> <th>Sample</th> <th>Value</th> - <th>Symbol</th> + {%if has_se%} <th>SE</th> <th>N</th> + {%endif%} </tr> </thead> @@ -102,9 +119,10 @@ <td>{{loop.index}}</td> <td>{{item.StrainName}}</td> <td>{{item.value}}</td> - <td>{{item.Symbol or "-"}}</td> + {%if has_se%} <td>{{item.error or "-"}}</td> <td>{{item.count or "-"}}</td> + {%endif%} </tr> {%endfor%} </tbody> @@ -120,7 +138,3 @@ </div> {%endblock%} - -{%block sidebarcontents%} -{{display_population_card(species, population)}} -{%endblock%} diff --git a/uploader/templates/platforms/base.html b/uploader/templates/platforms/base.html index dac965f..d4f3686 100644 --- a/uploader/templates/platforms/base.html +++ b/uploader/templates/platforms/base.html @@ -1,13 +1,17 @@ {%extends "species/base.html"%} +{%from "species/macro-display-species-card.html" import display_sui_species_card%} -{%block lvl3_breadcrumbs%} -<li {%if activelink=="platforms"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> - <a href="{{url_for('species.populations.platforms.index')}}"> - Sequencing Platforms</a> +{%block breadcrumbs%} +{{super()}} +<li class="breadcrumb-item"> + <a href="{{url_for('species.platforms.list_platforms', + species_id=species['SpeciesId'])}}"> + Platforms + </a> </li> -{%block lvl4_breadcrumbs%}{%endblock%} +{%endblock%} + + +{%block sidebarcontents%} +{{display_sui_species_card(species)}} {%endblock%} diff --git a/uploader/templates/platforms/create-platform.html b/uploader/templates/platforms/create-platform.html index 0866d5e..3a62472 100644 --- a/uploader/templates/platforms/create-platform.html +++ b/uploader/templates/platforms/create-platform.html @@ -1,19 +1,15 @@ {%extends "platforms/base.html"%} {%from "flash_messages.html" import flash_all_messages%} -{%from "species/macro-display-species-card.html" import display_species_card%} {%block title%}Platforms — Create Platforms{%endblock%} -{%block pagetitle%}Platforms — Create Platforms{%endblock%} - -{%block lvl3_breadcrumbs%} -<li {%if activelink=="create-platform"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> +{%block breadcrumbs%} +{{super()}} +<li class="breadcrumb-item"> <a href="{{url_for('species.platforms.create_platform', - species_id=species.SpeciesId)}}">create platform</a> + species_id=species['SpeciesId'])}}"> + Create + </a> </li> {%endblock%} @@ -118,7 +114,3 @@ </form> </div> {%endblock%} - -{%block sidebarcontents%} -{{display_species_card(species)}} -{%endblock%} diff --git a/uploader/templates/platforms/index.html b/uploader/templates/platforms/index.html index 35b6464..555b444 100644 --- a/uploader/templates/platforms/index.html +++ b/uploader/templates/platforms/index.html @@ -19,3 +19,7 @@ {{select_species_form(url_for("species.platforms.index"), species)}} </div> {%endblock%} + +{%block javascript%} +<script type="text/javascript" src="/static/js/species.js"></script> +{%endblock%} diff --git a/uploader/templates/platforms/list-platforms.html b/uploader/templates/platforms/list-platforms.html index 718dd1d..db14745 100644 --- a/uploader/templates/platforms/list-platforms.html +++ b/uploader/templates/platforms/list-platforms.html @@ -1,6 +1,5 @@ {%extends "platforms/base.html"%} {%from "flash_messages.html" import flash_all_messages%} -{%from "species/macro-display-species-card.html" import display_species_card%} {%block title%}Platforms — List Platforms{%endblock%} @@ -58,7 +57,7 @@ <table class="table"> <thead> <tr> - <th>#</th> + <th></th> <th>Platform Name</th> <th><a href="https://www.ncbi.nlm.nih.gov/geo/browse/?view=platforms&tax={{species.TaxonomyId}}" title="Gene Expression Omnibus: Platforms section" @@ -87,7 +86,3 @@ {%endif%} </div> {%endblock%} - -{%block sidebarcontents%} -{{display_species_card(species)}} -{%endblock%} diff --git a/uploader/templates/populations/base.html b/uploader/templates/populations/base.html index 9db8083..24cacc2 100644 --- a/uploader/templates/populations/base.html +++ b/uploader/templates/populations/base.html @@ -1,18 +1,20 @@ {%extends "species/base.html"%} +{%from "populations/macro-display-population-card.html" import display_sui_population_card%} -{%block lvl2_breadcrumbs%} -<li {%if activelink=="populations"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> - {%if population is mapping%} +{%block breadcrumbs%} +{{super()}} +{%if population%} +<li class="breadcrumb-item"> <a href="{{url_for('species.populations.view_population', - species_id=species.SpeciesId, - population_id=population.Id)}}">{{population.Name}}</a> - {%else%} - <a href="{{url_for('species.populations.index')}}">Populations</a> - {%endif%} + species_id=species['SpeciesId'], + population_id=population['Id'])}}"> + {{population["Name"]}} + </a> </li> -{%block lvl3_breadcrumbs%}{%endblock%} +{%endif%} +{%endblock%} + + +{%block sidebarcontents%} +{{display_sui_population_card(species, population)}} {%endblock%} diff --git a/uploader/templates/populations/create-population.html b/uploader/templates/populations/create-population.html index b05ce37..d5359f5 100644 --- a/uploader/templates/populations/create-population.html +++ b/uploader/templates/populations/create-population.html @@ -1,20 +1,16 @@ {%extends "populations/base.html"%} {%from "flash_messages.html" import flash_all_messages%} -{%from "species/macro-select-species.html" import select_species_form%} -{%from "species/macro-display-species-card.html" import display_species_card%} {%block title%}Create Population{%endblock%} {%block pagetitle%}Create Population{%endblock%} -{%block lvl3_breadcrumbs%} -<li {%if activelink=="create-population"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> +{%block breadcrumbs%} +{{super()}} +<li class="breadcrumb-item"> <a href="{{url_for('species.populations.create_population', - species_id=species.SpeciesId)}}">create population</a> + species_id=species['SpeciesId'])}}"> + create population</a> </li> {%endblock%} @@ -37,12 +33,15 @@ <div class="row"> <form method="POST" action="{{url_for('species.populations.create_population', - species_id=species.SpeciesId)}}"> + species_id=species.SpeciesId, + return_to=return_to)}}"> <legend>Create Population</legend> {{flash_all_messages()}} + <input type="hidden" name="return_to" value="{{return_to}}"> + <div {%if errors.population_fullname%} class="form-group has-error" {%else%} @@ -107,9 +106,12 @@ value="{{error_values.population_code or ''}}" class="form-control" /> <small class="form-text text-muted"> - <p class="text-danger"> - <span class="glyphicon glyphicon-exclamation-sign"></span> - What is this field is for? Confirm with Arthur and the rest. + <p class="form-text text-muted"> + This is a 3-character code for your population, that is prepended to + the phenotype identifiers. e.g. For the "BXD Family" population, the + code is "BXD" and therefore, the phenotype identifiers for the + population look like the following examples: <em>BXD_10148</em>, + <em>BXD_10180</em>, <em>BXD_10197</em>, etc. </p> </small> </div> @@ -148,24 +150,35 @@ {%else%} class="form-group" {%endif%}> - <label for="select-population-family" class="form-label">Family</label> - <select id="select-population-family" - name="population_family" - class="form-control" - required="required"> - <option value="">Please select a family</option> + <label for="txt-population-family" class="form-label">Family</label> + <input type="text" + id="txt-population-family" + name="population_family" + class="form-control" + list="families-list" /> + <datalist id="families-list"> {%for family in families%} - <option value="{{family}}" - {%if error_values.population_family == family%} - selected="selected" - {%endif%}>{{family}}</option> + <option value="{{family}}">{{family}}</option> {%endfor%} - </select> + </datalist> <small class="form-text text-muted"> <p> - This is a rough grouping of the populations in GeneNetwork into lists - of common types of populations. - </p> + This is <strong>optional</strong> metadata. It is used to group + populations into "families" for presentation in the menus. + {%if families | length > 0%} + Examples of currently existing families are: + <ul> + {%for family in families[0:7]%} + <li>{{family}}</li> + {%endfor%} + <li>etc.</li> + </ul> + {%endif%} + + You can + {%if families|length>0%} select from existing families, or {%endif%} + create a new family by typing in the input box above. You can also + leave the family blank.</p> </small> </div> @@ -246,7 +259,3 @@ </form> </div> {%endblock%} - -{%block sidebarcontents%} -{{display_species_card(species)}} -{%endblock%} diff --git a/uploader/templates/populations/index.html b/uploader/templates/populations/index.html index 4354e02..d2bee77 100644 --- a/uploader/templates/populations/index.html +++ b/uploader/templates/populations/index.html @@ -22,3 +22,7 @@ {{select_species_form(url_for("species.populations.index"), species)}} </div> {%endblock%} + +{%block javascript%} +<script type="text/javascript" src="/static/js/species.js"></script> +{%endblock%} diff --git a/uploader/templates/populations/list-populations.html b/uploader/templates/populations/list-populations.html index 7c7145f..a092e34 100644 --- a/uploader/templates/populations/list-populations.html +++ b/uploader/templates/populations/list-populations.html @@ -51,10 +51,10 @@ <caption>Populations for {{species.FullName}}</caption> <thead> <tr> - <th>#</th> + <th></th> <th>Name</th> <th>Full Name</th> - <th>Description</th> + <th>Information</th> </tr> </thead> @@ -71,7 +71,10 @@ </a> </td> <td>{{population.FullName}}</td> - <td>{{population.Description}}</td> + <td><a href="https://info.genenetwork.org/species/source.php?SpeciesName={{species.Name}}&InbredSetName={{population.Name}}" + title="Link to detailed information on this population." + class="btn btn-info" + target="_blank">info</a></td> </tr> {%else%} <tr> diff --git a/uploader/templates/populations/macro-display-population-card.html b/uploader/templates/populations/macro-display-population-card.html index 79f7925..f3040ea 100644 --- a/uploader/templates/populations/macro-display-population-card.html +++ b/uploader/templates/populations/macro-display-population-card.html @@ -1,4 +1,4 @@ -{%from "species/macro-display-species-card.html" import display_species_card%} +{%from "species/macro-display-species-card.html" import display_species_card,display_sui_species_card%} {%macro display_population_card(species, population)%} {{display_species_card(species)}} @@ -33,14 +33,47 @@ <td>Family</td> <td>{{population.Family}}</td> </tr> - - <tr> - <td>Description</td> - <td>{{(population.Description or "")[0:500]}}…</td> - </tr> </tbody> </table> </div> </div> </div> {%endmacro%} + + +{%macro display_sui_population_card(species, population)%} +{{display_sui_species_card(species)}} +{%if population%} +<div class="row"> + <table class="table"> + <caption>Current population</caption> + <tbody> + <tr> + <th>Name</th> + <td>{{population.Name}}</td> + </tr> + + <tr> + <th>Full Name</th> + <td>{{population.FullName}}</td> + </tr> + + <tr> + <th>Code</th> + <td>{{population.InbredSetCode}}</td> + </tr> + + <tr> + <th>Genetic Type</th> + <td>{{population.GeneticType}}</td> + </tr> + + <tr> + <th>Family</th> + <td>{{population.Family}}</td> + </tr> + </tbody> + </table> +</div> +{%endif%} +{%endmacro%} diff --git a/uploader/templates/populations/macro-select-population.html b/uploader/templates/populations/macro-select-population.html index af4fd3a..14b0510 100644 --- a/uploader/templates/populations/macro-select-population.html +++ b/uploader/templates/populations/macro-select-population.html @@ -1,30 +1,52 @@ -{%macro select_population_form(form_action, populations)%} -<form method="GET" action="{{form_action}}"> - <legend>Select Population</legend> - - <div class="form-group"> - <label for="select-population" class="form-label">Select Population</label> - <select id="select-population" - name="population_id" - class="form-control" - required="required"> - <option value="">Select Population</option> - {%for family in populations%} - <optgroup {%if family[0][1] is not none%} - label="{{family[0][1]}}" - {%else%} - label="Undefined" - {%endif%}> - {%for population in family[1]%} - <option value="{{population.Id}}">{{population.FullName}}</option> - {%endfor%} - </optgroup> - {%endfor%} - </select> +{%from "macro-step-indicator.html" import step_indicator%} + +{%macro select_population_form(form_action, species, populations)%} +<form method="GET" action="{{form_action}}" class="form-horizontal"> + + <h2>{{step_indicator("2")}} What population do you want to work with?</h2> + + {%if populations | length != 0%} + + <p class="form-text">Search for, and select the population from the table + below and click "Continue"</p> + + <div class="radio"> + <label class="control-label" for="rdo-cant-find-population"> + <input type="radio" id="rdo-cant-find-population" + name="population_id" value="CREATE-POPULATION" /> + I cannot find the population I want — create it! + </label> + </div> + + <div class="col-sm-offset-10 col-sm-2"> + <input type="submit" value="continue" class="btn btn-primary" /> + </div> + + <div style="margin-top:3em;"> + <table id="tbl-select-population" class="table compact stripe" + data-populations-list='{{populations | tojson}}'> + <thead> + <tr> + <th></th> + <th>Population</th> + </tr> + </thead> + + <tbody></tbody> + </table> </div> - <div class="form-group"> - <input type="submit" value="Select" class="btn btn-primary" /> + {%else%} + <p class="form-text"> + There are no populations currently defined for {{species['FullName']}} + ({{species['SpeciesName']}}).<br /> + Click "Continue" to create the first!</p> + <input type="hidden" name="population_id" value="CREATE-POPULATION" /> + + <div class="col-sm-offset-10 col-sm-2"> + <input type="submit" value="continue" class="btn btn-primary" /> </div> + {%endif%} + </form> {%endmacro%} diff --git a/uploader/templates/populations/view-population.html b/uploader/templates/populations/view-population.html index b23caeb..ac89bc7 100644 --- a/uploader/templates/populations/view-population.html +++ b/uploader/templates/populations/view-population.html @@ -1,102 +1,127 @@ {%extends "populations/base.html"%} -{%from "flash_messages.html" import flash_all_messages%} -{%from "species/macro-select-species.html" import select_species_form%} -{%from "species/macro-display-species-card.html" import display_species_card%} - -{%block title%}Populations{%endblock%} - -{%block pagetitle%}Populations{%endblock%} - -{%block lvl3_breadcrumbs%} -<li {%if activelink=="view-population"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> - <a href="{{url_for('species.populations.view_population', - species_id=species.SpeciesId, - population_id=population.InbredSetId)}}">view</a> -</li> -{%endblock%} - +{%from "macro-step-indicator.html" import step_indicator%} +{%from "populations/macro-display-population-card.html" import display_sui_population_card%} {%block contents%} <div class="row"> - <h2>Population Details</h2> - - {{flash_all_messages()}} - - <dl> - <dt>Name</dt> - <dd>{{population.Name}}</dd> - - <dt>FullName</dt> - <dd>{{population.FullName}}</dd> - - <dt>Code</dt> - <dd>{{population.InbredSetCode}}</dd> - - <dt>Genetic Type</dt> - <dd>{{population.GeneticType}}</dd> - - <dt>Family</dt> - <dd>{{population.Family}}</dd> - - <dt>Description</dt> - <dd><pre>{{population.Description or "-"}}</pre></dd> - </dl> + <h2 class="heading">{{population.FullName}} ({{population.Name}})</h2> </div> <div class="row"> - … maybe provide a way to organise populations in the same family here … + <ul class="nav nav-tabs" id="population-actions"> + <li class="nav-item presentation"> + <button class="nav-link" + id="samples-tab" + data-bs-toggle="tab" + data-bs-target="#samples-content" + type="button" + role="tab" + aria-controls="samples-content" + aria-selected="true">Samples</button></li> + <li class="nav-item presentation"> + <button class="nav-link active" + id="phenotypes-tab" + data-bs-toggle="tab" + data-bs-target="#phenotypes-content" + type="button" + role="tab" + aria-controls="phenotypes-content" + aria-selected="false">Phenotypes</button></li> + {%if view_under_construction%} + <li class="nav-item presentation"> + <button class="nav-link" + id="genotypes-tab" + data-bs-toggle="tab" + data-bs-target="#genotypes-content" + type="button" + role="tab" + aria-controls="genotypes-content" + aria-selected="false">Genotypes</button></li> + <li class="nav-item presentation"> + <button class="nav-link" + id="expression-data-tab" + data-bs-toggle="tab" + data-bs-target="#expression-data-content" + type="button" + role="tab" + aria-controls="expression-data-content" + aria-selected="false">Expression-Data</button></li> + {%endif%} + </ul> </div> <div class="row"> - <h3>Actions</h3> - - <p> - Click any of the following links to use this population in performing the - subsequent operations. - </p> - - <nav class="nav"> - <ul> - <li> - <a href="{{url_for('species.populations.samples.list_samples', - species_id=species.SpeciesId, - population_id=population.Id)}}" - title="Manage samples: Add new or delete existing."> - manage samples</a> - </li> - <li> - <a href="{{url_for('species.populations.genotypes.list_genotypes', - species_id=species.SpeciesId, - population_id=population.Id)}}" - title="Manage genotypes for {{species.FullName}}">Manage Genotypes</a> - </li> - <li> - <a href="{{url_for('species.populations.phenotypes.list_datasets', - species_id=species.SpeciesId, - population_id=population.Id)}}" - title="Manage phenotype data.">manage phenotype data</a> - </li> - <li> - <a href="#" title="Manage expression data" - class="not-implemented">manage expression data</a> - </li> - <li> - <a href="#" title="Manage individual data" - class="not-implemented">manage individual data</a> - </li> - <li> - <a href="#" title="Manage RNA-Seq data" - class="not-implemented">manage RNA-Seq data</a> - </li> - </ul> - </nav> + <div class="tab-content" id="populations-tabs-content"> + <div class="tab-pane fade" + id="samples-content" + role="tabpanel" + aria-labelledby="samples-content-tab"> + <p>Think of a <strong>"sample"</strong> as say a single case or individual + in the experiment. It could even be a single strain (where applicable). + </p> + <p>This is a convenience feature for when you want to upload phenotypes to + the system, but do not have the genotypes data ready yet.</p> + <a href="{{url_for('species.populations.samples.list_samples', + species_id=species.SpeciesId, + population_id=population.Id)}}" + title="View and upload samples for population '{{population['Name']}}'" + class="btn btn-primary">Manage Samples</a> + </div> + + <div class="tab-pane fade show active" + id="phenotypes-content" + role="tabpanel" + aria-labelledby="phenotypes-content-tab"> + + <div class="row" style="margin-top: 1em;"> + <h3> Phenotypes in Population "{{population.FullName}} ({{population.Name}})"</h3> + + <p>To view existing phenotype traits, or upload new ones, click the button below:</p> + + <div class="row"> + <div class="col"> + <a href="{{url_for( + 'species.populations.phenotypes.list_datasets', + species_id=species.SpeciesId, + population_id=population.Id)}}" + title="View and upload phenotype traits" + class="btn btn-primary">Phenotypes</a> + </div> + </div> + </div> + </div> + + <div class="tab-pane fade" + id="genotypes-content" + role="tabpanel" + aria-labelledby="genotypes-content-tab"> + <p>This allows you to upload the data that concerns your genotypes.</p> + <p>Any samples/individuals/cases/strains that do not already exist in the + system will be added. This does not delete any existing data.</p> + <a href="{{url_for('species.populations.genotypes.list_genotypes', + species_id=species.SpeciesId, + population_id=population.Id)}}" + title="Upload genotype information for the '{{population.FullName}}' population of the '{{species.FullName}}' species." + class="btn btn-primary">upload genotypes</a> + </div> + <div class="tab-pane fade" id="expression-data-content" role="tabpanel" aria-labelledby="expression-data-content-tab"> + <p>Upload expression data (mRNA data) for this population.</p> + <a href="#" title="" class="btn btn-primary">upload genotypes</a> + </div> + </div> </div> {%endblock%} {%block sidebarcontents%} -{{display_species_card(species)}} +<div class="row"> + <p>Each tab presents a feature that's available at the population level. + Select the tab that allows you to continue with your task.</p> +</div> +{{super()}} +{%endblock%} + + + + +{%block javascript%} {%endblock%} diff --git a/uploader/templates/publications/base.html b/uploader/templates/publications/base.html new file mode 100644 index 0000000..de0a350 --- /dev/null +++ b/uploader/templates/publications/base.html @@ -0,0 +1,9 @@ +{%extends "base.html"%} + +{%block breadcrumbs%} +{{super()}} +<li class="breadcrumb-item"> + <a href="{{url_for('publications.index')}}" + title="Manage publications">Publications</a> +</li> +{%endblock%} diff --git a/uploader/templates/publications/create-publication.html b/uploader/templates/publications/create-publication.html new file mode 100644 index 0000000..fb0127d --- /dev/null +++ b/uploader/templates/publications/create-publication.html @@ -0,0 +1,200 @@ +{%extends "publications/base.html"%} +{%from "flash_messages.html" import flash_all_messages%} + +{%block title%}View Publication{%endblock%} + +{%block breadcrumbs%} +{{super()}} +<li class="breadcrumb-item"> + <a href="{{url_for('publications.create_publication', **get_args)}}" + title="Manage publications">create publication</a> +</li> +{%endblock%} + + +{%block contents%} +{{flash_all_messages()}} + +<div class="row"> + <form id="frm-create-publication" + method="POST" + action="{{url_for('publications.create_publication', **get_args)}}" + class="form-horizontal"> + + <div class="row mb-3"> + <label for="txt-pubmed-id" class="col-sm-2 col-form-label"> + PubMed ID</label> + <div class="col-sm-10"> + <div class="input-group"> + <input type="text" + id="txt-pubmed-id" + name="pubmed-id" + class="form-control"/> + <div class="input-group-text"> + <button class="btn btn-outline-primary" + id="btn-search-pubmed-id">search</button> + </div> + </div> + <span id="search-pubmed-id-error" + class="form-text text-muted text-danger visually-hidden"> + </span> + <span class="form-text text-muted">This is the publication's ID on + <a href="https://pubmed.ncbi.nlm.nih.gov/" + title="Link to NCBI's PubMed service">NCBI's Pubmed Service</a> + </span> + </div> + </div> + + <div class="row mb-3"> + <label for="txt-publication-title" class="col-sm-2 col-form-label"> + Title</label> + <div class="col-sm-10"> + <input type="text" + id="txt-publication-title" + name="publication-title" + class="form-control" /> + <span class="form-text text-muted">Provide the publication's title here.</span> + </div> + </div> + + <div class="row mb-3"> + <label for="txt-publication-authors" class="col-sm-2 col-form-label"> + Authors</label> + <div class="col-sm-10"> + <input type="text" + id="txt-publication-authors" + name="publication-authors" + required="required" + class="form-control" /> + <span class="form-text text-muted"> + A publication <strong>MUST</strong> have an author. You <em>must</em> + provide a value for the authors field. + </span> + </div> + </div> + + <div class="row mb-3"> + <label for="txt-publication-journal" class="col-sm-2 col-form-label"> + Journal</label> + <div class="col-sm-10"> + <input type="text" + id="txt-publication-journal" + name="publication-journal" + class="form-control" /> + <span class="form-text text-muted">Provide the name journal where the + publication was done, here.</span> + </div> + </div> + + <div class="row mb-3"> + <label for="select-publication-month" + class="col-sm-2 col-form-label"> + Month</label> + <div class="col-sm-4"> + <select class="form-control" + id="select-publication-month" + name="publication-month"> + <option value="">Select a month</option> + <option value="january">January</option> + <option value="february">February</option> + <option value="march">March</option> + <option value="april">April</option> + <option value="may">May</option> + <option value="june">June</option> + <option value="july">July</option> + <option value="august">August</option> + <option value="september">September</option> + <option value="october">October</option> + <option value="november">November</option> + <option value="december">December</option> + </select> + <span class="form-text text-muted">Month of publication</span> + </div> + + <label for="txt-publication-year" + class="col-sm-2 col-form-label"> + Year</label> + <div class="col-sm-4"> + <input type="number" + id="txt-publication-year" + name="publication-year" + class="form-control" + min="1960" /> + <span class="form-text text-muted">Year of publication</span> + </div> + </div> + + <div class="row mb-3"> + <label for="txt-publication-volume" + class="col-sm-2 col-form-label"> + Volume</label> + <div class="col-sm-4"> + <input type="text" + id="txt-publication-volume" + name="publication-volume" + class="form-control"> + <span class="form-text text-muted">Journal volume</span> + </div> + + <label for="txt-publication-pages" + class="col-sm-2 col-form-label"> + Pages</label> + <div class="col-sm-4"> + <input type="text" + id="txt-publication-pages" + name="publication-pages" + class="form-control" /> + <span class="form-text text-muted">Journal pages for the publication</span> + </div> + </div> + + <div class="row mb-3"> + <label for="txt-abstract" class="col-sm-2 col-form-label">Abstract</label> + <div class="col-sm-10"> + <textarea id="txt-publication-abstract" + name="publication-abstract" + class="form-control" + rows="7"></textarea> + </div> + </div> + + <div class="row"> + <div class="col"> + <input type="submit" + class="btn btn-primary" + value="create publication" /> + </div> + <div class="col"> + <input type="reset" class="btn btn-danger" value="reset form" /> + </div> + </div> + +</form> +</div> + +{%endblock%} + + +{%block javascript%} +<script type="text/javascript" src="/static/js/pubmed.js"></script> +<script type="text/javascript"> + $(function() { + $("#btn-search-pubmed-id").on("click", (event) => { + event.preventDefault(); + var search_button = event.target; + var pubmed_id = $("#txt-pubmed-id").val().trim(); + remove_class($("#txt-pubmed-id").parent(), "has-error"); + if(pubmed_id == "") { + add_class($("#txt-pubmed-id").parent(), "has-error"); + return false; + } + + search_button.disabled = true; + // Fetch publication details + fetch_publication_details(pubmed_id, + [() => {search_button.disabled = false;}]); + return false; + }); + }); +</script> +{%endblock%} diff --git a/uploader/templates/publications/delete-publication-success.html b/uploader/templates/publications/delete-publication-success.html new file mode 100644 index 0000000..53a44ec --- /dev/null +++ b/uploader/templates/publications/delete-publication-success.html @@ -0,0 +1,18 @@ +{%extends "publications/base.html"%} +{%from "flash_messages.html" import flash_all_messages%} + +{%block title%}View Publication{%endblock%} + +{%block pagetitle%}View Publication{%endblock%} + + +{%block contents%} +{{flash_all_messages()}} +{%endblock%} + + +{%block javascript%} +<script type="text/javascript"> + $(function() {}); +</script> +{%endblock%} diff --git a/uploader/templates/publications/delete-publication.html b/uploader/templates/publications/delete-publication.html new file mode 100644 index 0000000..a9c8c7c --- /dev/null +++ b/uploader/templates/publications/delete-publication.html @@ -0,0 +1,95 @@ +{%extends "publications/base.html"%} +{%from "flash_messages.html" import flash_all_messages%} + +{%block title%}Delete Publication{%endblock%} + +{%block breadcrumbs%} +{{super()}} +<li class="breadcrumb-item"> + <a href="{{url_for('publications.delete_publication', + publication_id=publication.Id)}}" + title="Manage publications">delete publication</a> +</li> +{%endblock%} + + +{%block contents%} +{{flash_all_messages()}} +<div class="row"> + <p>You are about to delete the publication with the following details:</p> +</div> + +<div class="row"> + <table class="table"> + <tr> + <th>Linked Phenotypes</th> + <td>{{linked_phenotypes | count}}</td> + </tr> + <tr> + <th>PubMed</th> + <td> + {%if publication.PubMed_ID%} + <a href="https://pubmed.ncbi.nlm.nih.gov/{{publication.PubMed_ID}}/" + target="_blank">{{publication.PubMed_ID}}</a> + {%else%} + — + {%endif%} + </td> + </tr> + <tr> + <th>Title</th> + <td>{{publication.Title or "—"}}</td> + </tr> + <tr> + <th>Authors</th> + <td>{{publication.Authors or "—"}}</td> + </tr> + <tr> + <th>Journal</th> + <td>{{publication.Journal or "—"}}</td> + </tr> + <tr> + <th>Published</th> + <td>{{publication.Month or ""}} {{publication.Year or "—"}}</td> + </tr> + <tr> + <th>Volume</th> + <td>{{publication.Volume or "—"}}</td> + </tr> + <tr> + <th>Pages</th> + <td>{{publication.Pages or "—"}}</td> + </tr> + <tr> + <th>Abstract</th> + <td> + {%for line in (publication.Abstract or "—").replace("\r\n", "<br />").replace("\n", "<br />").split("<br />")%} + <p>{{line}}</p> + {%endfor%} + </td> + </tr> + </table> +</div> + +<div class="row"> + <p>If you are sure that is what you want, click the button below to delete the + publication</p> + <p class="form-text text-small"> + <small>You will not be able to recover the data if you click + delete below.</small></p> + + <form action="{{url_for('publications.delete_publication', publication_id=publication_id)}}" + method="POST"> + <div class="form-group"> + <input type="submit" value="delete" class="btn btn-danger" /> + </div> + </form> +</div> +{%endblock%} + + +{%block javascript%} +<script type="text/javascript"> + $(function() {}); +</script> +{%endblock%} diff --git a/uploader/templates/publications/edit-publication.html b/uploader/templates/publications/edit-publication.html new file mode 100644 index 0000000..314a78c --- /dev/null +++ b/uploader/templates/publications/edit-publication.html @@ -0,0 +1,203 @@ +{%extends "publications/base.html"%} +{%from "flash_messages.html" import flash_all_messages%} + +{%block title%}Edit Publication{%endblock%} + +{%block breadcrumbs%} +{{super()}} +<li class="breadcrumb-item"> + <a href="{{url_for('publications.edit_publication', + publication_id=publication.Id)}}" + title="Edit the publication's details">edit publication</a> +</li> +{%endblock%} + + +{%block contents%} +{{flash_all_messages()}} + +<div class="row"> + <form id="frm-create-publication" + method="POST" + action="{{url_for('publications.edit_publication', + publication_id=publication_id, + next=request.args.get('next', ''))}}" + class="form-horizontal"> + + <div class="row mb-3"> + <label for="txt-pubmed-id" class="col-sm-2 col-form-label"> + PubMed ID</label> + <div class="col-sm-10"> + <div class="input-group"> + <input type="text" + id="txt-pubmed-id" + name="pubmed-id" + value="{{publication.PubMed_ID or ''}}" + class="form-control" /> + <div class="input-group-text"> + <button class="btn btn-outline-primary" + id="btn-search-pubmed-id">search</button> + </div> + </div> + <span id="search-pubmed-id-error" + class="form-text text-muted text-danger visually-hidden"> + </span> + <span class="form-text text-muted">This is the publication's ID on + <a href="https://pubmed.ncbi.nlm.nih.gov/" + title="Link to NCBI's PubMed service">NCBI's Pubmed Service</a> + </span> + </div> + </div> + + <div class="row mb-3"> + <label for="txt-publication-title" class="col-sm-2 col-form-label"> + Title</label> + <div class="col-sm-10"> + <input type="text" + id="txt-publication-title" + name="publication-title" + value="{{publication.Title}}" + class="form-control" /> + <span class="form-text text-muted">Provide the publication's title here.</span> + </div> + </div> + + <div class="row mb-3"> + <label for="txt-publication-authors" class="col-sm-2 col-form-label"> + Authors</label> + <div class="col-sm-10"> + <input type="text" + id="txt-publication-authors" + name="publication-authors" + value="{{publication.Authors}}" + required="required" + class="form-control" /> + <span class="form-text text-muted"> + A publication <strong>MUST</strong> have an author. You <em>must</em> + provide a value for the authors field. + </span> + </div> + </div> + + <div class="row mb-3"> + <label for="txt-publication-journal" class="col-sm-2 col-form-label"> + Journal</label> + <div class="col-sm-10"> + <input type="text" + id="txt-publication-journal" + name="publication-journal" + value="{{publication.Journal}}" + class="form-control" /> + <span class="form-text text-muted">Provide the name journal where the + publication was done, here.</span> + </div> + </div> + + <div class="row mb-3"> + <label for="select-publication-month" + class="col-sm-2 col-form-label"> + Month</label> + <div class="col-sm-4"> + <select class="form-control" + id="select-publication-month" + name="publication-month"> + <option value="">Select a month</option> + {%for month in ("january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"):%} + <option value="{{month}}" + {%if publication.Month | lower == month %} + selected="selected" + {%endif%}> + {{month | title}} + </option> + {%endfor%} + </select> + <span class="form-text text-muted">Month of publication</span> + </div> + + <label for="txt-publication-year" + class="col-sm-2 col-form-label"> + Year</label> + <div class="col-sm-4"> + <input type="number" + id="txt-publication-year" + name="publication-year" + value="{{publication.Year}}" + class="form-control" + min="1960" /> + <span class="form-text text-muted">Year of publication</span> + </div> + </div> + + <div class="row mb-3"> + <label for="txt-publication-volume" + class="col-sm-2 col-form-label"> + Volume</label> + <div class="col-sm-4"> + <input type="text" + id="txt-publication-volume" + name="publication-volume" + value="{{publication.Volume}}" + class="form-control"> + <span class="form-text text-muted">Journal volume</span> + </div> + + <label for="txt-publication-pages" + class="col-sm-2 col-form-label"> + Pages</label> + <div class="col-sm-4"> + <input type="text" + id="txt-publication-pages" + name="publication-pages" + value="{{publication.Pages}}" + class="form-control" /> + <span class="form-text text-muted">Journal pages for the publication</span> + </div> + </div> + + <div class="row mb-3"> + <label for="txt-abstract" class="col-sm-2 col-form-label">Abstract</label> + <div class="col-sm-10"> + <textarea id="txt-publication-abstract" + name="publication-abstract" + class="form-control" + rows="7">{{publication.Abstract or ""}}</textarea> + </div> + </div> + + <div class="row mb-3"> + <div class="col-sm-2"></div> + <div class="col-sm-8"> + <input type="submit" class="btn btn-primary" value="Save" /> + <input type="reset" class="btn btn-danger" /> + </div> + </div> + +</form> +</div> + +{%endblock%} + + +{%block javascript%} +<script type="text/javascript" src="/static/js/pubmed.js"></script> +<script type="text/javascript"> + $(function() { + $("#btn-search-pubmed-id").on("click", (event) => { + event.preventDefault(); + var search_button = event.target; + var pubmed_id = $("#txt-pubmed-id").val().trim(); + remove_class($("#txt-pubmed-id").parent(), "has-error"); + if(pubmed_id == "") { + add_class($("#txt-pubmed-id").parent(), "has-error"); + return false; + } + + search_button.disabled = true; + // Fetch publication details + fetch_publication_details(pubmed_id, + [() => {search_button.disabled = false;}]); + return false; + }); + }); +</script> +{%endblock%} diff --git a/uploader/templates/publications/index.html b/uploader/templates/publications/index.html new file mode 100644 index 0000000..54d3fc0 --- /dev/null +++ b/uploader/templates/publications/index.html @@ -0,0 +1,109 @@ +{%extends "publications/base.html"%} +{%from "flash_messages.html" import flash_all_messages%} + +{%block title%}Publications{%endblock%} + + +{%block contents%} +{{flash_all_messages()}} + +<div class="row" style="padding-bottom: 1em;"> + <div class="col"> + <a href="{{url_for('publications.create_publication')}}" + class="btn btn-primary" + title="Create a new publication."> + add new publication</a> + </div> +</div> + +<div class="row"> + <p>Click on title to view more details and to edit details for that + publication.</p> +</div> + +<div class="row"> + <table id="tbl-list-publications" class="table compact stripe"> + <thead> + <tr> + <th>#</th> + <th>PubMed ID</th> + <th>Title</th> + <th>Authors</th> + </tr> + </thead> + + <tbody></tbody> + </table> +</div> +{%endblock%} + + +{%block javascript%} +<script type="text/javascript" src="/static/js/urls.js"></script> + +<script type="text/javascript"> + $(function() { + var publicationsDataTable = buildDataTable( + "#tbl-list-publications", + [], + [ + {data: "index"}, + { + searchable: true, + data: (pub) => { + if(pub.PubMed_ID) { + return `<a href="https://pubmed.ncbi.nlm.nih.gov/` + + `${pub.PubMed_ID}/" target="_blank" ` + + `title="Link to publication on NCBI.">` + + `${pub.PubMed_ID}</a>`; + } + return ""; + } + }, + { + searchable: true, + data: (pub) => { + var title = "⸻"; + if(pub.Title) { + title = pub.Title + } + url=buildURLFromCurrentURL( + `/publications/view/${pub.Id}`); + return `<a href="${url}" target="_blank" ` + + `title="Link to view publication details">` + + `${title}</a>`; + } + }, + { + searchable: true, + data: (pub) => { + authors = pub.Authors.split(",").map( + (item) => {return item.trim();}); + if(authors.length > 1) { + return authors[0] + ", et. al."; + } + return authors[0]; + } + } + ], + { + serverSide: true, + ajax: { + url: "/publications/list", + dataSrc: "publications" + }, + scrollY: 700, + scroller: true, + scrollCollapse: true, + paging: true, + deferRender: true, + layout: { + topStart: "info", + topEnd: "search", + bottomStart: "pageLength", + bottomEnd: false + } + }); + }); +</script> +{%endblock%} diff --git a/uploader/templates/publications/view-publication.html b/uploader/templates/publications/view-publication.html new file mode 100644 index 0000000..01ccf1e --- /dev/null +++ b/uploader/templates/publications/view-publication.html @@ -0,0 +1,80 @@ +{%extends "publications/base.html"%} +{%from "flash_messages.html" import flash_all_messages%} + +{%block title%}View Publication{%endblock%} + + +{%block contents%} +{{flash_all_messages()}} + +<div class="row"> + <table class="table"> + <tr> + <th>Linked Phenotypes</th> + <td>{{linked_phenotypes | count}}</td> + </tr> + <tr> + <th>PubMed</th> + <td> + {%if publication.PubMed_ID%} + <a href="https://pubmed.ncbi.nlm.nih.gov/{{publication.PubMed_ID}}/" + target="_blank">{{publication.PubMed_ID}}</a> + {%else%} + — + {%endif%} + </td> + </tr> + <tr> + <th>Title</th> + <td>{{publication.Title or "—"}}</td> + </tr> + <tr> + <th>Authors</th> + <td>{{publication.Authors or "—"}}</td> + </tr> + <tr> + <th>Journal</th> + <td>{{publication.Journal or "—"}}</td> + </tr> + <tr> + <th>Published</th> + <td>{{publication.Month or ""}} {{publication.Year or "—"}}</td> + </tr> + <tr> + <th>Volume</th> + <td>{{publication.Volume or "—"}}</td> + </tr> + <tr> + <th>Pages</th> + <td>{{publication.Pages or "—"}}</td> + </tr> + <tr> + <th>Abstract</th> + <td> + {%for line in (publication.Abstract or "—").replace("\r\n", "<br />").replace("\n", "<br />").split("<br />")%} + <p>{{line}}</p> + {%endfor%} + </td> + </tr> + </table> +</div> + +<div class="row"> + <div> + <a href="{{url_for('publications.edit_publication', publication_id=publication.Id)}}" + title="Edit details for this publication." + class="btn btn-primary">Edit</a> + {%if linked_phenotypes | length == 0%} + <a href="{{url_for('publications.delete_publication', publication_id=publication.Id)}}" + class="btn btn-danger">delete</a> + {%endif%} + </div> +</div> +{%endblock%} + + +{%block javascript%} +<script type="text/javascript"> + $(function() {}); +</script> +{%endblock%} diff --git a/uploader/templates/samples/base.html b/uploader/templates/samples/base.html index 291782b..7fd5020 100644 --- a/uploader/templates/samples/base.html +++ b/uploader/templates/samples/base.html @@ -1,12 +1,25 @@ {%extends "populations/base.html"%} +{%from "populations/macro-display-population-card.html" import display_sui_population_card%} -{%block lvl3_breadcrumbs%} -<li {%if activelink=="samples"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> - <a href="{{url_for('species.populations.samples.index')}}">Samples</a> +{%block breadcrumbs%} +{{super()}} +<li class="breadcrumb-item"> + <a href="{{url_for('species.populations.samples.list_samples', + species_id=species['SpeciesId'], + population_id=population.Id)}}"> + Samples + </a> </li> -{%block lvl4_breadcrumbs%}{%endblock%} +{%endblock%} + +{%block contents%} +<div class="row"> + <h2 class="heading">{{population.FullName}} ({{population.Name}})</h2> +</div> +{%endblock%} + + + +{%block sidebarcontents%} +{{display_sui_population_card(species, population)}} {%endblock%} diff --git a/uploader/templates/samples/index.html b/uploader/templates/samples/index.html index ee4a63e..ee98734 100644 --- a/uploader/templates/samples/index.html +++ b/uploader/templates/samples/index.html @@ -17,3 +17,7 @@ {{select_species_form(url_for("species.populations.samples.index"), species)}} </div> {%endblock%} + +{%block javascript%} +<script type="text/javascript" src="/static/js/species.js"></script> +{%endblock%} diff --git a/uploader/templates/samples/list-samples.html b/uploader/templates/samples/list-samples.html index 13e5cec..3aac984 100644 --- a/uploader/templates/samples/list-samples.html +++ b/uploader/templates/samples/list-samples.html @@ -1,40 +1,34 @@ {%extends "samples/base.html"%} {%from "flash_messages.html" import flash_all_messages%} {%from "populations/macro-select-population.html" import select_population_form%} -{%from "populations/macro-display-population-card.html" import display_population_card%} {%block title%}Samples — List Samples{%endblock%} -{%block pagetitle%}Samples — List Samples{%endblock%} - -{%block lvl4_breadcrumbs%} -<li {%if activelink=="list-samples"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> - <a href="{{url_for('species.populations.samples.list_samples', - species_id=species.SpeciesId, - population_id=population.Id)}}">List</a> -</li> -{%endblock%} - {%block contents%} -{{flash_all_messages()}} +{{super()}} <div class="row"> - <p> - You selected the population "{{population.FullName}}" from the - "{{species.FullName}}" species. - </p> + <h3 class="subheading">manage samples</h3> + {{flash_all_messages()}} +</div> + +<div class="row"> + <div class="col"> + <a href="{{url_for('species.populations.samples.upload_samples', + species_id=species.SpeciesId, + population_id=population.Id)}}" + title="Add samples for population '{{population.FullName}}' from species + '{{species.FullName}}'." + class="btn btn-primary">add new samples</a> + </div> </div> {%if samples | length > 0%} <div class="row"> <p> - This population already has <strong>{{total_samples}}</strong> - samples/individuals entered. You can explore the list of samples in this - population in the table below. + Population "{{population.FullName}} ({{population.Name}})" already has + <strong>{{total_samples}}</strong> samples/individuals entered. You can + explore the list of samples in the table below. </p> </div> @@ -73,7 +67,7 @@ <table class="table"> <thead> <tr> - <th>#</th> + <th></th> <th>Name</th> <th>Auxilliary Name</th> <th>Symbol</th> @@ -93,40 +87,12 @@ {%endfor%} </tbody> </table> - - <p> - <a href="#" - title="Add samples for population '{{population.FullName}}' from species - '{{species.FullName}}'." - class="btn btn-danger"> - delete all samples - </a> - </p> </div> - {%else%} - <div class="row"> - <p> - There are no samples entered for this population. Do please go ahead and add - the samples for this population by clicking on the button below. - </p> - - <p> - <a href="{{url_for('species.populations.samples.upload_samples', - species_id=species.SpeciesId, - population_id=population.Id)}}" - title="Add samples for population '{{population.FullName}}' from species - '{{species.FullName}}'." - class="btn btn-primary"> - add samples - </a> - </p> + <p>There are no samples entered for this population. Click the "Add Samples" + button above, to add some new samples.</p> </div> {%endif%} {%endblock%} - -{%block sidebarcontents%} -{{display_population_card(species, population)}} -{%endblock%} diff --git a/uploader/templates/samples/select-population.html b/uploader/templates/samples/select-population.html index f437780..1cc7573 100644 --- a/uploader/templates/samples/select-population.html +++ b/uploader/templates/samples/select-population.html @@ -12,28 +12,15 @@ {{flash_all_messages()}} <div class="row"> - <p>You have selected "{{species.FullName}}" as the species that your data relates to.</p> - <p>Next, we need information regarding the population your data relates to. Do please select the population from the existing ones below</p> -</div> - -<div class="row"> {{select_population_form( - url_for("species.populations.samples.select_population", species_id=species.SpeciesId), - populations)}} -</div> - -<div class="row"> - <p> - If you cannot find the population your data relates to in the drop-down - above, you might want to - <a href="{{url_for('species.populations.create_population', - species_id=species.SpeciesId)}}" - title="Create a new population for species '{{species.FullName}},"> - add a new population to GeneNetwork</a> - instead. + url_for("species.populations.samples.select_population", species_id=species.SpeciesId), species, populations)}} </div> {%endblock%} {%block sidebarcontents%} {{display_species_card(species)}} {%endblock%} + +{%block javascript%} +<script type="text/javascript" src="/static/js/populations.js"></script> +{%endblock%} diff --git a/uploader/templates/samples/upload-failure.html b/uploader/templates/samples/upload-failure.html index 458ab55..75192ec 100644 --- a/uploader/templates/samples/upload-failure.html +++ b/uploader/templates/samples/upload-failure.html @@ -1,6 +1,5 @@ {%extends "base.html"%} {%from "cli-output.html" import cli_output%} -{%from "populations/macro-display-population-card.html" import display_population_card%} {%block title%}Samples Upload Failure{%endblock%} @@ -15,7 +14,7 @@ <h3>Debugging Information</h3> <ul> - <li><strong>job id</strong>: {{job.job_id}}</li> + <li><strong>job id</strong>: {{job.jobid}}</li> <li><strong>status</strong>: {{job.status}}</li> <li><strong>job type</strong>: {{job["job-type"]}}</li> </ul> @@ -31,7 +30,3 @@ {{cli_output(job, "stderr")}} </div> {%endblock%} - -{%block sidebarcontents%} -{{display_population_card(species, population)}} -{%endblock%} diff --git a/uploader/templates/samples/upload-progress.html b/uploader/templates/samples/upload-progress.html index 677d457..38f931b 100644 --- a/uploader/templates/samples/upload-progress.html +++ b/uploader/templates/samples/upload-progress.html @@ -1,6 +1,5 @@ {%extends "samples/base.html"%} {%from "cli-output.html" import cli_output%} -{%from "populations/macro-display-population-card.html" import display_population_card%} {%block extrameta%} <meta http-equiv="refresh" content="5"> @@ -25,7 +24,3 @@ </div> {%endblock%} - -{%block sidebarcontents%} -{{display_population_card(species, population)}} -{%endblock%} diff --git a/uploader/templates/samples/upload-samples.html b/uploader/templates/samples/upload-samples.html index 25d3290..1f665a3 100644 --- a/uploader/templates/samples/upload-samples.html +++ b/uploader/templates/samples/upload-samples.html @@ -1,21 +1,16 @@ {%extends "samples/base.html"%} {%from "flash_messages.html" import flash_all_messages%} -{%from "populations/macro-select-population.html" import select_population_form%} -{%from "populations/macro-display-population-card.html" import display_population_card%} {%block title%}Samples — Upload Samples{%endblock%} -{%block pagetitle%}Samples — Upload Samples{%endblock%} - -{%block lvl4_breadcrumbs%} -<li {%if activelink=="uploade-samples"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> +{%block breadcrumbs%} +{{super()}} +<li class="breadcrumb-item"> <a href="{{url_for('species.populations.samples.upload_samples', - species_id=species.SpeciesId, - population_id=population.Id)}}">List</a> + species_id=species['SpeciesId'], + population_id=population.Id)}}"> + Upload + </a> </li> {%endblock%} @@ -23,35 +18,6 @@ {{flash_all_messages()}} <div class="row"> - <p> - You can now upload the samples for the "{{population.FullName}}" population - from the "{{species.FullName}}" species here. - </p> - <p> - Upload a <strong>character-separated value (CSV)</strong> file that contains - details about your samples. The CSV file should have the following fields: - <dl> - <dt>Name</dt> - <dd>The primary name/identifier for the sample/individual.</dd> - - <dt>Name2</dt> - <dd>A secondary name for the sample. This can simply be the same as - <strong>Name</strong> above. This field <strong>MUST</strong> contain a - value.</dd> - - <dt>Symbol</dt> - <dd>A symbol for the sample. This can be a strain name, e.g. 'BXD60' for - species that have strains. This field can be left empty for species like - Humans that do not have strains..</dd> - - <dt>Alias</dt> - <dd>An alias for the sample. Can be an empty field, or take on the same - value as that of the Symbol.</dd> - </dl> - </p> -</div> - -<div class="row"> <form id="form-samples" method="POST" action="{{url_for('species.populations.samples.upload_samples', @@ -65,14 +31,17 @@ <div class="form-group"> <label for="file-samples" class="form-label">select file</label> - <input type="file" name="samples_file" id="file:samples" - accept="text/csv, text/tab-separated-values" + <input type="file" name="samples_file" id="file-samples" + accept="text/csv, text/tab-separated-values, text/plain" class="form-control" /> + <small class="form-text text-muted"> + See the <a href="#docs-samples-upload">documentation below</a> for + details on expected file format.</small> </div> <div class="form-group"> - <label for="select:separator" class="form-label">field separator</label> - <select id="select:separator" + <label for="select-separator" class="form-label">field separator</label> + <select id="select-separator" name="separator" required="required" class="form-control"> @@ -83,7 +52,7 @@ <option value=";">Semicolon</option> <option value="other">Other</option> </select> - <input id="txt:separator" + <input id="txt-separator" type="text" name="other_separator" class="form-control" /> @@ -95,11 +64,11 @@ </div> <div class="form-group form-check"> - <input id="chk:heading" + <input id="chk-heading" type="checkbox" name="first_line_heading" class="form-check-input" /> - <label for="chk:heading" class="form-check-label"> + <label for="chk-heading" class="form-check-label"> first line is a heading?</label> <small class="form-text text-muted"> Select this if the first line in your file contains headings for the @@ -108,8 +77,8 @@ </div> <div class="form-group"> - <label for="txt:delimiter" class="form-label">field delimiter</label> - <input id="txt:delimiter" + <label for="txt-delimiter" class="form-label">field delimiter</label> + <input id="txt-delimiter" type="text" name="field_delimiter" maxlength="1" @@ -149,10 +118,34 @@ </tbody> </table> </div> -{%endblock%} -{%block sidebarcontents%} -{{display_population_card(species, population)}} + + +<div class="row" id="docs-samples-upload"> + <h3 class="subheading">File Format</h3> + <p> + Upload a <strong>character-separated value (CSV)</strong> file that contains + details about your samples. The CSV file should have the following fields: + <dl> + <dt>Name</dt> + <dd>The primary name/identifier for the sample/individual.</dd> + + <dt>Name2</dt> + <dd>A secondary name for the sample. This can simply be the same as + <strong>Name</strong> above. This field <strong>MUST</strong> contain a + value.</dd> + + <dt>Symbol</dt> + <dd>A symbol for the sample. This can be a strain name, e.g. 'BXD60' for + species that have strains. This field can be left empty for species like + Humans that do not have strains..</dd> + + <dt>Alias</dt> + <dd>An alias for the sample. Can be an empty field, or take on the same + value as that of the Symbol.</dd> + </dl> + </p> +</div> {%endblock%} {%block javascript%} diff --git a/uploader/templates/samples/upload-success.html b/uploader/templates/samples/upload-success.html index 881d466..d6318e9 100644 --- a/uploader/templates/samples/upload-success.html +++ b/uploader/templates/samples/upload-success.html @@ -1,6 +1,5 @@ {%extends "samples/base.html"%} {%from "cli-output.html" import cli_output%} -{%from "populations/macro-display-population-card.html" import display_population_card%} {%block title%}Job Status{%endblock%} @@ -30,7 +29,3 @@ </div> {%endblock%} - -{%block sidebarcontents%} -{{display_population_card(species, population)}} -{%endblock%} diff --git a/uploader/templates/species/base.html b/uploader/templates/species/base.html index f64f72b..a7c1a8f 100644 --- a/uploader/templates/species/base.html +++ b/uploader/templates/species/base.html @@ -1,17 +1,10 @@ {%extends "base.html"%} -{%block lvl1_breadcrumbs%} -<li {%if activelink=="species"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> - {%if species is mapping%} - <a href="{{url_for('species.view_species', species_id=species.SpeciesId)}}"> - {{species.Name}}</a> - {%else%} - <a href="{{url_for('species.list_species')}}">Species</a> - {%endif%} +{%block breadcrumbs%} +{{super()}} +<li class="breadcrumb-item"> + <a href="{{url_for('species.view_species', species_id=species['SpeciesId'])}}"> + {{species["Name"]|title}} + </a> </li> -{%block lvl2_breadcrumbs%}{%endblock%} {%endblock%} diff --git a/uploader/templates/species/create-species.html b/uploader/templates/species/create-species.html index 0d0bedf..138dbaa 100644 --- a/uploader/templates/species/create-species.html +++ b/uploader/templates/species/create-species.html @@ -19,72 +19,88 @@ <div class="row"> <form id="frm-create-species" method="POST" - action="{{url_for('species.create_species')}}"> + action="{{url_for('species.create_species', return_to=return_to)}}" + class="form-horizontal"> <legend>Create Species</legend> {{flash_all_messages()}} + <input type="hidden" name="return_to" value="{{return_to}}"> + <div class="form-group"> - <label for="txt-taxonomy-id" class="form-label"> + <label for="txt-taxonomy-id" class="control-label col-sm-2"> Taxonomy ID</label> - <div class="input-group"> - <input id="txt-taxonomy-id" - name="species_taxonomy_id" - type="text" - class="form-control" /> - <span class="input-group-btn"> - <button id="btn-search-taxonid" class="btn btn-info">Search</button> - </span> + <div class="col-sm-10"> + <div class="input-group"> + <input id="txt-taxonomy-id" + name="species_taxonomy_id" + type="text" + class="form-control" /> + <span class="input-group-btn"> + <button id="btn-search-taxonid" class="btn btn-info">Search</button> + </span> + </div> + <small class="form-text text-small text-muted"> + Use + <a href="https://www.ncbi.nlm.nih.gov/Taxonomy/taxonomyhome.html/" + title="NCBI's Taxonomy Browser homepage" + target="_blank"> + NCBI's Taxonomy Browser homepage</a> to search for the species you + want. If the species exists on NCBI, they will have a Taxonomy ID. Copy + that Taxonomy ID to this field, and click "Search" to auto-fill the + details.<br /> + This field is optional.</small> </div> - <small class="form-text text-small text-muted">Provide the taxonomy ID for - your species that can be used to link to external sites like NCBI. Enter - the taxonomy ID and click "Search" to auto-fill the form with data. - <br /> - While it is recommended to provide a value for this field, doing so is - optional. - </small> </div> <div class="form-group"> - <label for="txt-species-name" class="form-label">Common Name</label> - <input id="txt-species-name" - name="common_name" - type="text" - class="form-control" - required="required" /> - <small class="form-text text-muted">Provide the common, possibly - non-scientific name for the species here, e.g. Human, Mouse, etc.</small> + <label for="txt-species-name" class="control-label col-sm-2">Common Name</label> + <div class="col-sm-10"> + <input id="txt-species-name" + name="common_name" + type="text" + class="form-control" + required="required" /> + <small class="form-text text-muted">This is the day-to-day term used by + laymen, e.g. Mouse (instead of Mus musculus), round worm (instead of + Ascaris lumbricoides), etc.<br /> + For species without this, just enter the scientific name. + </small> + </div> </div> <div class="form-group"> - <label for="txt-species-scientific" class="form-label"> + <label for="txt-species-scientific" class="control-label col-sm-2"> Scientific Name</label> - <input id="txt-species-scientific" - name="scientific_name" - type="text" - class="form-control" - required="required" /> - <small class="form-text text-muted">Provide the scientific name for the - species you are creating, e.g. Homo sapiens, Mus musculus, etc.</small> + <div class="col-sm-10"> + <input id="txt-species-scientific" + name="scientific_name" + type="text" + class="form-control" + required="required" /> + <small class="form-text text-muted">This is the scientific name for the + species e.g. Homo sapiens, Mus musculus, etc.</small> + </div> </div> <div class="form-group"> - <label for="select-species-family" class="form-label">Family</label> - <select id="select-species-family" - name="species_family" - required="required" - class="form-control"> - <option value="">Please select a grouping</option> - {%for family in families%} - <option value="{{family}}">{{family}}</option> - {%endfor%} - </select> - <small class="form-text text-muted"> - This is a generic grouping for the species that determines under which - grouping the species appears in the GeneNetwork menus</small> + <label for="select-species-family" class="control-label col-sm-2">Family</label> + <div class="col-sm-10"> + <select id="select-species-family" + name="species_family" + required="required" + class="form-control"> + <option value="ungrouped">I do not know what to pick</option> + {%for family in families%} + <option value="{{family}}">{{family}}</option> + {%endfor%} + </select> + <small class="form-text text-muted"> + This is a rough grouping of the species.</small> + </div> </div> - <div class="form-group"> + <div class="col-sm-offset-2 col-sm-10"> <input type="submit" value="create new species" class="btn btn-primary" /> @@ -113,7 +129,7 @@ } msg = ( "Request to '${uri}' failed with message '${textStatus}'. " - + "Please try again later, or fill the details manually."); + + "Please try again later, or fill the details manually."); alert(msg); console.error(msg, data, textStatus); return false; diff --git a/uploader/templates/species/list-species.html b/uploader/templates/species/list-species.html index 85c9d40..64084b0 100644 --- a/uploader/templates/species/list-species.html +++ b/uploader/templates/species/list-species.html @@ -29,7 +29,7 @@ <caption>Available Species</caption> <thead> <tr> - <th>#</td> + <th></td> <th title="A common, layman's name for the species.">Common Name</th> <th title="The scientific name for the species">Organism Name</th> <th title="An identifier for the species in the NCBI taxonomy database"> diff --git a/uploader/templates/species/macro-display-species-card.html b/uploader/templates/species/macro-display-species-card.html index 166c7b9..30c564f 100644 --- a/uploader/templates/species/macro-display-species-card.html +++ b/uploader/templates/species/macro-display-species-card.html @@ -20,3 +20,32 @@ </div> </div> {%endmacro%} + + +{%macro display_sui_species_card(species)%} +<div class="row"> + <table class="table"> + <caption>Current Species</caption> + <tbody> + <tr> + <th>Name</th> + <td>{{species["Name"] | title}}</td> + </tr> + <tr> + <th>Scientific</th> + <td>{{species["FullName"]}}</td> + </tr> + {%if species["TaxonomyId"]%} + <tr> + <th>Taxonomy ID</th> + <td> + <a href="https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id={{species.TaxonomyId}}" + title="NCBI's Taxonomy Browser page for {{species.Name}}"> + {{species.TaxonomyId}}</a> + </td> + </tr> + </tbody> + {%endif%} + </table> +</div> +{%endmacro%} diff --git a/uploader/templates/species/macro-select-species.html b/uploader/templates/species/macro-select-species.html index dd086c0..3714ae4 100644 --- a/uploader/templates/species/macro-select-species.html +++ b/uploader/templates/species/macro-select-species.html @@ -1,36 +1,59 @@ +{%from "macro-step-indicator.html" import step_indicator%} + {%macro select_species_form(form_action, species)%} -{%if species | length > 0%} -<form method="GET" action="{{form_action}}"> - <div class="form-group"> - <label for="select-species" class="form-label">Species</label> - <select id="select-species" - name="species_id" - class="form-control" - required="required"> - <option value="">Select Species</option> - {%for group in species%} - {{group}} - <optgroup {%if group[0][1] is not none%} - label="{{group[0][1].capitalize()}}" - {%else%} - label="Undefined" - {%endif%}> - {%for aspecies in group[1]%} - <option value="{{aspecies.SpeciesId}}">{{aspecies.MenuName}}</option> - {%endfor%} - </optgroup> - {%endfor%} - </select> +<form method="GET" action="{{form_action}}" class="form-horizontal"> + + <h2>{{step_indicator("1")}} What species do you want to work with?</h2> + + {%if species | length != 0%} + + <p class="form-text">Search for, and select the species from the table below + and click "Continue"</p> + + <div class="radio"> + <label for="rdo-cant-find-species" + style="font-weight: 1;"> + <input id="rdo-cant-find-species" type="radio" name="species_id" + value="CREATE-SPECIES" /> + I could not find the species I want (create it). + </label> </div> - <div class="form-group"> - <input type="submit" value="Select" class="btn btn-primary" /> + <div class="col-sm-offset-10 col-sm-2"> + <input type="submit" + class="btn btn-primary" + value="continue" /> </div> + + <div style="margin-top:3em;"> + <table id="tbl-select-species" class="table compact stripe" + data-species-list='{{species | tojson}}'> + <div class=""> + <thead> + <tr> + <th></th> + <th>Species Name</th> + </tr> + </thead> + + <tbody></tbody> + </table> + </div> + + {%else%} + + <label class="control-label" for="rdo-cant-find-species"> + <input id="rdo-cant-find-species" type="radio" name="species_id" + value="CREATE-SPECIES" /> + There are no species to select from. Create the first one.</label> + + <div class="col-sm-offset-10 col-sm-2"> + <input type="submit" + class="btn btn-primary col-sm-offset-1" + value="continue" /> + </div> + + {%endif%} + </form> -{%else%} -<p class="text-danger"> - <span class="glyphicon glyphicon-exclamation-mark"></span> - We could not find species to select from! -</p> -{%endif%} {%endmacro%} diff --git a/uploader/templates/species/view-species.html b/uploader/templates/species/view-species.html index 2d02f7e..81608fc 100644 --- a/uploader/templates/species/view-species.html +++ b/uploader/templates/species/view-species.html @@ -1,90 +1,127 @@ {%extends "species/base.html"%} {%from "flash_messages.html" import flash_all_messages%} +{%from "macro-forms.html" import add_http_feature_flags%} +{%from "macro-step-indicator.html" import step_indicator%} +{%from "species/macro-display-species-card.html" import display_sui_species_card%} {%block title%}View Species{%endblock%} -{%block pagetitle%}View Species{%endblock%} +{%macro add_form_buttons()%} +<div class="row form-buttons"> + <div class="col"> + <input type="submit" + value="use selected population" + class="btn btn-primary" /> + </div> + + <div class="col"> + <a href="{{url_for('species.populations.create_population', + species_id=species.SpeciesId, + return_to='species.view_species')}}" + title="Create a new population for species '{{species.Name}}'." + class="btn btn-outline-info"> + Create a new population + </a> + </div> +</div> +{%endmacro%} -{%block lvl2_breadcrumbs%} -<li {%if activelink=="view-species"%} - class="breadcrumb-item active" - {%else%} - class="breadcrumb-item" - {%endif%}> - <a href="{{url_for('species.view_species', species_id=species.SpeciesId)}}">View</a> -</li> -{%endblock%} {%block contents%} -{{flash_all_messages()}} <div class="row"> - <h2>Details on species {{species.FullName}}</h2> + <h2 class="heading">{{species.FullName}} ({{species.Name}})</h2> +</div> - <dl> - <dt>Common Name</dt> - <dd>{{species.SpeciesName}}</dd> +<div class "row"> + <ul class="nav nav-tabs" id="species-actions"> + <li class="nav-item presentation"> + <button class="nav-link active" + id="populations-tab" + data-bs-toggle="tab" + data-bs-target="#populations-content" + type="button" + role="tab" + aria-controls="populations-content" + aria-selected="true">Populations</button> + </li> + <li class="nav-item presentation"> + <button class="nav-link" + id="sequencing-platforms-tab" + data-bs-toggle="tab" + data-bs-target="#sequencing-platforms-content" + type="button" + role="tab" + aria-controls="sequencing-platforms-content" + aria-selected="true">Sequencing Platforms</button> + </li> + </ul> +</div> - <dt>Scientific Name</dt> - <dd>{{species.FullName}}</dd> +<div class="row"> + <div class="tab-content" id="species-tabs-content"> + <div class="tab-pane fade show active" + id="populations-content" + role="tabpanel" + aria-labelledby="populations-content-tab"> + <p>Data belonging to a particular species is further divided into one or more + populations for easier handling. Please select the population you want to work + with.</p> - <dt>Taxonomy ID</dt> - <dd>{{species.TaxonomyId}}</dd> - </dl> + <form method="GET" + action="{{url_for('species.view_species', species_id=species.SpeciesId)}}" + class="form-horizontal"> + {{add_http_feature_flags()}} + {{add_form_buttons()}} - <h3>Actions</h3> + {%if populations | length != 0%} + <div style="margin-top:0.3em;"> + <table id="tbl-select-population" class="table compact stripe" + data-populations-list='{{populations | tojson}}'> + <thead> + <tr> + <th></th> + <th>Population</th> + </tr> + </thead> - <p> - You can proceed to perform any of the following actions for species - {{species.FullName}} - </p> + <tbody></tbody> + </table> + </div> - <ol> - <li> - <a href="{{url_for('species.populations.list_species_populations', - species_id=species.SpeciesId)}}" - title="Create/Edit populations for {{species.FullName}}"> - Manage populations</a> - </li> - <li> - <a href="{{url_for('species.platforms.list_platforms', - species_id=species.SpeciesId)}}" - title="Create/Edit sequencing platforms for {{species.FullName}}"> - Manage sequencing platforms</a> - </li> - </ol> + {%else%} + <p class="form-text"> + There are no populations currently defined for {{species['FullName']}} + ({{species['SpeciesName']}}).</p> + {%endif%} - + {{add_form_buttons()}} + + </form> + </div> + <div class="tab-pane fade" + id="sequencing-platforms-content" + role="tabpanel" + aria-labelledby="sequencing-platforms-content-tab"> + <p>Upload and manage the sequencing platforms for species + '{{species.Name | title}} ({{species.FullName}})' + <a href="{{url_for('species.platforms.list_platforms', + species_id=species.SpeciesId)}}" + title="Manage sequencing platforms for {{species.Name}}">here</a>. + </p> + </div> + </div> </div> {%endblock%} {%block sidebarcontents%} -<div class="card"> - <div class="card-body"> - <h5 class="card-title">Species Extras</h5> - <div class="card-text"> - <p>Some extra internal-use details (mostly for UI concerns on GeneNetwork)</p> - <p> - <small> - If you do not understand what the following are about, simply ignore them - — - They have no bearing whatsoever on your data, or its analysis. - </small> - </p> - <dl> - <dt>Family</dt> - <dd>{{species.Family}}</dd> +<div class="row"> + <p>You can manage species' populations and sequencing platforms here. Select + the tab for the feature you wish to continue working on.</p> +</div> +{{display_sui_species_card(species)}} +{%endblock%} - <dt>FamilyOrderId</dt> - <dd>{{species.FamilyOrderId}}</dd> - <dt>OrderId</dt> - <dd>{{species.OrderId}}</dd> - </dl> - </div> - <a href="{{url_for('species.edit_species_extra', - species_id=species.SpeciesId)}}" - class="card-link" - title="Edit the species' internal-use details.">Edit</a> - </div> -</div> +{%block javascript%} +<script type="text/javascript" src="/static/js/populations.js"></script> {%endblock%} |