Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add tool search to workflow editor. Also standardize tool panel struc…
…ture and style so that it is the same in both the main interface and in the workflow editor; workflow editor now uses styles in tool_menu.css as well.
  • Loading branch information
Jeremy Goecks committed Sep 20, 2010
1 parent 16d78fe commit 6bfaa14
Show file tree
Hide file tree
Showing 6 changed files with 156 additions and 44 deletions.
1 change: 0 additions & 1 deletion database/export/info.txt

This file was deleted.

1 change: 0 additions & 1 deletion database/import/info.txt

This file was deleted.

2 changes: 1 addition & 1 deletion static/june_2007_style/blue/tool_menu.css
Expand Up @@ -6,4 +6,4 @@ div.toolSectionTitle{font-weight:bold;}
div.toolPanelLabel{padding-top:10px;padding-bottom:5px;font-weight:bold;color:gray;text-transform:uppercase;}
div.toolTitle{padding-top:5px;padding-bottom:5px;margin-left:16px;margin-right:10px;display:list-item;list-style:square outside;}
div.toolSectionBody div.toolPanelLabel{padding-top:5px;padding-bottom:5px;margin-left:16px;margin-right:10px;display:list-item;list-style:none outside;}
div.toolTitleNoSection{padding-bottom:0px;}
div.toolTitleNoSection{padding-bottom:0px;font-weight: bold;}
1 change: 1 addition & 0 deletions static/june_2007_style/tool_menu.css.tmpl
Expand Up @@ -66,4 +66,5 @@ div.toolSectionBody div.toolPanelLabel
div.toolTitleNoSection
{
padding-bottom: 0px;
font-weight: bold;
}
4 changes: 2 additions & 2 deletions templates/root/tool_menu.mako
Expand Up @@ -125,7 +125,7 @@
// Start a new ajax-request in X ms
$("#search-spinner").show();
this.timer = setTimeout(function () {
$.get( "tool_search", { query: q }, function (data) {
$.get("${h.url_for( controller='root', action='tool_search' )}", { query: q }, function (data) {
// input.removeClass(config.loadingClass);
// Show live-search if results and search-term aren't empty
$("#search-no-results").hide();
Expand Down Expand Up @@ -315,7 +315,7 @@
## Feedback when search returns no results.
<div id="search-no-results" style="display: none; padding-top: 5px">
<em><strong>Your search did not match any tools.</strong></em>
<em><strong>Search did not match any tools.</strong></em>
</div>
## Link to workflow management. The location of this may change, but eventually
Expand Down
191 changes: 152 additions & 39 deletions templates/workflow/editor.mako
Expand Up @@ -51,6 +51,9 @@
workflow = null;
canvas_manager = null;
active_ajax_call = false;
var galaxy_async = new GalaxyAsync();
galaxy_async.set_func_url(galaxy_async.set_user_pref, "${h.url_for( controller='user', action='set_user_pref_async' )}");
// jQuery onReady
$( function() {
Expand All @@ -62,6 +65,123 @@
return;
}
// Init tool options.
%if trans.app.toolbox_search.enabled:
make_popupmenu( $("#tools-options-button"), {
## Search tools menu item.
<%
show_tool_search = False
if trans.user:
show_tool_search = trans.user.preferences.get( "workflow.show_tool_search", "True" )
if show_tool_search == "True":
initial_text = "Hide Search"
else:
initial_text = "Search Tools"
%>
"${initial_text}": function() {
// Show/hide menu and update vars, user preferences.
var menu = $('#tool-search');
if (menu.is(":visible"))
{
// Hide menu.
pref_value = "False";
menu_option_text = "Search Tools";
menu.toggle();
// Reset search.
reset_tool_search(true);
}
else
{
// Show menu.
pref_value = "True";
menu_option_text = "Hide Search";
menu.toggle();
}
// Update menu option.
$("#tools-options-button-menu").find("li").eq(0).text(menu_option_text);
galaxy_async.set_user_pref("workflow.show_tool_search", pref_value);
}
});
// Init searching.
$("#tool-search-query").click( function (){
$(this).focus();
$(this).select();
})
.keyup( function () {
// Remove italics.
$(this).css("font-style", "normal");
// Don't update if same value as last time
if ( this.value.length < 3 ) {
reset_tool_search(false);
} else if ( this.value != this.lastValue ) {
// Add class to denote that searching is active.
$(this).addClass("search_active");
// input.addClass(config.loadingClass);
// Add '*' to facilitate partial matching.
var q = this.value + '*';
// Stop previous ajax-request
if (this.timer) {
clearTimeout(this.timer);
}
// Start a new ajax-request in X ms
$("#search-spinner").show();
this.timer = setTimeout(function () {
$.get("${h.url_for( controller='root', action='tool_search' )}", { query: q }, function (data) {
// input.removeClass(config.loadingClass);
// Show live-search if results and search-term aren't empty
$("#search-no-results").hide();
// Hide all tool sections.
$(".toolSectionWrapper").hide();
// This hides all tools but not workflows link (which is in a .toolTitle div).
$(".toolSectionWrapper").find(".toolTitle").hide();
if ( data.length != 0 ) {
// Map tool ids to element ids and join them.
var s = $.map( data, function( n, i ) { return "#link-" + n; } ).join( ", " );
// First pass to show matching tools and their parents.
$(s).each( function() {
// Add class to denote match.
$(this).parent().addClass("search_match");
$(this).parent().show().parent().parent().show().parent().show();
});
// Hide labels that have no visible children.
$(".toolPanelLabel").each( function() {
var this_label = $(this);
var next = this_label.next();
var no_visible_tools = true;
// Look through tools following label and, if none are visible, hide label.
while (next.length != 0 && next.hasClass("toolTitle"))
{
if (next.is(":visible"))
{
no_visible_tools = false;
break;
}
else
next = next.next();
}
if (no_visible_tools)
this_label.hide();
});
} else {
$("#search-no-results").show();
}
$("#search-spinner").hide();
}, "json" );
}, 200 );
}
this.lastValue = this.value;
});
%endif
// Load jStore for local storage
$.jStore.init("galaxy"); // Auto-select best storage
Expand Down Expand Up @@ -564,7 +684,7 @@
<%def name="stylesheets()">
## Include "base.css" for styling tool menu and forms (details)
${h.css( "base", "autocomplete_tagging")}
${h.css( "base", "autocomplete_tagging", "tool_menu" )}
## But make sure styles for the layout take precedence
${parent.stylesheets()}
Expand Down Expand Up @@ -593,25 +713,6 @@
margin-left: 10px;
margin-right: 10px;
}
div.toolSectionPad {
margin: 0;
padding: 0;
height: 5px;
font-size: 0px;
}
div.toolSectionDetailsInner {
margin-left: 5px;
margin-right: 5px;
}
div.toolSectionTitle {
padding-bottom: 0px;
font-weight: bold;
}
div.toolPanelLabel {
padding-top: 5px;
padding-bottom: 5px;
font-weight: bold;
}
div.toolMenuGroupHeader {
font-weight: bold;
padding-top: 0.5em;
Expand All @@ -621,18 +722,6 @@
border-bottom: dotted #333 1px;
margin-bottom: 0.5em;
}
div.toolTitle {
padding-top: 5px;
padding-bottom: 5px;
margin-left: 16px;
margin-right: 10px;
display: list-item;
list-style: square outside;
}
div.toolTitleNoSection {
padding-bottom: 0px;
font-weight: bold;
}
div.toolTitleDisabled {
padding-top: 5px;
padding-bottom: 5px;
Expand Down Expand Up @@ -796,11 +885,9 @@

## Render a label in the tool panel
<%def name="render_label( label )">
<div class="toolSectionPad"></div>
<div class="toolPanelLabel" id="title_${label.id}">
<span>${label.text}</span>
</div>
<div class="toolSectionPad"></div>
</%def>

<%def name="overlay()">
Expand All @@ -810,19 +897,39 @@

<%def name="left_panel()">
<div class="unified-panel-header" unselectable="on">
<div class="unified-panel-header-inner">
Tools
<div class='unified-panel-header-inner'>
<div style="float: right">
<a class='panel-header-button popup' id="tools-options-button" href="#">${_('Options')}</a>
</div>
${n_('Tools')}
</div>
</div>
<div class="unified-panel-body" style="overflow: auto;">
<div class="toolMenu">
<div class="toolMenu">
## Tool search.
<%
show_tool_search = False
if trans.user:
show_tool_search = trans.user.preferences.get( "workflow.show_tool_search", "True" )
if show_tool_search == "True":
display = "block"
else:
display = "none"
%>
<div id="tool-search" style="padding-bottom: 5px; position: relative; display: ${display}; width: 100%">
<input type="text" name="query" value="search tools" id="tool-search-query" style="width: 100%; font-style:italic; font-size: inherit"/>
<img src="${h.url_for('/static/images/loading_small_white_bg.gif')}" id="search-spinner" style="display: none; position: absolute; right: 0; top: 5px;"/>
</div>
<div class="toolSectionList">
%for key, val in app.toolbox.tool_panel.items():
<div class="toolSectionWrapper">
%if key.startswith( 'tool' ):
${render_tool( val, False )}
%elif key.startswith( 'section' ):
<% section = val %>
<% section = val %>
<div class="toolSectionTitle" id="title_${section.id}">
<span>${section.name}</span>
</div>
Expand All @@ -837,12 +944,17 @@
%endfor
</div>
</div>
<div class="toolSectionPad"></div>
%elif key.startswith( 'label' ):
${render_label( val )}
%endif
<div class="toolSectionPad"></div>
</div>
%endfor
</div>
## Feedback when search returns no results.
<div id="search-no-results" style="display: none; padding-top: 5px">
<em><strong>Search did not match any tools.</strong></em>
</div>
<div>&nbsp;</div>
<div class="toolMenuGroupHeader">Workflow control</div>
<div class="toolSectionTitle" id="title___workflow__input__">
Expand All @@ -857,6 +969,7 @@
</div>
</div>
</div>
</%def>

<%def name="center_panel()">
Expand Down

0 comments on commit 6bfaa14

Please sign in to comment.