Skip to content

Commit

Permalink
Merge pull request #5505 from guerler/revise_charts_ui
Browse files Browse the repository at this point in the history
Integration of charts into the generic visualization framework
  • Loading branch information
dannon committed Feb 14, 2018
2 parents 39fd5fd + 5b66429 commit 0b13766
Show file tree
Hide file tree
Showing 325 changed files with 8,919 additions and 25,150 deletions.
15 changes: 15 additions & 0 deletions client/galaxy/scripts/apps/analysis.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import Utils from "utils/utils";
import Ui from "mvc/ui/ui-misc";
import DatasetError from "mvc/dataset/dataset-error";
import DatasetEditAttributes from "mvc/dataset/dataset-edit-attributes";
import Visualization from "mvc/visualization/visualization-view";
import Citations from "components/Citations.vue";
import Vue from "vue";

Expand Down Expand Up @@ -52,6 +53,8 @@ window.app = function app(options, bootstrapped) {
"(/)pages(/)edit(/)": "show_pages_edit",
"(/)pages(/)(:action_id)": "show_pages",
"(/)visualizations(/)edit(/)": "show_visualizations_edit",
"(/)visualizations/show/(:visualization_id)": "show_visualizations_client",
"(/)visualizations/dataset_id=(:dataset_id)": "show_visualizations_selector",
"(/)visualizations/(:action_id)": "show_visualizations",
"(/)workflows/import_workflow": "show_import_workflow",
"(/)workflows/run(/)": "show_run",
Expand Down Expand Up @@ -113,6 +116,14 @@ window.app = function app(options, bootstrapped) {
);
},

show_visualizations_selector: function(dataset_id) {
this.page.display(
new Visualization.View({
dataset_id: dataset_id
})
);
},

