mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
Galaxy Scratchbook plugin. Allows to display multiple Trackster visualization on a single page.
This commit is contained in:
Aysam Guerler
File diff suppressed because it is too large
Load Diff
@@ -367,13 +367,34 @@ var TabularButtonTracksterView = Backbone.View.extend(
|
||||
$(parent.document).find('input[name=id]:checked').each(function() {
|
||||
var vis_id = $(this).val();
|
||||
dataset_params.id = vis_id;
|
||||
parent.location = vis_url + "/trackster?" + $.param(dataset_params);
|
||||
|
||||
// add widget
|
||||
parent.frame_manager.frame_new(
|
||||
{
|
||||
title : "Trackster",
|
||||
type : "url",
|
||||
content : vis_url + "/trackster?" + $.param(dataset_params)
|
||||
});
|
||||
|
||||
// hide
|
||||
parent.hide_modal();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
"View in new visualization": function() {
|
||||
parent.location = vis_url + "/trackster?" + $.param(dataset_params);
|
||||
var url = vis_url + "/trackster?" + $.param(dataset_params);
|
||||
|
||||
// add widget
|
||||
parent.frame_manager.frame_new(
|
||||
{
|
||||
title : "Trackster",
|
||||
type : "url",
|
||||
content : url
|
||||
});
|
||||
|
||||
// hide
|
||||
parent.hide_modal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -237,7 +237,7 @@ var HDABaseView = Backbone.View.extend( LoggableMixin ).extend(
|
||||
|
||||
} else {
|
||||
displayBtnData.title = _l( 'View data' );
|
||||
displayBtnData.href = this.urls.display;
|
||||
displayBtnData.href = "javascript:parent.frame_manager.frame_new({title: 'Data Viewer', type: 'url', center: true, content: '" + this.urls.display + "'});";
|
||||
}
|
||||
|
||||
this.displayButton = new IconButtonView({ model : new IconButton( displayBtnData ) });
|
||||
|
||||
@@ -239,25 +239,8 @@ var HDAEditView = HDABaseView.extend( LoggableMixin ).extend(
|
||||
* @returns {jQuery} rendered DOM
|
||||
*/
|
||||
_render_visualizationsButton : function(){
|
||||
var visualizations = this.model.get( 'visualizations' );
|
||||
if( ( !this.model.hasData() )
|
||||
|| ( _.isEmpty( visualizations ) ) ){
|
||||
this.visualizationsButton = null;
|
||||
return null;
|
||||
}
|
||||
|
||||
//TODO: this is a bridge to allow the framework to be switched off
|
||||
// remove this fn and use the other when fully integrated
|
||||
if( _.isObject( visualizations[0] ) ){
|
||||
return this._render_visualizationsFrameworkButton( visualizations );
|
||||
}
|
||||
|
||||
if( !this.urls.visualization ){
|
||||
this.visualizationsButton = null;
|
||||
return null;
|
||||
}
|
||||
|
||||
var dbkey = this.model.get( 'dbkey' ),
|
||||
visualizations = this.model.get( 'visualizations' ),
|
||||
visualization_url = this.urls.visualization,
|
||||
popup_menu_dict = {},
|
||||
params = {
|
||||
@@ -267,10 +250,17 @@ var HDAEditView = HDABaseView.extend( LoggableMixin ).extend(
|
||||
// Add dbkey to params if it exists.
|
||||
if( dbkey ){ params.dbkey = dbkey; }
|
||||
|
||||
if( !( this.model.hasData() )
|
||||
|| !( visualizations && visualizations.length )
|
||||
|| !( visualization_url ) ){
|
||||
this.visualizationsButton = null;
|
||||
return null;
|
||||
}
|
||||
|
||||
// render the icon from template
|
||||
this.visualizationsButton = new IconButtonView({ model : new IconButton({
|
||||
title : _l( 'Visualize' ),
|
||||
href : this.urls.visualization,
|
||||
href : visualization_url,
|
||||
icon_class : 'chart_curve'
|
||||
})});
|
||||
var $icon = this.visualizationsButton.render().$el;
|
||||
@@ -289,7 +279,14 @@ var HDAEditView = HDABaseView.extend( LoggableMixin ).extend(
|
||||
return create_scatterplot_action_fn( visualization_url, params );
|
||||
default:
|
||||
return function(){
|
||||
window.parent.location = visualization_url + '/' + visualization + '?' + $.param( params ); };
|
||||
// add widget
|
||||
parent.frame_manager.frame_new(
|
||||
{
|
||||
title : "Visualization",
|
||||
type : "url",
|
||||
content : visualization_url + '/' + visualization + '?' + $.param( params )
|
||||
});
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -309,40 +306,6 @@ var HDAEditView = HDABaseView.extend( LoggableMixin ).extend(
|
||||
}
|
||||
return $icon;
|
||||
},
|
||||
|
||||
/** Render an icon-button or popupmenu of links based on the applicable visualizations
|
||||
* @returns {jQuery} rendered DOM
|
||||
*/
|
||||
_render_visualizationsFrameworkButton : function( visualizations ){
|
||||
if( !( this.model.hasData() )
|
||||
|| !( visualizations && !_.isEmpty( visualizations ) ) ){
|
||||
this.visualizationsButton = null;
|
||||
return null;
|
||||
}
|
||||
|
||||
// render the icon from template
|
||||
this.visualizationsButton = new IconButtonView({ model : new IconButton({
|
||||
title : _l( 'Visualize' ),
|
||||
icon_class : 'chart_curve'
|
||||
})});
|
||||
var $icon = this.visualizationsButton.render().$el;
|
||||
$icon.addClass( 'visualize-icon' ); // needed?
|
||||
|
||||
// No need for popup menu because there's a single visualization.
|
||||
if( _.keys( visualizations ).length === 1 ) {
|
||||
$icon.attr( 'title', _.keys( visualizations )[0] );
|
||||
$icon.attr( 'href', _.values( visualizations )[0] );
|
||||
|
||||
// >1: Populate menu dict with visualization fns, make the popupmenu
|
||||
} else {
|
||||
var popup_menu_options = [];
|
||||
_.each( visualizations, function( linkData ) {
|
||||
popup_menu_options.push( linkData );
|
||||
});
|
||||
var popup = new PopupMenu( $icon, popup_menu_options );
|
||||
}
|
||||
return $icon;
|
||||
},
|
||||
|
||||
// ......................................................................... secondary actions
|
||||
/** Render secondary actions: currently tagging and annotation (if user is allowed).
|
||||
@@ -604,9 +567,16 @@ HDAEditView.templates = {
|
||||
//TODO: should be imported from scatterplot.js OR abstracted to 'load this in the galaxy_main frame'
|
||||
function create_scatterplot_action_fn( url, params ){
|
||||
action = function() {
|
||||
var galaxy_main = $( window.parent.document ).find( 'iframe#galaxy_main' ),
|
||||
final_url = url + '/scatterplot?' + $.param(params);
|
||||
galaxy_main.attr( 'src', final_url );
|
||||
|
||||
// add widget
|
||||
parent.frame_manager.frame_new(
|
||||
{
|
||||
title : "Scatterplot",
|
||||
type : "url",
|
||||
content : url + '/scatterplot?' + $.param(params),
|
||||
center : true
|
||||
});
|
||||
|
||||
//TODO: this needs to go away
|
||||
$( 'div.popmenu-wrapper' ).remove();
|
||||
return false;
|
||||
@@ -650,13 +620,32 @@ function create_trackster_action_fn(vis_url, dataset_params, dbkey) {
|
||||
$(parent.document).find('input[name=id]:checked').each(function() {
|
||||
var vis_id = $(this).val();
|
||||
dataset_params.id = vis_id;
|
||||
parent.location = vis_url + "/trackster?" + $.param(dataset_params);
|
||||
|
||||
// hide modal
|
||||
parent.hide_modal();
|
||||
|
||||
// add widget
|
||||
parent.frame_manager.frame_new(
|
||||
{
|
||||
title : "Trackster",
|
||||
type : "url",
|
||||
content : vis_url + "/trackster?" + $.param(dataset_params)
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
"View in new visualization": function() {
|
||||
parent.location = vis_url + "/trackster?" + $.param(dataset_params);
|
||||
// hide modal
|
||||
parent.hide_modal();
|
||||
|
||||
// add widget
|
||||
parent.frame_manager.frame_new(
|
||||
{
|
||||
title : "Trackster",
|
||||
type : "url",
|
||||
content : vis_url + "/trackster?" + $.param(dataset_params)
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* Galaxy CSS utilities
|
||||
*/
|
||||
|
||||
// dependencies
|
||||
define(["libs/underscore"], function(_) {
|
||||
|
||||
// get css value
|
||||
function get_attribute (classname, name)
|
||||
{
|
||||
// place dummy element
|
||||
var el = $('<div class="' + classname + '"></div>');
|
||||
|
||||
// required append
|
||||
el.appendTo(':eq(0)');
|
||||
|
||||
// get value
|
||||
var value = el.css(name).replace(/[^-\d\.]/g, '');
|
||||
|
||||
// remove element
|
||||
el.remove();
|
||||
|
||||
// return css value
|
||||
return value;
|
||||
}
|
||||
|
||||
// load css
|
||||
function load_file (url)
|
||||
{
|
||||
// check if css is already available
|
||||
if (!$('link[href="' + url + '"]').length)
|
||||
$('<link href="' + url + '" rel="stylesheet">').appendTo('head');
|
||||
};
|
||||
|
||||
// return
|
||||
return {
|
||||
load_file : load_file,
|
||||
get_attribute : get_attribute
|
||||
};
|
||||
|
||||
});
|
||||
@@ -0,0 +1,214 @@
|
||||
body {background: #000000}
|
||||
.f-corner
|
||||
{
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.f-toggle
|
||||
{
|
||||
color: #BCC800;
|
||||
}
|
||||
|
||||
/*
|
||||
galaxy-frames
|
||||
*/
|
||||
|
||||
.galaxy-frame-background
|
||||
{
|
||||
z-index : 14000;
|
||||
position : absolute;
|
||||
display : none;
|
||||
top : 0px;
|
||||
left : 0px;
|
||||
height : 100%;
|
||||
width : 100%;
|
||||
opacity : 0.6;
|
||||
background : #11131A;
|
||||
overflow : auto;
|
||||
}
|
||||
|
||||
.galaxy-frame-shadow
|
||||
{
|
||||
z-index : 14001;
|
||||
position : absolute;
|
||||
display : none;
|
||||
top : 0px;
|
||||
left : 0px;
|
||||
opacity : 0.5;
|
||||
background : #2C3143;
|
||||
border : 1px solid #EEEEEE;
|
||||
}
|
||||
|
||||
.galaxy-frame
|
||||
{
|
||||
z-index : 14002;
|
||||
overflow : hidden;
|
||||
position : absolute;
|
||||
top : 0px;
|
||||
left : 0px;
|
||||
height : 100%;
|
||||
width : 100%;
|
||||
opacity : 1.0;
|
||||
background : #FFFFFF;
|
||||
border : 1px solid #D0D0D0;
|
||||
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
|
||||
}
|
||||
/*
|
||||
panel menu button
|
||||
*/
|
||||
.galaxy-frame-menu
|
||||
{
|
||||
z-index : 14003;
|
||||
position : absolute;
|
||||
cursor : pointer;
|
||||
color : #BCC800;
|
||||
right : 10px;
|
||||
}
|
||||
|
||||
.galaxy-frame-scroll-up
|
||||
{
|
||||
top : 50px;
|
||||
}
|
||||
|
||||
.galaxy-frame-scroll-down
|
||||
{
|
||||
bottom : 20px;
|
||||
}
|
||||
|
||||
/*
|
||||
panel active button
|
||||
*/
|
||||
.galaxy-frame-active
|
||||
{
|
||||
z-index : 34010;
|
||||
position : absolute;
|
||||
top : 8px;
|
||||
right : 120px;
|
||||
padding : 0px 0px 0px 0px;
|
||||
cursor : pointer;
|
||||
color : #D0D0D0;
|
||||
}
|
||||
|
||||
/*
|
||||
panel load button
|
||||
*/
|
||||
.galaxy-frame-load
|
||||
{
|
||||
z-index : 34010;
|
||||
position : absolute;
|
||||
top : 6px;
|
||||
right : 165px;
|
||||
padding : 0px 0px 0px 0px;
|
||||
cursor : pointer;
|
||||
color : #BCC800;
|
||||
}
|
||||
|
||||
.galaxy-frame-load .number
|
||||
{
|
||||
position : absolute;
|
||||
font-weight : bold;
|
||||
font-size : 12px;
|
||||
font-family : Verdana, Arial;
|
||||
top : 8px;
|
||||
left : 26px;
|
||||
}
|
||||
|
||||
/*
|
||||
frame components
|
||||
*/
|
||||
.galaxy-frame .f-content
|
||||
{
|
||||
position : absolute;
|
||||
overflow : hidden;
|
||||
background : #FFFFFF;
|
||||
border : none;
|
||||
top : 24px;
|
||||
bottom : 3px;
|
||||
left : 3px;
|
||||
right : 3px;
|
||||
}
|
||||
|
||||
.galaxy-frame .f-cover
|
||||
{
|
||||
position : absolute;
|
||||
display : none;
|
||||
top : 0px;
|
||||
left : 0px;
|
||||
height : 100%;
|
||||
width : 100%;
|
||||
opacity : 0.0;
|
||||
background : #FFFFFF;
|
||||
}
|
||||
|
||||
.galaxy-frame .f-iframe
|
||||
{
|
||||
border : none;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
}
|
||||
|
||||
.galaxy-frame .f-header
|
||||
{
|
||||
height : 17px;
|
||||
margin : 2px;
|
||||
cursor : pointer;
|
||||
border : 1px solid #000000;
|
||||
background : #2C3143;
|
||||
color : #FFFFFF;
|
||||
font-weight : bold;
|
||||
}
|
||||
|
||||
.galaxy-frame .f-title
|
||||
{
|
||||
position : absolute;
|
||||
top : 4px;
|
||||
left : 16px;
|
||||
right : 16px;
|
||||
font-size : 12px;
|
||||
font-family : Verdana, Arial;
|
||||
text-align : center;
|
||||
}
|
||||
|
||||
/*
|
||||
frame icons
|
||||
*/
|
||||
|
||||
.galaxy-frame .f-icon
|
||||
{
|
||||
position : absolute;
|
||||
cursor : pointer;
|
||||
font-style : normal;
|
||||
}
|
||||
|
||||
.galaxy-frame .f-not-allowed
|
||||
{
|
||||
cursor : not-allowed;
|
||||
}
|
||||
|
||||
.galaxy-frame .f-close
|
||||
{
|
||||
right : 5px;
|
||||
top : 4px;
|
||||
}
|
||||
|
||||
.galaxy-frame .f-pin
|
||||
{
|
||||
left : 6px;
|
||||
top : 4px;
|
||||
}
|
||||
|
||||
.galaxy-frame .f-resize
|
||||
{
|
||||
right : 0px;
|
||||
bottom : 0px;
|
||||
background : #FFFFFF;
|
||||
width : 16px;
|
||||
height : 16px;
|
||||
color : #2C3143;
|
||||
right : 0px;
|
||||
bottom : 0px;
|
||||
text-align : center;
|
||||
line-height : 16px;
|
||||
border : 0px solid #2C3143;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
#masthead
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#messagebox
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#center
|
||||
{
|
||||
top: 0 !important;
|
||||
}
|
||||
|
||||
#right
|
||||
{
|
||||
top: 0 !important;
|
||||
}
|
||||
@@ -59,7 +59,8 @@
|
||||
'libs/backbone/backbone',
|
||||
'libs/backbone/backbone-relational',
|
||||
'libs/handlebars.runtime',
|
||||
'galaxy.base'
|
||||
'galaxy.base',
|
||||
'libs/require'
|
||||
)}
|
||||
|
||||
${h.templates(
|
||||
@@ -71,6 +72,28 @@
|
||||
)}
|
||||
|
||||
<script type="text/javascript">
|
||||
## check if its in a galaxy iframe
|
||||
function is_in_galaxy_frame()
|
||||
{
|
||||
var iframes = parent.document.getElementsByTagName("iframe");
|
||||
for (var i=0, len=iframes.length; i < len; ++i)
|
||||
if (document == iframes[i].contentDocument || self == iframes[i].contentWindow)
|
||||
return $(iframes[i]).hasClass('f-iframe');
|
||||
return false;
|
||||
};
|
||||
|
||||
## load css
|
||||
function load_css (url)
|
||||
{
|
||||
## check if css is already available
|
||||
if (!$('link[href="' + url + '"]').length)
|
||||
$('<link href="' + url + '" rel="stylesheet">').appendTo('head');
|
||||
};
|
||||
|
||||
## load additional style sheet
|
||||
if (is_in_galaxy_frame())
|
||||
load_css('/static/style/galaxy.frame.masthead.css');
|
||||
|
||||
// console protection
|
||||
window.console = window.console || {
|
||||
log : function(){},
|
||||
@@ -93,6 +116,20 @@
|
||||
sweepster_url: '${h.url_for( controller="/visualization", action="sweepster" )}',
|
||||
visualization_url: '${h.url_for( controller="/visualization", action="save" )}',
|
||||
});
|
||||
|
||||
## configure require
|
||||
require.config({
|
||||
baseUrl: "${h.url_for('/static/scripts') }",
|
||||
shim: {
|
||||
"libs/underscore": { exports: "_" },
|
||||
"libs/backbone/backbone": { exports: "Backbone" },
|
||||
"libs/backbone/backbone-relational": ["libs/backbone/backbone"]
|
||||
}
|
||||
});
|
||||
|
||||
## frame manager
|
||||
var frame_manager = null;
|
||||
require(['galaxy.frame'], function(frame) { this.frame_manager = new frame.GalaxyFrameManager(); });
|
||||
</script>
|
||||
</%def>
|
||||
|
||||
@@ -276,7 +313,7 @@
|
||||
</div>
|
||||
</noscript>
|
||||
%endif
|
||||
<div id="everything" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-width: 600px;">
|
||||
<div id="everything" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
|
||||
## Background displays first
|
||||
<div id="background"></div>
|
||||
## Layer iframes over backgrounds
|
||||
|
||||
@@ -142,13 +142,15 @@ ${h.js( "mvc/base-mvc", "mvc/user/user-model", "mvc/user/user-quotameter" )}
|
||||
tab( "lab", "Lab", None, menu_options=menu_options, visible=( trans.user and ( trans.user.requests or trans.app.security_agent.get_accessible_request_types( trans, trans.user ) ) ) )
|
||||
%>
|
||||
|
||||
|
||||
|
||||
## Visualization menu.
|
||||
<%
|
||||
menu_options = [
|
||||
[_('New Track Browser'), h.url_for( controller='/visualization', action='trackster' ) ],
|
||||
[_('Saved Visualizations'), h.url_for( controller='/visualization', action='list' ) ]
|
||||
[_('New Track Browser'), "javascript:frame_manager.frame_new({title: 'Trackster', type: 'url', content: '/visualization/trackster'});"],
|
||||
[_('Saved Visualizations'), "javascript:frame_manager.frame_new({ type: 'url', content : '/visualization/list'});" ]
|
||||
]
|
||||
tab( "visualization", _("Visualization"), h.url_for( controller='/visualization', action='list'), menu_options=menu_options )
|
||||
tab( "visualization", _("Visualization"), "javascript:frame_manager.frame_new({title: 'Trackster', type: 'url', content: '/visualization/trackster'});", menu_options=menu_options )
|
||||
%>
|
||||
|
||||
## Cloud menu.
|
||||
|
||||
@@ -64,7 +64,7 @@ ${render_trackster_js_files()}
|
||||
$("#center .unified-panel-header-inner").append(ui.buttonMenu.$el);
|
||||
|
||||
// Hide bookmarks by default right now.
|
||||
parent.force_right_panel("hide");
|
||||
force_right_panel("hide");
|
||||
|
||||
// Resize view when showing/hiding right panel (bookmarks for now).
|
||||
$("#right-border").click(function() { view.resize_window(); });
|
||||
@@ -118,6 +118,7 @@ ${render_trackster_js_files()}
|
||||
function init_editor() {
|
||||
$("#title").text(view.name + " (" + view.dbkey + ")");
|
||||
|
||||
if (!is_in_galaxy_frame())
|
||||
window.onbeforeunload = function() {
|
||||
if (view.has_changes) {
|
||||
return "There are unsaved changes to your visualization which will be lost.";
|
||||
|
||||
Reference in New Issue
Block a user