Skip to content

Commit

Permalink
Data Pages: Main Data Table from Webservices
Browse files Browse the repository at this point in the history
For Peptide, Proteins (Crosslink, Looplink, All), and Coverage pages
(Single and Merged)
The main Table of data is retrieved via webservice call.
For Protein pages, also the Exclude Organism and Exclude Proteins lists
also come from same webservice call.
For Merged pages, the data for the Per search counts and Venn Diagram
also come from same webservice call.
  • Loading branch information
danjasuw committed Jun 14, 2019
1 parent fa98824 commit 9f194c7
Show file tree
Hide file tree
Showing 136 changed files with 12,767 additions and 4,471 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,28 @@ public static int getTypeNumber( String type ) {
public static final String UNLINKED_TYPE_STRING_UPPERCASE = UNLINKED_TYPE_STRING.toUpperCase();


// For Display

/**
* For Display, with first letter capitalized and rest lower case
*/
public static final String CROSS_TYPE_STRING_CAPITAL_CASE = "Crosslink";
/**
* For Display, with first letter capitalized and rest lower case
*/
public static final String LOOP_TYPE_STRING_CAPITAL_CASE = "Looplink";
/**
* For Display, with first letter capitalized and rest lower case
*/
public static final String DIMER_TYPE_STRING_CAPITAL_CASE = "Dimer";
/**
* For Display, with first letter capitalized and rest lower case
*/
public static final String UNLINKED_TYPE_STRING_CAPITAL_CASE = "Unlinked";
/**
* For Display, with first letter capitalized and rest lower case
*/
public static final String UNKNOWN_TYPE_STRING_CAPITAL_CASE = "Unknown";

/**
* Get the string representation of a type of linked peptide
Expand Down
99 changes: 92 additions & 7 deletions proxl_web_app/front_end/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -103,12 +103,21 @@ task createHandlebarsOutputDirs {
dirToCreate = rootDir
mkdirSuccess = project.file( dirToCreate ).mkdirs()

dirToCreate = rootDir + "merged_pages_shared"
mkdirSuccess = project.file( dirToCreate ).mkdirs()

dirToCreate = rootDir + "peptide_page"
mkdirSuccess = project.file( dirToCreate ).mkdirs()

dirToCreate = rootDir + "protein_page"
mkdirSuccess = project.file( dirToCreate ).mkdirs()

dirToCreate = rootDir + "protein_pages_coverage_report_shared"
mkdirSuccess = project.file( dirToCreate ).mkdirs()

dirToCreate = rootDir + "protein_pages_coverage_report_image_structure_pages_shared"
mkdirSuccess = project.file( dirToCreate ).mkdirs()

dirToCreate = rootDir + "mod_view_page"
mkdirSuccess = project.file( dirToCreate ).mkdirs()

Expand Down Expand Up @@ -175,12 +184,36 @@ task createHandlebarsOutputDirs {
}
}

// Handlebars Precompile for input handlebars_templates/peptide_page_single_search
// Handlebars Precompile for input handlebars_templates/merged_pages_shared

task handlebarsPrecompile_merged_pages_shared(type: NodeTask) {

def precompile_Input_Directory = "handlebars_templates/merged_pages_shared"
def precompile_Output_File = "handlebars_templates_precompiled/merged_pages_shared/merged_pages_shared_template-bundle.js"

// Gradle Build Avoidance information. Must specify correct inputs and outputs.
inputs.dir( precompile_Input_Directory )
outputs.file( precompile_Output_File )

def osName = System.getProperty("os.name").toLowerCase();
if (osName.contains("windows")) {
script = project.file('node_modules/handlebars/bin/handlebars')
} else {
script = project.file('node_modules/.bin/handlebars')
}
args = [ '--amd' , // parameters must be before file list
'--min',
'-f', precompile_Output_File,
precompile_Input_Directory
]
}

// Handlebars Precompile for input handlebars_templates/peptide_page

task handlebarsPrecompile_peptide_page(type: NodeTask) {

def precompile_Input_Directory = "handlebars_templates/peptide_page_single_search"
def precompile_Output_File = "handlebars_templates_precompiled/peptide_page/peptide_page_single_search_template-bundle.js"
def precompile_Input_Directory = "handlebars_templates/peptide_page"
def precompile_Output_File = "handlebars_templates_precompiled/peptide_page/peptide_page_template-bundle.js"

// Gradle Build Avoidance information. Must specify correct inputs and outputs.
inputs.dir( precompile_Input_Directory )
Expand All @@ -199,12 +232,60 @@ task handlebarsPrecompile_peptide_page(type: NodeTask) {
]
}

// Handlebars Precompile for input handlebars_templates/protein_page_single_search
// Handlebars Precompile for input handlebars_templates/protein_page

task handlebarsPrecompile_protein_page(type: NodeTask) {

def precompile_Input_Directory = "handlebars_templates/protein_page_single_search"
def precompile_Output_File = "handlebars_templates_precompiled/protein_page/protein_page_single_search_template-bundle.js"
def precompile_Input_Directory = "handlebars_templates/protein_page"
def precompile_Output_File = "handlebars_templates_precompiled/protein_page/protein_page_template-bundle.js"

// Gradle Build Avoidance information. Must specify correct inputs and outputs.
inputs.dir( precompile_Input_Directory )
outputs.file( precompile_Output_File )

def osName = System.getProperty("os.name").toLowerCase();
if (osName.contains("windows")) {
script = project.file('node_modules/handlebars/bin/handlebars')
} else {
script = project.file('node_modules/.bin/handlebars')
}
args = [ '--amd' , // parameters must be before file list
'--min',
'-f', precompile_Output_File,
precompile_Input_Directory
]
}

// Handlebars Precompile for input handlebars_templates/protein_pages_coverage_report_shared

task handlebarsPrecompile_protein_pages_coverage_report_shared(type: NodeTask) {

def precompile_Input_Directory = "handlebars_templates/protein_pages_coverage_report_shared"
def precompile_Output_File = "handlebars_templates_precompiled/protein_pages_coverage_report_shared/protein_pages_coverage_report_shared_template-bundle.js"

// Gradle Build Avoidance information. Must specify correct inputs and outputs.
inputs.dir( precompile_Input_Directory )
outputs.file( precompile_Output_File )

def osName = System.getProperty("os.name").toLowerCase();
if (osName.contains("windows")) {
script = project.file('node_modules/handlebars/bin/handlebars')
} else {
script = project.file('node_modules/.bin/handlebars')
}
args = [ '--amd' , // parameters must be before file list
'--min',
'-f', precompile_Output_File,
precompile_Input_Directory
]
}

// Handlebars Precompile for input handlebars_templates/protein_pages_coverage_report_image_structure_pages_shared

task handlebarsPrecompile_protein_pages_coverage_report_image_structure_pages_shared(type: NodeTask) {

def precompile_Input_Directory = "handlebars_templates/protein_pages_coverage_report_image_structure_pages_shared"
def precompile_Output_File = "handlebars_templates_precompiled/protein_pages_coverage_report_image_structure_pages_shared/protein_pages_coverage_report_image_structure_pages_shared_template-bundle.js"

// Gradle Build Avoidance information. Must specify correct inputs and outputs.
inputs.dir( precompile_Input_Directory )
Expand Down Expand Up @@ -764,7 +845,11 @@ task frontEndBuild(type: GradleBuild) {
'handlebarsPrecompile_project_page__saved_views_section',
'handlebarsPrecompile_project_page__saved_views_section_loggedin_users',
'handlebarsPrecompile_save_view',

'handlebarsPrecompile_merged_pages_shared',
'handlebarsPrecompile_peptide_page',
'handlebarsPrecompile_protein_page',
'handlebarsPrecompile_protein_pages_coverage_report_shared',
'handlebarsPrecompile_protein_pages_coverage_report_image_structure_pages_shared',
'webpack',
'copyFrontEndJS',
'copyFrontEndCSS'
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{{!-- mergedPages_MultipleSearches_MainTable_header_search_id_tooltip.handlebars in 'merged_pages_shared'
Merged Pages Multiple Searches - Main Table - Header Row - Tooltip on Search Id
--}}{{ searchName }} ({{ searchId }})
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{{!-- mergedPages_SearchesList_NO_VennDiagram_AboveMainDataTable.handlebars in 'merged_pages_shared'
Merged Pages: Searches (search ids and counts) list and NO Venn Diagram above Main Data Table
--}}


<div style="margin-top: 5px;">

{{#each searchCounts as |searchCount| }}
<span class=" searches_sort_list_item_jq " style="white-space: nowrap; padding-right: 20px;"
data-project_search_id="${ searchCount.projectSearchId }">
<span style="margin-right: 10px; padding-left: 10px; padding-right: 10px;"
class=" merged-search-search-background-color-{{ searchCount.colorIndex_OneBased }} "
></span>
(Search {{ searchCount.searchId }}: {{ searchCount.count }})
</span>

{{/each}}

</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
{{!-- mergedPages_SearchesList_WithVennDiagram_AboveMainDataTable.handlebars in 'merged_pages_shared'
Merged Pages: Searches (search ids and counts) list and Venn Diagram above Main Data Table
--}}

{{!-- Have Venn Diagram, list legend to the left in vertical list --}}

<table class="table-no-border-no-cell-spacing-no-cell-padding">
<tr>
<td style="vertical-align: top">
<div class=" searches_sort_list_container_jq " >

{{#each searchCounts as |searchCount| }}

<div class=" " style="margin-top: 5px;"
data-project_search_id="{{ searchCount.projectSearchId }}">
<span style="margin-right: 10px; padding-left: 10px; padding-right: 10px;"
class=" merged-search-search-background-color-{{ searchCount.colorIndex_OneBased }} "
></span>
(Search {{ searchCount.searchId }}: {{ searchCount.count }})
</div>
{{/each}}
</div>
</td>
<td style="vertical-align: top">

<div id="searches_intersection_venn_diagram_outer_container" style="position: relative; display: none;" >
<div class=" svg_download_outer_block_jq " style="position: absolute; top: 4px; right: 4px;">
<div class="svg-download-block">
<a href="javascript:" class=" tool_tip_attached_jq " data-tooltip="Download graphic as file."
><img src="images/icon-download-small.png" /></a>

<!-- Overlay that goes under main overlay: display on hover of download icon -->
<div class="svg-download-options-backing-block">
</div>
<!-- Overlay: display on hover of download icon -->
<span class="svg-download-options-block">
Choose download file format:
<a data-tooltip="Download as a JPEG image file."
data-download_type="jpeg"
class="svg-download-option tool_tip_attached_jq venn_diagram_download_link_jq " href="javascript:" style="margin-top:5px;"
>JPEG</a>
<a data-tooltip="Download as PDF file suitable for use in Adobe Illustrator or printing."
data-download_type="pdf"
class="svg-download-option tool_tip_attached_jq venn_diagram_download_link_jq " href="javascript:" style="margin-top:5px;"
>PDF</a>
<a data-tooltip="Download as PNG image file."
data-download_type="png"
class="svg-download-option tool_tip_attached_jq venn_diagram_download_link_jq " href="javascript:" style="margin-top:5px;"
>PNG</a>
<a data-tooltip="Download as scalable vector graphics file suitable for use in Inkscape or other compatible software."
data-download_type="svg"
class="svg-download-option tool_tip_attached_jq venn_diagram_download_link_jq " href="javascript:" style="margin-top:5px;"
>SVG</a>
</span>
</div>
</div>

<div id="searches_intersection_venn_diagram" >
</div>

</div>
</td>
</tr>
</table>


Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
{{!-- peptidePage_MultipleSearches_MainTable_MainDataRow.handlebars in 'peptide_page'
Peptide Page Multiple Searches - Main Table - Main Data Row
The actual peptide entry is in the property 'peptideEntry'.
The Root of data returned from webservice is in the property 'viewSearchPeptidesPageDataRoot'.
--}}

<tr id="unified-reported-peptide-{{ peptideEntry.unifiedReportedPeptideId }}"
style="cursor: pointer; "
onclick="viewMergedPeptidePerSearchDataFromWebServiceTemplate.showHideReportedPeptidesPerSearch( { clickedElement : this } )"
data-unified_reported_peptide_id="{{ peptideEntry.unifiedReportedPeptideId }}"
>

{{#each peptideEntry.searchContainsPeptide_SubList_JS_Generated as |entryContainsSearchObject| }}
{{#if entryContainsSearchObject.containsSearch }}
<td class=" merged-search-search-background-color-{{ entryContainsSearchObject.colorIndex_OneBased }} ">*</td>
{{else}}
<td>&nbsp;</td>
{{/if}}
{{/each}}

<td class="integer-number-column"><a class="show-child-data-link "
href="javascript:"
>{{ peptideEntry.numSearches }}<span class="toggle_visibility_expansion_span_jq"
><img src="images/icon-expand-small.png"
class=" icon-expand-contract-in-data-table "
></span><span class="toggle_visibility_contraction_span_jq"
style="display: none;"
><img src="images/icon-collapse-small.png"
class=" icon-expand-contract-in-data-table "
></span>
</a>
</td>

<td>{{ peptideEntry.linkType }}</td>

{{!-- Peptide 1 --}}
<td>{{ peptideEntry.peptide_1_Sequence }}</td>
<td class="integer-number-column" >{{ peptideEntry.peptide_1_Position }}</td>
<td class="">
{{ peptideEntry.modsStringPeptide_1 }}
</td>
{{#if anyResultsHaveIsotopeLabels }}
<td class="">
{{ peptideEntry.isotopeLabelsStringPeptide_1 }}
</td>
{{/if}}

{{!-- Peptide 2 --}}
<td>{{ peptideEntry.peptide_2_Sequence }}</td>
<td class="integer-number-column" >{{ peptideEntry.peptide_2_Position }}</td>
<td class="">
{{ peptideEntry.modsStringPeptide_2 }}
</td>
{{#if anyResultsHaveIsotopeLabels }}
<td class="">
{{ peptideEntry.isotopeLabelsStringPeptide_2 }}
</td>
{{/if}}


<td>
{{#if peptideEntry.peptide_1_ProteinPositions }}
{{#each peptideEntry.peptide_1_ProteinPositions as |pp| }}
<span class="proteinName" id="protein-id-{{ pp.proteinSequenceVersionId }}">
{{ pp.proteinName
}}{{#if pp.position1 }}({{ pp.position1
}}{{#if pp.position2
}}, {{ pp.position2 }}{{/if}}){{/if}}<br>
</span>
{{/each}}
{{/if}}
</td>
<td>
{{#if peptideEntry.peptide_2_ProteinPositions }}
{{#each peptideEntry.peptide_2_ProteinPositions as |pp| }}
<span class="proteinName" id="protein-id-{{ pp.proteinSequenceVersionId }}">
{{ pp.proteinName
}}{{#if pp.position1 }}({{ pp.position1
}}{{#if pp.position2
}}, {{ pp.position2 }}{{/if}}){{/if}}<br>
</span>
{{/each}}
{{/if}}
</td>

<td class="integer-number-column" >{{ peptideEntry.numPsms }}</td>

{{!--
This Loops over the annotation headers per search
--}}
{{#each peptideEntry.peptidePsmAnnotationValueListsForEachSearch as |peptidePsmAnnotationValueListsForASearch| }}

{{!--
Different from Single Search is that
the background color of each cell is set using a CSS class
with the search index being in the CSS class name.
This outputs the Reported Peptide annotation values for a specific search
--}}

{{#each peptidePsmAnnotationValueListsForASearch.peptideAnnotationValueList as |annotationDisplayValue| }}
<td class=" merged-search-search-background-color-{{ peptidePsmAnnotationValueListsForASearch.colorIndex_OneBased }} "
style="width:10%;">
<span style="white-space: nowrap">{{ annotationDisplayValue }}</span>
</td>
{{/each}}
{{!--
This outputs the PSM annotation values for a specific search
--}}
{{#each peptidePsmAnnotationValueListsForASearch.psmAnnotationValueList as |annotationDisplayValue| }}
<td class=" merged-search-search-background-color-{{ peptidePsmAnnotationValueListsForASearch.colorIndex_OneBased }} "
style="width:10%;">
<span style="white-space: nowrap">{{ annotationDisplayValue }}</span>
</td>
{{/each}}

{{/each}}


</tr>

0 comments on commit 9f194c7

Please sign in to comment.