root/galaxy-central/templates/tracks/browser.mako @ 3

リビジョン 2, 10.6 KB (コミッタ: hatakeyama, 14 年 前)

import galaxy-central
行番号 
1<%inherit file="/webapps/galaxy/base_panels.mako"/>
2
3<%def name="init()">
4<%
5    self.has_left_panel=False
6    self.has_right_panel=False
7    self.active_view="visualization"
8    self.message_box_visible=False
9%>
10</%def>
11
12<%def name="stylesheets()">
13${parent.stylesheets()}
14
15${h.css( "history", "autocomplete_tagging", "trackster", "overcast/jquery-ui-1.8.5.custom" )}
16
17<style type="text/css">
18    #center {
19        overflow: auto;
20    }
21    ul#sortable-ul {
22        list-style: none;
23        padding: 0;
24        margin: 5px;
25    }
26    ul#sortable-ul li {
27        display: block;
28        margin: 5px 0;
29        background: #eee;
30    }
31    .nav-container {
32        position: fixed;
33        width: 100%;
34        left: 0;
35        bottom: 0;
36    }
37    # Styles for filters.
38    .filter-name {
39        float: left;
40    }
41    table.filters {
42        border-collapse: separate;
43        border-spacing: 7px 0px;
44    }
45    .values {
46        padding-right: 1em;
47    }
48</style>
49</%def>
50
51<%def name="center_panel()">
52<div class="unified-panel-header" unselectable="on">
53    <div class="unified-panel-header-inner">
54        <div style="float:left;" id="title"></div>
55        <a class="panel-header-button right-float" href="${h.url_for( controller='visualization', action='list' )}">Close</a>
56        <a id="save-button" class="panel-header-button right-float" href="javascript:void(0);">Save</a>
57        <a id="add-track" class="panel-header-button right-float" href="javascript:void(0);">Add Tracks</a>
58    </div>
59</div>
60
61</%def>
62
63<%def name="javascripts()">
64${parent.javascripts()}
65${h.js( "galaxy.base", "galaxy.panels", "json2", "jquery", "jquery.event.drag", "jquery.autocomplete", "trackster", "jquery.ui.sortable.slider" )}
66
67<script type="text/javascript">
68
69    var data_url = "${h.url_for( action='data' )}",
70        reference_url = "${h.url_for( action='reference' )}",
71                chrom_url = "${h.url_for( action='chroms' )}",
72        view;
73   
74    $(function() {
75       
76        %if config:
77            view = new View( $("#center"), "${config.get('title') | h}", "${config.get('vis_id')}", "${config.get('dbkey')}" );
78            view.editor = true;
79            %for track in config.get('tracks'):
80                view.add_track(
81                    new ${track["track_type"]}( "${track['name'] | h}", view, ${track['dataset_id']}, ${track['filters']}, ${track['prefs']} )
82                );
83            %endfor
84            init();
85        %else:
86            var continue_fn = function() {
87                view = new View( $("#center"), $("#new-title").val(), undefined, $("#new-dbkey").val() );
88                view.editor = true;
89                init();
90                hide_modal();
91            };
92            $.ajax({
93                url: "${h.url_for( action='new_browser', default_dbkey=default_dbkey )}",
94                data: {},
95                error: function() { alert( "Couldn't create new browser" ) },
96                success: function(form_html) {
97                    show_modal("New Track Browser", form_html, {
98                        "Cancel": function() { window.location = "${h.url_for( controller='visualization', action='list' )}"; },
99                        "Continue": function() { $(document).trigger("convert_dbkeys"); continue_fn(); }
100                    });
101                    $("#new-title").focus();
102                    replace_big_select_inputs();
103                }
104            });
105        %endif
106               
107                $(document).bind( "redraw", function() {
108                        view.redraw();
109        });
110
111        // To adjust the size of the viewport to fit the fixed-height footer
112        var refresh = function() {
113            if (view !== undefined) {
114                view.viewport_container.height( $("#center").height() - $(".nav-container").height() - 40 );
115                view.nav_container.width( $("#center").width() );
116                view.redraw();
117            }
118        };
119        $(window).bind( "resize", function() { refresh(); } );
120        $("#right-border").bind( "click dragend", function() { refresh(); } );
121        $(window).trigger( "resize" );
122       
123        // Execute initializer for EDITOR specific javascript
124        function init() {
125            if (view.num_tracks === 0) {
126                $("#no-tracks").show();
127            }
128            $("#title").text(view.title + " (" + view.dbkey + ")");
129            $(".viewport-container").sortable({
130                start: function(e, ui) {
131                    view.in_reordering = true;
132                },
133                stop: function(e, ui) {
134                    view.in_reordering = false;
135                },
136                handle: ".draghandle",
137            });
138           
139            window.onbeforeunload = function() {
140                if ( view.has_changes ) {
141                    return "There are unsaved changes to your visualization which will be lost.";
142                }
143            };
144           
145            var add_async_success = function(track_data) {
146                var td = track_data,
147                                        track_types = { "LineTrack": LineTrack, "FeatureTrack": FeatureTrack, "ReadTrack": ReadTrack },
148                                        new_track = new track_types[track_data.track_type]( track_data.name, view, track_data.dataset_id, track_data.filters, track_data.prefs);
149                                       
150                view.add_track(new_track);
151                view.has_changes = true;
152                $("#no-tracks").hide();
153                sidebar_box(new_track);
154            };
155           
156            %if add_dataset is not None:
157                $.ajax( {
158                    url: "${h.url_for( action='add_track_async' )}",
159                    data: { id: "${add_dataset}" },
160                    dataType: "json",
161                    success: add_async_success
162                });
163               
164            %endif
165
166            // Use a popup grid to add more tracks
167            $("#add-track").bind( "click", function(e) {
168                $.ajax({
169                    url: "${h.url_for( action='list_datasets' )}",
170                    data: { "f-dbkey": view.dbkey },
171                    error: function() { alert( "Grid refresh failed" ); },
172                    success: function(table_html) {
173                        show_modal("Add Track &mdash; Select Dataset(s)", table_html, {
174                            "Cancel": function() {
175                                hide_modal();
176                            },
177                            "Insert": function() {
178                                $('input[name=id]:checked').each(function() {
179                                    var item_id = $(this).val();
180                                    $.ajax( {
181                                        url: "${h.url_for( action='add_track_async' )}",
182                                        data: { id: item_id },
183                                        dataType: "json",
184                                        success: add_async_success
185                                    });
186
187                                });
188                                hide_modal();
189                            }
190                        });
191                    }
192                });
193            });
194           
195            $("#save-button").bind("click", function(e) {
196                var sorted = $(".viewport-container").sortable('toArray'),
197                    payload = [];
198                   
199                for (var i in sorted) {
200                    var track_id = parseInt(sorted[i].split("track_")[1]),
201                        track = view.tracks[track_id];
202                   
203                    payload.push( {
204                        "track_type": track.track_type,
205                        "name": track.name,
206                        "dataset_id": track.dataset_id,
207                        "prefs": track.prefs
208                    });
209                }
210                // Show saving dialog box
211                show_modal("Saving...", "<img src='${h.url_for('/static/images/yui/rel_interstitial_loading.gif')}'/>");
212               
213                $.ajax({
214                    url: "${h.url_for( action='save' )}",
215                    type: "POST",
216                    data: {
217                        'vis_id': view.vis_id,
218                        'vis_title': view.title,
219                        'dbkey': view.dbkey,
220                        'payload': JSON.stringify(payload)
221                    },
222                    success: function(vis_id) {
223                        view.vis_id = vis_id;
224                        view.has_changes = false;
225                        hide_modal();
226                    },
227                    error: function() { alert("Could not save visualization"); }
228                });
229            });
230           
231            function sidebar_box(track) {
232                if (!track.hidden) {
233                    var track_id = track.track_id,
234                        label = $('<label for="track_' + track_id + 'title">' + track.name + '</label>'),
235                        title = $('<div class="historyItemTitle"></div>'),
236                        icon_div = $('<div class="historyItemButtons"></div>');
237                        del_icon = $('<a href="#" class="icon-button delete" />'),
238                        edit_icon = $('<a href="#" class="icon-button edit" />'),
239                        body = $('<div class="historyItemBody"></div>'),
240                        li = $('<li class="sortable"></li>').attr("id", "track_" + track_id + "_li"),
241                        div = $('<div class="historyItemContainer historyItem"></div>'),
242                        editable = $('<div style="display:none"></div>').attr("id", "track_" + track_id + "_editable");
243                   
244                    edit_icon.bind("click", function() {
245                        $("#track_" + track_id + "_editable").toggle();
246                    });
247                    del_icon.bind("click", function() {
248                        $("#track_" + track_id + "_li").fadeOut('slow', function() { $("#track_" + track_id + "_li").remove(); });
249                        view.remove_track(track);
250                        if (view.num_tracks === 0) {
251                            $("#no-tracks").show();
252                        }
253                    });
254                    icon_div.append(edit_icon).append(del_icon);
255                    title.append(label).prepend(icon_div);
256                    if (track.gen_options) {
257                        editable.append(track.gen_options(track_id)).appendTo(body);
258                    }
259                    div.append(title).append(body).appendTo(li);
260                    $("ul#sortable-ul").append(li);
261                }
262            };
263           
264            // Populate sort/move ul
265            for (var track_id in view.tracks) {
266                var track = view.tracks[track_id];
267                sidebar_box(track);
268            }
269           
270            $(window).trigger("resize");
271        };
272       
273    });
274
275</script>
276</%def>
Note: リポジトリブラウザについてのヘルプは TracBrowser を参照してください。