diff --git a/frontend-js/src/main/js/gui/leftPanel/GuiUtils.js b/frontend-js/src/main/js/gui/leftPanel/GuiUtils.js
index e5ffcbc892cbac289bb19f3a1c885b863d99bc86..37c7cb0f4c0e25753841dfdb4462072ee0cd6b74 100644
--- a/frontend-js/src/main/js/gui/leftPanel/GuiUtils.js
+++ b/frontend-js/src/main/js/gui/leftPanel/GuiUtils.js
@@ -60,6 +60,49 @@ GuiUtils.prototype.createLabel = function (value) {
return result;
};
+/**
+ *
+ * @param {Object} modification
+ * @param {string} [modification.name]
+ * @param {string} modification.type
+ * @param {string} [modification.state]
+ *
+ * @returns {HTMLElement| null}
+ */
+GuiUtils.prototype.createModificationRow = function (modification) {
+ var self = this;
+ var row = null;
+ var name = modification.name;
+ var desc = undefined;
+ if (modification.state !== undefined && modification.state !== null) {
+ var modificationStateType = self.getConfiguration().getModificationStateTypeByName(modification.state);
+ var state = modificationStateType.getCommonName();
+
+ if (name !== null && name !== undefined && name !== "") {
+ desc = state + " at position " + name + ", ";
+ } else {
+ desc = state + ",";
+ }
+ } else if (name !== null && name !== undefined && name !== "" &&
+ (modification.type === "BINDING_REGION" ||
+ modification.type === "CODING_REGION" ||
+ modification.type === "PROTEIN_BINDING_DOMAIN" ||
+ modification.type === "TRANSCRIPTION_SITE_LEFT" ||
+ modification.type === "TRANSCRIPTION_SITE_RIGHT" ||
+ modification.type === "REGULATORY_REGION"
+ )) {
+ desc = name + ",";
+ }
+
+ if (desc !== undefined) {
+ row = Functions.createElement({
+ type: "li"
+ });
+ row.appendChild(self.createLabelText(desc));
+ }
+ return row;
+};
+
/**
*
* @param {string} label
@@ -68,38 +111,47 @@ GuiUtils.prototype.createLabel = function (value) {
*/
GuiUtils.prototype.createPostTranslationalModifications = function (label, value) {
var result = document.createElement("div");
+ var count = 0;
if (value !== undefined && value.length > 0) {
var self = this;
- result.appendChild(self.createLabel(label));
+ var userFriendlyLabel = label + ": ";
+ if (label === "RESIDUE") {
+ userFriendlyLabel = "Posttranslational modifications: "
+ } else if (label === "BINDING_REGION") {
+ userFriendlyLabel = "Binding regions: "
+ } else if (label === "CODING_REGION") {
+ userFriendlyLabel = "Coding regions: "
+ } else if (label === "PROTEIN_BINDING_DOMAIN") {
+ userFriendlyLabel = "Protein binding domains: "
+ } else if (label === "TRANSCRIPTION_SITE_LEFT") {
+ userFriendlyLabel = "Transcription sites (left): "
+ } else if (label === "TRANSCRIPTION_SITE_RIGHT") {
+ userFriendlyLabel = "Transcription sites (right): "
+ } else if (label === "TRANSCRIPTION_SITE") {
+ userFriendlyLabel = "Transcription sites: "
+ } else if (label === "MODIFICATION_SITE") {
+ userFriendlyLabel = "Modification sites: "
+ }
+ result.appendChild(self.createLabel(userFriendlyLabel));
result.appendChild(self.createNewLine());
var list = Functions.createElement({
type: "ul"
});
for (var i = 0; i < value.length; i++) {
- var name = value[i].name;
- var desc = undefined;
- if (value[i].state !== undefined && value[i].name !== null) {
- var modificationStateType = self.getConfiguration().getModificationStateTypeByName(value[i].state);
- var state = modificationStateType.getCommonName();
-
- if (name !== null && name !== undefined && name !== "") {
- desc = state + " at position " + name + ", ";
- } else {
- desc = state + ",";
- }
- }
-
- if (desc !== undefined) {
- var row = Functions.createElement({
- type: "li"
- });
- row.appendChild(self.createLabelText(desc));
+ var modification = value[i];
+ var row = self.createModificationRow(modification, self);
+ if (row !== null) {
list.appendChild(row);
+ count++;
}
}
result.appendChild(list);
}
- return result;
+ if (count > 0) {
+ return result;
+ } else {
+ return document.createElement("div");
+ }
};
/**
@@ -579,6 +631,33 @@ GuiUtils.prototype.createReactionElement = function (params) {
return Promise.resolve(div);
};
+/**
+ *
+ * @param {Object[]} modifications
+ *
+ * @returns {HTMLDivElement}
+ */
+GuiUtils.prototype.createModifications = function (modifications) {
+ var self = this;
+ var result = document.createElement("div");
+ var modificationsByType = [];
+ if (modifications !== undefined) {
+ for (var i = 0; i < modifications.length; i++) {
+ var modification = modifications[i];
+ if (modificationsByType[modification.type] === undefined) {
+ modificationsByType[modification.type] = [];
+ }
+ modificationsByType[modification.type].push(modification);
+ }
+ for (var key in modificationsByType) {
+ if (modificationsByType.hasOwnProperty(key)) {
+ result.appendChild(self.createPostTranslationalModifications(key, modificationsByType[key]));
+ }
+ }
+ }
+ return result;
+};
+
/**
*
* @param {Alias|SearchBioEntityGroup} params.alias
@@ -640,8 +719,7 @@ GuiUtils.prototype.createAliasElement = function (params) {
div.appendChild(self.createParamLine("Abbreviation: ", alias.getAbbreviation()));
div.appendChild(self.createParamLine("Formula: ", alias.getFormula()));
div.appendChild(self.createArrayParamLine("Former symbols: ", alias.getFormerSymbols()));
- div.appendChild(self.createPostTranslationalModifications("PostTranslational modifications: ", alias
- .getOther('modifications')));
+ div.appendChild(self.createModifications(alias.getOther('modifications')));
div.appendChild(self.createParamLine("Charge: ", alias.getCharge()));
div.appendChild(self.createArrayParamLine("Synonyms: ", alias.getSynonyms()));
div.appendChild(self.createLabelText(alias.getDescription()));
diff --git a/frontend-js/src/test/js/gui/leftPanel/GuiUtils-test.js b/frontend-js/src/test/js/gui/leftPanel/GuiUtils-test.js
index ff5e92fd78587ce9637c88d172198c5d2670ccb4..93f55f5850b2867e0295e4ea34d38c6a1de1588a 100644
--- a/frontend-js/src/test/js/gui/leftPanel/GuiUtils-test.js
+++ b/frontend-js/src/test/js/gui/leftPanel/GuiUtils-test.js
@@ -251,5 +251,92 @@ describe('GuiUtils', function () {
});
});
+ describe('createModificationRow', function () {
+ describe('PTM', function () {
+ it('default', function () {
+ var guiUtils = new GuiUtils(helper.getConfiguration());
+ var li = guiUtils.createModificationRow({name: "n", type: "RESIDUE", state: "PHOSPHORYLATED"});
+ assert.ok(li);
+ });
+ it('empty PTM', function () {
+ var guiUtils = new GuiUtils(helper.getConfiguration());
+ var li = guiUtils.createModificationRow({name: "n", type: "RESIDUE"});
+ assert.notOk(li);
+ });
+ });
+ describe('Modification Site', function () {
+ it('default', function () {
+ var guiUtils = new GuiUtils(helper.getConfiguration());
+ var li = guiUtils.createModificationRow({name: "n", type: "MODIFICATION_SITE", state: "PHOSPHORYLATED"});
+ assert.ok(li);
+ });
+ it('empty', function () {
+ var guiUtils = new GuiUtils(helper.getConfiguration());
+ var li = guiUtils.createModificationRow({name: "n", type: "MODIFICATION_SITE"});
+ assert.notOk(li);
+ });
+ });
+ describe('Binding Region', function () {
+ it('default', function () {
+ var guiUtils = new GuiUtils(helper.getConfiguration());
+ var li = guiUtils.createModificationRow({name: "n", type: "BINDING_REGION"});
+ assert.ok(li);
+ });
+ it('empty', function () {
+ var guiUtils = new GuiUtils(helper.getConfiguration());
+ var li = guiUtils.createModificationRow({type: "BINDING_REGION"});
+ assert.notOk(li);
+ });
+ });
+ describe('Coding Region', function () {
+ it('default', function () {
+ var guiUtils = new GuiUtils(helper.getConfiguration());
+ var li = guiUtils.createModificationRow({name: "n", type: "CODING_REGION"});
+ assert.ok(li);
+ });
+ it('empty', function () {
+ var guiUtils = new GuiUtils(helper.getConfiguration());
+ var li = guiUtils.createModificationRow({type: "CODING_REGION"});
+ assert.notOk(li);
+ });
+ });
+ describe('Protein binding region', function () {
+ it('default', function () {
+ var guiUtils = new GuiUtils(helper.getConfiguration());
+ var li = guiUtils.createModificationRow({name: "n", type: "PROTEIN_BINDING_DOMAIN"});
+ assert.ok(li);
+ });
+ it('empty', function () {
+ var guiUtils = new GuiUtils(helper.getConfiguration());
+ var li = guiUtils.createModificationRow({type: "PROTEIN_BINDING_DOMAIN"});
+ assert.notOk(li);
+ });
+ });
+ describe('Regulatory region', function () {
+ it('default', function () {
+ var guiUtils = new GuiUtils(helper.getConfiguration());
+ var li = guiUtils.createModificationRow({name: "n", type: "REGULATORY_REGION"});
+ assert.ok(li);
+ });
+ it('empty', function () {
+ var guiUtils = new GuiUtils(helper.getConfiguration());
+ var li = guiUtils.createModificationRow({type: "REGULATORY_REGION"});
+ assert.notOk(li);
+ });
+ });
+ describe('Transcription sites', function () {
+ it('default', function () {
+ var guiUtils = new GuiUtils(helper.getConfiguration());
+ var li = guiUtils.createModificationRow({name: "n", type: "TRANSCRIPTION_SITE_LEFT"});
+ assert.ok(li);
+ });
+ it('empty', function () {
+ var guiUtils = new GuiUtils(helper.getConfiguration());
+ var li = guiUtils.createModificationRow({type: "TRANSCRIPTION_SITE_LEFT"});
+ assert.notOk(li);
+ });
+ });
+ });
+
});