Skip to content

Commit

Permalink
Added a custom domain region annotation tool.
Browse files Browse the repository at this point in the history 
Users can now define their own domains that will appear on the image
viewer (bar view and circle view) as regions of interest. These can be
known domains, regions identified via scanning mutagenesis or whatever
the user likes.
  • Loading branch information
@mriffle
mriffle committed May 2, 2018
1 parent 9a690d1 commit 239eee4
Show file tree
Hide file tree
Showing 8 changed files with 1,816 additions and 18 deletions.
127 changes: 122 additions & 5 deletions proxl_web_app/WebRoot/WEB-INF/jsp-pages/viewMergedImage.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@

<script type="text/javascript" src="${ contextPath }/js/crosslink-image-viewer-legacy-handler.js?x=${cacheBustValue}"></script>
<script type="text/javascript" src="${ contextPath }/js/crosslink-image-viewer-index-manager.js?x=${cacheBustValue}"></script>
<script type="text/javascript" src="${ contextPath }/js/crosslink-image-viewer-custom-region-manager.js?x=${cacheBustValue}"></script>
<script type="text/javascript" src="${ contextPath }/js/crosslink-image-viewer-color-manager.js?x=${cacheBustValue}"></script>
<script type="text/javascript" src="${ contextPath }/js/crosslink-image-viewer-click-element-handlers.js?x=${cacheBustValue}"></script>

Expand Down Expand Up @@ -120,6 +121,9 @@

<script type="text/javascript" src="${ contextPath }/js/webserviceDataParamsDistribution.js?x=${cacheBustValue}"></script>

<%-- Color Picker - jQuery Plugin --%>
<script type="text/javascript" src="${ contextPath }/js/libs/colorpicker/colorpicker.js"></script>

<link rel="stylesheet" href="${ contextPath }/css/tablesorter.css" type="text/css" media="print, projection, screen" />
<link type="text/css" rel="stylesheet" href="${ contextPath }/css/jquery.qtip.min.css" />

Expand All @@ -128,6 +132,7 @@
<link REL="stylesheet" TYPE="text/css" HREF="${contextPath}/css/jquery-ui-1.10.2-Themes/ui-lightness/jquery-ui.min.css">
--%>
<link REL="stylesheet" TYPE="text/css" HREF="${contextPath}/css/lorikeet.css">
<link rel="stylesheet" media="screen" type="text/css" href="${ contextPath }/css/libs/colorpicker_custom_colors.css" />



Expand Down Expand Up @@ -352,7 +357,7 @@
<select id="annotation_type">
<option></option>
<option value="sequence_coverage">Sequence Coverage</option>

<option value="custom">Custom Regions</option>
<c:if test="${ not empty annotation_data_webservice_base_url }">

<%-- These require annotation_data_webservice_base_url to be populated --%>
Expand All @@ -370,10 +375,7 @@
data-tooltip="Reset Proteins highlighting, flipping, positioning, and horizontal scaling"
href="javascript:resetProteins()" style="font-size:10pt;white-space:nowrap;"
>[Reset Proteins]</a>
<a class="bar-only tool_tip_attached_jq" data-tooltip="Orients all proteins with N-terminus on left-hand side" style="font-size:10pt;white-space:nowrap;"
href="javascript:resetProteinsReversed()"
>[Reset Protein Flipping]</a>


</span>

<%-- Keep these next two items together on the same line --%>
Expand Down Expand Up @@ -402,6 +404,17 @@
</span>
</span>

<c:if test="${authAccessLevel.assistantProjectOwnerAllowed}" >
<span style="white-space:nowrap;" >

<a class="tool_tip_attached_jq"
data-tooltip="Manage user-defined protein region annotations--such as marking domains of interest."
href="javascript:" onclick="_customRegionManager.showManagerOverlay()" style="font-size:10pt;white-space:nowrap;"
>[Custom Annotation Manager]</a>

</span>
</c:if>

<%-- Keep these next two items together on the same line --%>

<span style="white-space:nowrap;" >
Expand Down Expand Up @@ -555,6 +568,110 @@
<%-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --%>


<!-- Overlay for custom region manager -->

<div id="custom_region_manager_modal_dialog_overlay_background" class="custom_region_manager_modal_dialog_overlay_background" style="display: none;" >

</div>

<div id="custom-region-manager-overlay-container" class="custom-region-manager-overlay-container" style="display:none;">

