Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dataset hashtag display improvements #5155

Merged
merged 10 commits into from Dec 19, 2017
Merged

Dataset hashtag display improvements #5155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2db85b3
Swaps nametags to a div, sets a max-height (intentionally such that i…
dannon Dec 6, 2017
79465fd
Add tooltip with number of nametags.
dannon Dec 6, 2017
067d1c2
Constrain nametags in select2 boxes to 5 matching tags.
dannon Dec 7, 2017
cb635d2
Add an 'extra tags' block in the select interface since we're so limi…
dannon Dec 7, 2017
21c18b5
Refactor tag templating, changes order of operations and filtering to…
dannon Dec 7, 2017
ee16553
Attempt to fix matched tags counting in select2 (internal state is sh…
dannon Dec 7, 2017
c389a84
Fix select2 tag filtering, counting, indication of extra tags.
dannon Dec 7, 2017
35e1d18
More fat arrow functions and elimination of self in uiselectdefault
dannon Dec 7, 2017
3fcc3c9
Merge remote-tracking branch 'upstream/dev' into tag_limit_size
dannon Dec 19, 2017
d2d0e41
Rebuild client after upstream/dev merge.
dannon Dec 19, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
17 changes: 8 additions & 9 deletions client/galaxy/scripts/mvc/history/history-item-li.js
View file
Open in desktop
@@ -1,15 +1,14 @@
function _labelIfName(tag) {
if (tag.indexOf("name:") == 0) {
return `<span class="label label-info">${_.escape(tag.slice(5))}</span>`;
} else {
return "";
}
function _templateNametag(tag) {
return `<span class="label label-info">${_.escape(tag.slice(5))}</span>`;
}

function nametagTemplate(historyItem) {
return `<span class="nametags">${_.sortBy(_.uniq(historyItem.tags))
.map(_labelIfName)
.join("")}</span>`;
let uniqueNametags = _.filter(_.uniq(historyItem.tags), t => t.indexOf("name:") === 0);
let nametagsDisplay = _.sortBy(uniqueNametags).map(_templateNametag);
return `
<div class="nametags" title="${uniqueNametags.length} nametags">
${nametagsDisplay.join("")}
</div>`;
}

export default {
Expand Down
121 changes: 71 additions & 50 deletions client/galaxy/scripts/mvc/ui/ui-select-default.js
View file
Open in desktop
Expand Up @@ -5,7 +5,6 @@ import Utils from "utils/utils";
import Buttons from "mvc/ui/ui-buttons";
var View = Backbone.View.extend({
initialize: function(options) {
var self = this;
this.data = [];
this.data2 = [];
this.model =
Expand All @@ -28,7 +27,9 @@ var View = Backbone.View.extend({
pagesize: 20
}).set(options);
this.on("change", () => {
self.model.get("onchange") && self.model.get("onchange")(self.value());
if (this.model.get("onchange")) {
this.model.get("onchange")(this.value());
}
});
this.listenTo(this.model, "change:data", this._changeData, this);
this.listenTo(this.model, "change:disabled", this._changeDisabled, this);
Expand All @@ -40,17 +41,20 @@ var View = Backbone.View.extend({
},

render: function() {
var self = this;
this.model.get("searchable") ? this._renderSearchable() : this._renderClassic();
if (this.model.get("searchable")) {
this._renderSearchable();
} else {
this._renderClassic();
}
this.$el.addClass(this.model.get("cls")).attr("id", this.model.get("id"));
this.$select
.empty()
.addClass("select")
.attr("id", `${this.model.get("id")}_select`)
.prop("multiple", this.model.get("multiple"))
.on("change", () => {
self.value(self._getValue());
self.trigger("change");
this.value(this._getValue());
this.trigger("change");
});
this._changeData();
this._changeWait();
Expand All @@ -60,7 +64,6 @@ var View = Backbone.View.extend({

/** Renders the classic selection field */
_renderClassic: function() {
var self = this;
this.$el
.addClass(this.model.get("multiple") ? "ui-select-multiple" : "ui-select")
.append((this.$select = $("<select/>")))
Expand All @@ -76,12 +79,12 @@ var View = Backbone.View.extend({
.off("mousedown")
.on("mousedown", event => {
var currentY = event.pageY;
var currentHeight = self.$select.height();
self.minHeight = self.minHeight || currentHeight;
var currentHeight = this.$select.height();
this.minHeight = this.minHeight || currentHeight;
$("#dd-helper")
.show()
.on("mousemove", event => {
self.$select.height(Math.max(currentHeight + (event.pageY - currentY), self.minHeight));
this.$select.height(Math.max(currentHeight + (event.pageY - currentY), this.minHeight));
})
.on("mouseup mouseleave", () => {
$("#dd-helper")
Expand All @@ -98,25 +101,27 @@ var View = Backbone.View.extend({

/** Renders the default select2 field */
_renderSearchable: function() {
var self = this;
this.$el.append((this.$select = $("<div/>"))).append((this.$dropdown = $("<div/>")));
this.$dropdown.hide();
if (!this.model.get("multiple")) {
this.$dropdown.show().on("click", () => {
self.$select.select2 && self.$select.select2("open");
if (this.$select.select2) {
this.$select.select2("open");
}
});
}
this.all_button = null;
if (this.model.get("multiple") && !this.model.get("individual") && !this.model.get("readonly")) {
this.all_button = new Buttons.ButtonCheck({
onclick: function() {
onclick: () => {
var new_value = [];
self.all_button.value() !== 0 &&
_.each(self.model.get("data"), option => {
if (this.all_button.value() !== 0) {
_.each(this.model.get("data"), option => {
new_value.push(option.value);
});
self.value(new_value);
self.trigger("change");
}
this.value(new_value);
this.trigger("change");
}
});
this.$el.prepend(this.all_button.$el);
Expand All @@ -127,7 +132,7 @@ var View = Backbone.View.extend({
_match: function(term, text) {
return (
!term ||
term == "" ||
term === "" ||
String(text)
.toUpperCase()
.indexOf(term.toUpperCase()) >= 0
Expand All @@ -136,18 +141,17 @@ var View = Backbone.View.extend({

/** Updates the selection options */
_changeData: function() {
var self = this;
this.data = [];
if (!this.model.get("multiple") && this.model.get("optional")) {
this.data.push({
value: "__null__",
label: self.model.get("empty_text")
label: this.model.get("empty_text")
});
}
_.each(this.model.get("data"), option => {
self.data.push(option);
this.data.push(option);
});
if (this.length() == 0) {
if (this.length() === 0) {
this.data.push({
value: "__null__",
label: this.model.get("error_text")
Expand All @@ -156,61 +160,71 @@ var View = Backbone.View.extend({
if (this.model.get("searchable")) {
this.data2 = [];
_.each(this.data, (option, index) => {
self.data2.push({
this.data2.push({
order: index,
id: option.value,
text: option.label,
tags: option.tags
});
});
this.$select.data("select2") && this.$select.select2("destroy");
if (this.$select.data("select2")) {
this.$select.select2("destroy");
}
this.matched_tags = {};
this.$select.select2({
data: self.data2,
data: this.data2,
closeOnSelect: !this.model.get("multiple"),
multiple: this.model.get("multiple"),
query: function(q) {
self.matched_tags = {};
var pagesize = self.model.get("pagesize");
var results = _.filter(self.data2, e => {
query: q => {
this.matched_tags = {};
var pagesize = this.model.get("pagesize");
var results = _.filter(this.data2, e => {
var found = false;
_.each(e.tags, tag => {
if (self._match(q.term, tag)) {
found = self.matched_tags[tag] = true;
if (this._match(q.term, tag)) {
found = this.matched_tags[tag] = true;
}
});
return found || self._match(q.term, e.text);
return found || this._match(q.term, e.text);
});
q.callback({
results: results.slice((q.page - 1) * pagesize, q.page * pagesize),
more: results.length >= q.page * pagesize
});
},
formatResult: function(result) {
return `${_.escape(result.text)}<div class="ui-tags">${_.reduce(
result.tags,
(memo, tag) => {
if (self.matched_tags[tag]) {
formatResult: result => {
let extraTagWarning = "";
let filteredTags = _.filter(result.tags, t => this.matched_tags.hasOwnProperty(t));
if (filteredTags.length > 5) {
extraTagWarning = `&nbsp;<div class="label label-warning">${filteredTags.length -
5} more tags</div>`;
}
return `
${_.escape(result.text)}
<div class="ui-tags">
${_.reduce(
filteredTags.slice(0, 5),
(memo, tag) => {
return `${memo}&nbsp;<div class="label label-info">${_.escape(tag)}</div>`;
}
return memo;
},
""
)}</div>`;
},
""
)}
${extraTagWarning}
</div>`;
}
});
this.$(".select2-container .select2-search input").off("blur");
} else {
this.$select.find("option").remove();
_.each(this.data, option => {
self.$select.append(
this.$select.append(
$("<option/>")
.attr("value", option.value)
.html(_.escape(option.label))
);
});
}
this.model.set("disabled", this.model.get("readonly") || this.length() == 0);
this.model.set("disabled", this.model.get("readonly") || this.length() === 0);
this._changeValue();
},

Expand Down Expand Up @@ -252,7 +266,9 @@ var View = Backbone.View.extend({

/** Return/Set current selection */
value: function(new_value) {
new_value !== undefined && this.model.set("value", new_value);
if (new_value !== undefined) {
this.model.set("value", new_value);
}
return this._getValue();
},

Expand Down Expand Up @@ -311,9 +327,13 @@ var View = Backbone.View.extend({
/** Update all available options at once */
add: function(options, sorter) {
_.each(this.model.get("data"), v => {
v.keep && !_.findWhere(options, { value: v.value }) && options.push(v);
if (v.keep && !_.findWhere(options, { value: v.value })) {
options.push(v);
}
});
sorter && options && options.sort(sorter);
if (sorter && options) {
options.sort(sorter);
}
this.model.set("data", options);
},

Expand All @@ -334,7 +354,6 @@ var View = Backbone.View.extend({

/** Set value to dom */
_setValue: function(new_value) {
var self = this;
if (new_value === null || new_value === undefined) {
new_value = "__null__";
}
Expand All @@ -351,8 +370,10 @@ var View = Backbone.View.extend({
if ($.isArray(new_value)) {
var val = [];
_.each(new_value, v => {
var d = _.findWhere(self.data2, { id: v });
d && val.push(d);
var d = _.findWhere(this.data2, { id: v });
if (d) {
val.push(d);
}
});
new_value = val;
} else {
Expand Down
6 changes: 4 additions & 2 deletions client/galaxy/style/less/history.less
View file
Open in desktop
Expand Up @@ -221,7 +221,9 @@
}
}
}
span.nametags {
div.nametags {
max-height:26px;
overflow-y: auto;
span.label {
display: inline-block;
margin-right: 2px;
Expand Down Expand Up @@ -698,4 +700,4 @@
margin-right: 8px;
}
}
}
}
2 changes: 1 addition & 1 deletion static/scripts/bundled/analysis.bundled.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion static/scripts/bundled/libs.bundled.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion static/scripts/mvc/history/history-item-li.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.