mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
Merge pull request #5155 from dannon/tag_limit_size
Dataset hashtag display improvements
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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 =
|
||||
@@ -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);
|
||||
@@ -40,8 +41,11 @@ 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()
|
||||
@@ -49,8 +53,8 @@ var View = Backbone.View.extend({
|
||||
.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();
|
||||
@@ -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/>")))
|
||||
@@ -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")
|
||||
@@ -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);
|
||||
@@ -127,7 +132,7 @@ var View = Backbone.View.extend({
|
||||
_match: function(term, text) {
|
||||
return (
|
||||
!term ||
|
||||
term == "" ||
|
||||
term === "" ||
|
||||
String(text)
|
||||
.toUpperCase()
|
||||
.indexOf(term.toUpperCase()) >= 0
|
||||
@@ -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")
|
||||
@@ -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 = ` <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} <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();
|
||||
},
|
||||
|
||||
@@ -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();
|
||||
},
|
||||
|
||||
@@ -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);
|
||||
},
|
||||
|
||||
@@ -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__";
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
@@ -221,7 +221,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
span.nametags {
|
||||
div.nametags {
|
||||
max-height:26px;
|
||||
overflow-y: auto;
|
||||
span.label {
|
||||
display: inline-block;
|
||||
margin-right: 2px;
|
||||
@@ -698,4 +700,4 @@
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
define("mvc/history/history-item-li",["exports"],function(e){"use strict";function n(e){return 0==e.indexOf("name:")?'<span class="label label-info">'+_.escape(e.slice(5))+"</span>":""}Object.defineProperty(e,"__esModule",{value:!0}),e.default={nametagTemplate:function(e){return'<span class="nametags">'+_.sortBy(_.uniq(e.tags)).map(n).join("")+"</span>"}}});
|
||||
define("mvc/history/history-item-li",["exports"],function(e){"use strict";function n(e){return'<span class="label label-info">'+_.escape(e.slice(5))+"</span>"}Object.defineProperty(e,"__esModule",{value:!0}),e.default={nametagTemplate:function(e){var t=_.filter(_.uniq(e.tags),function(e){return 0===e.indexOf("name:")}),a=_.sortBy(t).map(n);return'\n <div class="nametags" title="'+t.length+' nametags">\n '+a.join("")+"\n </div>"}}});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user