<div id="custom_region_manager_overlay_header" class="custom-region-manager-overlay-header" style="width:100%; " >
<h1 id="custom_region_manager_overlay_X_for_exit_overlay" class="custom-region-manager-overlay-X-for-exit-overlay" >X</h1>
<h1 id="custom_region_manager_header_text" class="custom-region-manager-overlay-header-text">
Custom Protein Region Manager
</h1>
</div>


<div id="custom_region_manager_left_pane" class="custom-region-manager-left-pane">

<div style="width:100%;text-align:center;font-weight:bold;font-size:14pt;margin-top:5px;">Select Protein</div>


<div id="custom_region_manager_protein_list" class="custom-region-manager-protein-list">

</div>


</div>

<div style="font-size:14pt;" id="custom_region_manager_right_pane_empty" class="custom-region-manager-right-pane">
<div style="margin:10px;">
This tools allows you to define custom protein domain annotations that may optionally appear on the
protein bars in the image viewer. These include binding domains, structural motifs, or any other
annotation you like.

<br><br>

These may be viewed by choosing &quot;Custom Regions&quot; in the &quot;Show Feature Annotations&quot; select list.

<br><br>

Choose a protein to the left to define domains for that protein.
</div>
</div>


<div style="display:none;" id="custom_region_manager_right_pane_protein_selected" class="custom-region-manager-right-pane">

<div style="width:100%;text-align:center;font-weight:bold;font-size:14pt;margin-top:5px;">Add/Change Annotations</div>

<div id="custom_region_manager_error_div" style="margin:5px;display:none;width:350px;color:red;font-size:12pt;border-width:1px;border-color:red;border-style:solid;padding:5px;"></div>
<div id="custom_region_manager_info_div" style="margin:5px;display:none;width:350px;color:#7c783c;font-size:12pt;border-width:1px;border-color:#7c783c;border-style:solid;padding:5px;"></div>
<div id="custom_region_manager_success_div" style="margin:5px;display:none;width:350px;color:#3f7c3c;font-size:12pt;border-width:1px;border-color:#3f7c3c;border-style:solid;padding:5px;"></div>


<!-- Where we'll put the custom annotations for the selected protein -->
<div id="custom_region_manager_right_pane_add_domain">


<div style="margin-top:10px;" id="custom_region_manager_add_domains_list">
</div>

</div>


</div>


</div>


<script id="custom_region_manager_region_form_template" type="text/x-handlebars-template">

<div style="margin-top:10px;">
<form class="region-input-form" style="font-size:12pt;">

Start: <input class="region_form_input" type="text" id="startPosition" size="4" value="{{startPosition}}"/>
End: <input class="region_form_input" type="text" id="endPosition" size="4" value="{{endPosition}}"/>