show_workflows_published: function() {
this.page.display(
new GridView({
Expand Down Expand Up @@ -302,6 +313,10 @@ window.app = function app(options, bootstrapped) {

// render and start the router
$(() => {
options.config = _.extend(options.config, {
hide_panels: Galaxy.params.hide_panels,
hide_masthead: Galaxy.params.hide_masthead
});
Galaxy.page = new Page.View(
_.extend(options, {
Left: ToolPanel,
Expand Down
20 changes: 20 additions & 0 deletions client/galaxy/scripts/apps/chart.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import * as _ from "libs/underscore";
import Client from "mvc/visualization/chart/chart-client";
import Datasets from "mvc/visualization/chart/utilities/datasets";
import Series from "mvc/visualization/chart/utilities/series";
import Jobs from "mvc/visualization/chart/utilities/jobs";

window.bundleEntries = window.bundleEntries || {};

export const bundleEntries = {
chart: function(options) {
return new Client(options);
},
chartUtilities: {
Datasets: Datasets,
Jobs: Jobs,
Series: Series
}
};

_.extend(window.bundleEntries, bundleEntries);
83 changes: 51 additions & 32 deletions client/galaxy/scripts/layout/page.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ var View = Backbone.View.extend({
message_box_content: "",
message_box_class: "info",
show_inactivity_warning: false,
inactivity_box_content: ""
inactivity_box_content: "",
hide_panels: false,
hide_masthead: false
});

// attach global objects, build mastheads
Expand All @@ -37,28 +39,43 @@ var View = Backbone.View.extend({
// build page template
this.$el.attr("scroll", "no");
this.$el.html(this._template());
this.$("#masthead").replaceWith(this.masthead.$el);
this.$("#center").append(this.center.$el);
this.$el.append(this.masthead.frame.$el);
this.$el.append(this.modal.$el);
this.$masthead = this.$("#masthead");
this.$center = this.$("#center");
this.$messagebox = this.$("#messagebox");
this.$inactivebox = this.$("#inactivebox");

// build components
if (this.config.hide_masthead) {
this.$masthead.remove();
this.$center.css("top", 0);
} else {
this.$masthead.replaceWith(this.masthead.$el);
}
this.$center.append(this.center.$el);
this.$el.append(this.masthead.frame.$el);
this.$el.append(this.modal.$el);

// build panels
this.panels = {};
_.each(this._panelids, panel_id => {
var panel_class_name = panel_id.charAt(0).toUpperCase() + panel_id.slice(1);
var panel_class = options[panel_class_name];
if (panel_class) {
var panel_instance = new panel_class(self, options);
self[panel_instance.toString()] = panel_instance;
self.panels[panel_id] = new Panel.SidePanel({
id: panel_id,
el: self.$(`#${panel_id}`),
view: panel_instance
});
}
});
if (!this.config.hide_panels) {
_.each(this._panelids, panel_id => {
var panel_class_name = panel_id.charAt(0).toUpperCase() + panel_id.slice(1);
var panel_class = options[panel_class_name];
if (panel_class) {
var panel_instance = new panel_class(self, options);
var panel_el = self.$(`#${panel_id}`);
self[panel_instance.toString()] = panel_instance;
self.panels[panel_id] = new Panel.SidePanel({
id: panel_id,
el: panel_el,
view: panel_instance
});
if (this.config.hide_masthead) {
panel_el.css("top", 0);
}
}
});
}
this.render();

// start the router
Expand All @@ -73,9 +90,11 @@ var View = Backbone.View.extend({
render: function() {
// TODO: Remove this line after select2 update
$(".select2-hidden-accessible").remove();
this.masthead.render();
this.renderMessageBox();
this.renderInactivityBox();
if (!this.config.hide_masthead) {
this.masthead.render();
this.renderMessageBox();
this.renderInactivityBox();
}
this.renderPanels();
this._checkCommunicationServerOnline();
return this;
Expand Down Expand Up @@ -127,7 +146,7 @@ var View = Backbone.View.extend({
if (panel) {
panel.render();
} else {
self.$("#center").css(panel_id, 0);
self.$center.css(panel_id, 0);
self.$(`#${panel_id}`).hide();
}
});
Expand All @@ -137,16 +156,16 @@ var View = Backbone.View.extend({
/** body template */
_template: function() {
return [
'<div id="everything">',
'<div id="background"/>',
'<div id="masthead"/>',
'<div id="messagebox"/>',
'<div id="inactivebox" class="panel-warning-message" />',
'<div id="left" />',
'<div id="center" />',
'<div id="right" />',
"</div>",
'<div id="dd-helper" />'
`<div id="everything">
<div id="background"/>
<div id="masthead"/>
<div id="messagebox"/>
<div id="inactivebox" class="panel-warning-message" />
<div id="left" />
<div id="center" />
<div id="right" />
</div>
<div id="dd-helper" />`
].join("");
},

Expand Down
12 changes: 11 additions & 1 deletion client/galaxy/scripts/layout/scratchbook.js
Original file line number Diff line number Diff line change
Expand Up @@ -218,13 +218,23 @@ export default Backbone.View.extend({
var $galaxy_main = $(window.parent.document).find("#galaxy_main");
if (options.target == "galaxy_main" || options.target == "center") {
if ($galaxy_main.length === 0) {
window.location = `${options.url + (options.url.indexOf("?") == -1 ? "?" : "&")}use_panels=True`;
window.location = this._build_url(options.url, { use_panels: true });
} else {
$galaxy_main.attr("src", options.url);
}
} else window.location = options.url;
} else {
options.url = this._build_url(options.url, { hide_panels: true, hide_masthead: true });
this.frames.add(options);
}
},

/** Url helper */
_build_url: function(url, options) {
if (url) {
url += url.indexOf("?") == -1 ? "?" : "&";
url += $.param(options, true);
return url;
}
}
});
21 changes: 12 additions & 9 deletions client/galaxy/scripts/mvc/dataset/dataset-li-edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,6 @@ var DatasetListItemEdit = _super.extend(
href: "#",
faIcon: "fa-question",
onclick: function() {
var divString = `thdiv-${datasetID}`;
if (self.$el.find(".toolhelp").length > 0) {
self.$el.find(".toolhelp").toggle();
} else {
Expand Down Expand Up @@ -261,18 +260,22 @@ var DatasetListItemEdit = _super.extend(
return null;
}

var $visualizations = $(this.templates.visualizations(visualizations, this));
//HACK: need to re-write those directed at galaxy_main with linkTarget
$visualizations.find('[target="galaxy_main"]').attr("target", this.linkTarget);
// use addBack here to include the root $visualizations elem (for the case of 1 visualization)
this._addScratchBookFn($visualizations.find(".visualization-link").addBack(".visualization-link"));
return $visualizations;
if (visualizations.length >= 1) {
var url = Galaxy.root + "visualizations/dataset_id=" + this.model.get("id");
return $("<a/>")
.addClass("visualization-link icon-btn")
.attr("href", url)
.append($("<span/>").addClass("fa fa-bar-chart-o"))
.on("click", function(e) {
Galaxy.frame.add({ url: url, title: "Visualization" });
e.preventDefault();
});
}
},

/** add scratchbook functionality to visualization links */
_addScratchBookFn: function($links) {
var li = this;
$links.click(function(ev) {
$links.click(ev => {
if (Galaxy.frame && Galaxy.frame.active) {
Galaxy.frame.add({
title: _l("Visualization"),
Expand Down
5 changes: 1 addition & 4 deletions client/galaxy/scripts/mvc/form/form-view.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ import Portlet from "mvc/ui/ui-portlet";
import Ui from "mvc/ui/ui-misc";
import FormSection from "mvc/form/form-section";
import FormData from "mvc/form/form-data";

export var View = Backbone.View.extend({
export default Backbone.View.extend({
initialize: function(options) {
this.model = new Backbone.Model({
initial_errors: false,
Expand Down Expand Up @@ -174,5 +173,3 @@ export var View = Backbone.View.extend({
Galaxy.emit.debug("form-view::initialize()", "Completed");
}
});

export default View;
37 changes: 21 additions & 16 deletions client/galaxy/scripts/mvc/ui/ui-thumbnails.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
/** This class renders the selection grid. */
import Utils from "utils/utils";
import Tabs from "mvc/ui/ui-tabs";

export var View = Backbone.View.extend({
var View = Backbone.View.extend({
events: {
"click .ui-thumbnails-item": "_onclick",
"dblclick .ui-thumbnails-item": "_ondblclick"
Expand All @@ -21,15 +20,15 @@ export var View = Backbone.View.extend({
render: function() {
this.first = null;
this.tabs.delAll();
this._renderDefault();
this._renderRegular();
this._renderList();
},

_renderDefault: function() {
_renderRegular: function() {
var title_length = 20;
var $el = $("<div/>").addClass("ui-thumbnails-grid");
this.collection.each(model => {
if (model.get("keywords").indexOf("default") !== -1) {
if (model.get("regular")) {
var title = model.get("title");
$el.append(
$(
Expand Down Expand Up @@ -94,6 +93,9 @@ export var View = Backbone.View.extend({
.closest(".ui-thumbnails-item")
.attr("value")
);
if (this.model.get("onclick")) {
this.model.get("onclick")(this.value());
}
},

/** Add double click handler */
Expand All @@ -103,27 +105,30 @@ export var View = Backbone.View.extend({
}
},

/** Image/Icon template */
_templateImage: function(options) {
if (options.image_src) {
return `<img class="ui-thumbnails-image" src="${options.image_src}"/>`;
}
return `<div class="ui-thumbnails-icon fa fa-eye"/>`;
},

/* Thumbnail template with image */
_templateThumbnailItem: function(options) {
return `<div class="ui-thumbnails-item ui-thumbnails-item-float" value="${
options.id
}"><img class="ui-thumbnails-image" src="${
options.image_src
}"><div class="ui-thumbnails-title ui-form-info"><span class="fa ${options.title_icon}"/>${
return `<div class="ui-thumbnails-item ui-thumbnails-item-float" value="${options.id}">${this._templateImage(
options
)}<div class="ui-thumbnails-title ui-form-info"><span class="fa ${options.title_icon}"/>${
options.title
}</div><div>`;
},

/* Thumbnail template with image and description */
_templateRegularItem: function(options) {
return `<div class="ui-thumbnails-item" value="${
options.id
}"><table><tr><td><img class="ui-thumbnails-image" src="${
options.image_src
}"></td><td><div class="ui-thumbnails-description-title ui-form-info">${
return `<div class="ui-thumbnails-item" value="${options.id}"><table><tr><td>${this._templateImage(
options
)}</td><td><div class="ui-thumbnails-description-title ui-form-info">${
options.title
}</div><div class="ui-thumbnails-description-text ui-form-info">${options.description}</div></td></tr><div>`;
}
});

export default { View: View };
51 changes: 51 additions & 0 deletions client/galaxy/scripts/mvc/visualization/chart/chart-client.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import Deferred from "utils/deferred";
import Modal from "mvc/ui/ui-modal";
import Ui from "mvc/ui/ui-misc";
import Chart from "mvc/visualization/chart/components/model";
import Editor from "mvc/visualization/chart/views/editor";
import Viewer from "mvc/visualization/chart/views/viewer";
import Menu from "mvc/visualization/chart/views/menu";
import * as Backbone from "backbone";

/* global $ */
/* global Galaxy */

export default Backbone.View.extend({
initialize: function(options) {
this.modal = (window.parent.Galaxy && window.parent.Galaxy.modal) || new Modal.View();
this.setElement(
$("<div/>")
.addClass("charts-client")
.append($("<div/>").addClass("charts-buttons"))
.append($("<div/>").addClass("charts-center"))
.append($("<div/>").addClass("charts-right"))
);
this.$center = this.$(".charts-center");
this.$right = this.$(".charts-right");
this.$buttons = this.$(".charts-buttons");
this.chart = new Chart({}, options);
this.chart.plugin = options.visualization_plugin;
this.chart.plugin.specs = this.chart.plugin.specs || {};
this.chart_load = options.chart_load;
this.message = new Ui.Message();
this.deferred = new Deferred();
this.viewer = new Viewer(this);
this.editor = new Editor(this);
this.menu = new Menu(this);
this.$center.append(this.viewer.$el);
this.$right.append(this.message.$el).append(this.editor.$el);
this.$buttons.append(this.menu.$el);
$.ajax({
url: `${Galaxy.root}api/datasets/${options.dataset_id}`
})
.done(dataset => {
this.dataset = dataset;
this.chart.load();
this.chart.trigger("redraw");
})
.fail(response => {
let message = response.responseJSON && response.responseJSON.err_msg;
this.errormessage = message || "Import failed for unkown reason.";
});
}
});

0 comments on commit 0b13766

Please sign in to comment.