{{#if annotationColor}}
Color: <span id="custom_region_manager_right_pane_add_domain_color" class="color_picker_box" style="background-color:{{annotationColor}};">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> <span style="font-size:10pt;">(click color)</span>
{{else}}
Color: <span id="custom_region_manager_right_pane_add_domain_color" class="color_picker_box" style="background-color:#ff0000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> <span style="font-size:10pt;">(click color)</span>
{{/if}}

<div style="margin-top:5px;">Annotation: <input id="annotation_text" class="region_form_input" type="text" size="30" maxlength="2000" value="{{annotationText}}"/></div>

</form>
</div>
</script>


<script id="custom_region_manager_region_form_buttons" type="text/x-handlebars-template">

<div style="margin-top:10px;" id="custom_region_manager_right_pane_form_buttons">
<form>
<input id="custom_region_manager_create_new_region_button" type="button" value="+Create New Region" class="tool_tip_attached_jq" data-tooltip="Add custom domain annotation for protein." />
<input id="custom_region_manager_save_button" type="button" value="Save to Database" class="tool_tip_attached_jq" data-tooltip="Save changes to database." />
<input id="custom_region_manager_cancel_button" type="button" value="Reset" class="tool_tip_attached_jq" data-tooltip="Discard changes." />
</form>
<span style="font-size:10pt;">Regions with no start, end, and annotation will be ignored.</span>
</div>
</script>



<%-- Select Protein Overlay --%>

Expand Down
156 changes: 155 additions & 1 deletion proxl_web_app/WebRoot/css/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,9 @@ input { font-size:20px; }

BODY.inset-page, BODY.login-page, BODY.reset-password-page, BODY.reset-password-code-fail-page { background-color: #FFF8F8 }


body.view-merged-image-page .colorpicker {
z-index:21;
}


/* */
Expand Down Expand Up @@ -1516,6 +1518,158 @@ div.searches-change-display-order-overlay-user-selected-search:hover { backgroun
/* --------------------------------------- */


/* --- custom region annotation manager styles --- */

.custom_region_manager_modal_dialog_overlay_background {


cursor: pointer; /* set mouse to pointer */

z-index: 18;

background-color: black;
opacity: .80;
filter: Alpha(Opacity=80);

/* Moved to inline style in header so context is not hard coded
background: #666 url(/???context???/css/jquery-ui-1.10.2-Themes/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
*/
/*
opacity: .50;
filter: Alpha(Opacity=50);
*/
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


div.custom-region-manager-overlay-container {

opacity: 1;
filter: Alpha(Opacity=100);

background-color:white;
outline: 0px;

position: absolute;
top: 20px;
left: 20px;

border: 1px;
border-style: solid;
border-color: #D3D3D3 ;

display: block;
z-index: 20;

width: 600px;
height:400px;

}

.custom-region-manager-overlay-header {

height: 35px;
background-color: #FFF0F0; padding-bottom: 5px;

border-width: 0px;
border-bottom-width: 1px;
border-style: solid;
border-color: #D3D3D3 ;
}


.custom-region-manager-left-pane {

position:absolute;
top:45px;
left:0px;
height: 350px;
width:200px;
background-color:white;
padding-bottom: 5px;
float:left;
border-width: 0px;
border-right-width: 1px;
border-style: solid;
border-color: #D3D3D3 ;

margin:0px;
}

.custom-region-manager-right-pane {
position:absolute;
top:45px;
left:205px;
height: 350px;
width:390px;
background-color:white;
padding-bottom: 5px;
float:right;
border-width: 0px;
margin:0px;
}

div.custom-region-manager-protein-list {
width:100%;
height:317px;
max-height:317px;
margin:0px;
margin-top:10px;
padding:0px;
border-width:0px;
overflow: scroll;
}

div.custom-region-manager-protein-item {

width:100%;
height:30px;
line-height:30px;
border-width: 0px;
border-top-width:1px;
border-style: solid;
border-color: #D3D3D3;
font-size:12pt;
text-indent:5px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

div.last-item {
border-bottom-width:1px;
border-style: solid;
border-color: #D3D3D3;
}

div.custom-region-manager-protein-item:hover {
background-color:#A55353;
color:white;
}

div.custom-region-manager-selected-item {
background-color:#A55353;
color:white;
}

div#custom_region_manager_right_pane_protein_selected {
overflow:scroll;
}


.custom-region-manager-overlay-X-for-exit-overlay { float: right; border-color: #000000; height:33px; background-color: #A55353; color: white; padding: 3px; margin: 0px; cursor: pointer; }

.custom-region-manager-overlay-header-text { color: black; padding: 3px; margin: 0px; text-align: center; }

.custom-region-manager-overlay-body { padding: 20px; }




/* ----- Protein Selector Overlay Div on View Image Page modal dialog background ----- */

.select-protein-modal-dialog-overlay-background {
Expand Down
13 changes: 12 additions & 1 deletion proxl_web_app/WebRoot/js/circle-plot-viewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,11 @@ circlePlotViewer.prototype.drawFeatureAnnotationData = function( svgRootSnapSVGO
} else if( annoType === SELECT_ELEMENT_ANNOTATION_TYPE_SEQUENCE_COVERAGE ) {

segments = _ranges[ pid ];

} else if( annoType === SELECT_ELEMENT_ANNOTATION_TYPE_CUSTOM ) {

segments = _customRegionManager._customRegionAnnotationData[ pid ];
if( segments === undefined ) { segments = [ ]; }

} else {
console.log( "Error, unknown feature annotation type selected." );
Expand Down Expand Up @@ -203,6 +208,12 @@ circlePlotViewer.prototype.drawFeatureAnnotationData = function( svgRootSnapSVGO

toolTipText = 'Sequence coverage segment: start: ' + segment.start + ', end: ' + segment.end;

} else if( annoType === SELECT_ELEMENT_ANNOTATION_TYPE_CUSTOM ) {

color = segment.annotationColor;

toolTipText = segment.annotationText;

}

// draw this segment
Expand Down Expand Up @@ -1851,7 +1862,7 @@ circlePlotViewer.prototype.getCurvedBarPath = function( startAngle, endAngle){
/**
* Get the radii to use for protein bars
*
* @returns { outer: outer radius, inner: inner radius
* @returns { outer: outer radius, inner: inner radius }
*/
circlePlotViewer.prototype.getProteinBarRadii = function() {

Expand Down

0 comments on commit 239eee4

Please sign in to comment.