createLabelText and createModifications has className parameter

frontend-js/src/main/js/gui/leftPanel/GuiUtils.js

@@ -251,7 +251,7 @@ GuiUtils.prototype.createAnnotationLink = function (annotation, showType) {
  * @param {boolean} [params.showType = true]
  * @param {boolean} [params.groupAnnotations = true]
  *
- * @returns {HTMLDivElement}
+ * @returns {HTMLElement}
  */
 GuiUtils.prototype.createAnnotations = function (params) {
   var self = this;
@@ -448,10 +448,11 @@ GuiUtils.prototype.createAnnotationList = function (annotations, options) {
 /**
  *
  * @param {string} [value]
- * @returns {HTMLSpanElement}
+ * @param {string} [className]
+ * @returns {HTMLElement}
  */
-GuiUtils.prototype.createLabelText = function (value) {
-  var result = document.createElement("span");
+GuiUtils.prototype.createLabelText = function (value, className) {
+  var result = Functions.createElement({type: "span", className: className});
   if (value !== undefined) {
     result.innerHTML = value;
   }
@@ -556,7 +557,7 @@ GuiUtils.prototype.createArrayParamLine = function (params) {
  * @param {string} params.label
  * @param {number} [params.mapId]
  * @param {string} [params.className]
- * @returns {HTMLDivElement}
+ * @returns {HTMLElement}
  */
 GuiUtils.prototype.createSubMapLink = function (params) {
   var self = this;
@@ -701,12 +702,13 @@ GuiUtils.prototype.createReactionElement = function (params) {
 /**
  *
  * @param {Object[]|Object} modifications
+ * @param {string} [className]
  *
  * @returns {HTMLDivElement}
  */
-GuiUtils.prototype.createModifications = function (modifications) {
+GuiUtils.prototype.createModifications = function (modifications, className) {
   var self = this;
-  var result = document.createElement("div");
+  var result = Functions.createElement({type: "div", className: className});
   var modificationsByType = [];
   if (modifications !== undefined) {
     if (modifications.length === undefined) {
@@ -771,59 +773,69 @@ GuiUtils.prototype.createAliasElement = function (params) {
     mapId: alias.getLinkedSubmodelId(),
     className: self._configurationOptionToClassName(ConfigurationType.SHOW_ELEMENT_LINKED_SUBMAP)
   }));
-  if ((self.getConfiguration().getBooleanValue(ConfigurationType.SHOW_ELEMENT_GROUP_SIZE))) {
-    if (alias instanceof SearchBioEntityGroup && alias.getBioEntities().length > 1) {
-      div.appendChild(self.createLabelText("Group of " + alias.getBioEntities().length + " elements."));
-    }
+  var groupSizeDiv = Functions.createElement({
+    type: "div",
+    className: self._configurationOptionToClassName(ConfigurationType.SHOW_ELEMENT_GROUP_SIZE)
+  });
+  if (alias instanceof SearchBioEntityGroup && alias.getBioEntities().length > 1) {
+    groupSizeDiv.appendChild(self.createLabelText("Group of " + alias.getBioEntities().length + " elements."));
   }
+  div.appendChild(groupSizeDiv);
   if (showTitle) {
     div.appendChild(self.createNewLine(3));
   }
 
   var promise = Promise.resolve();
-  if ((self.getConfiguration().getBooleanValue(ConfigurationType.SHOW_ELEMENT_COMPARTMENT))) {
-    if (alias.getCompartmentId() !== undefined) {
-      promise = self.getMap().getModel().getByIdentifiedElement(new IdentifiedElement({
-        type: "ALIAS",
-        id: alias.getCompartmentId(),
-        modelId: alias.getModelId()
-      }), true).then(function (compartment) {
-        div.appendChild(self.createParamLine({label: "Compartment: ", value: compartment.getName()}));
-      })
-    }
+  if (alias.getCompartmentId() !== undefined) {
+    promise = self.getMap().getModel().getByIdentifiedElement(new IdentifiedElement({
+      type: "ALIAS",
+      id: alias.getCompartmentId(),
+      modelId: alias.getModelId()
+    }), true).then(function (compartment) {
+      div.appendChild(self.createParamLine({
+        label: "Compartment: ", value: compartment.getName(),
+        className: self._configurationOptionToClassName(ConfigurationType.SHOW_ELEMENT_COMPARTMENT)
+      }));
+    })
   }
   return promise.then(function () {
 
-    if ((self.getConfiguration().getBooleanValue(ConfigurationType.SHOW_ELEMENT_FULL_NAME))) {
-      div.appendChild(self.createParamLine({label: "Full name: ", value: alias.getFullName()}));
-    }
-    if ((self.getConfiguration().getBooleanValue(ConfigurationType.SHOW_ELEMENT_SYMBOL))) {
-      div.appendChild(self.createParamLine({label: "Symbol: ", value: alias.getSymbol()}));
-    }
-    if ((self.getConfiguration().getBooleanValue(ConfigurationType.SHOW_ELEMENT_ABBREVIATION))) {
-      div.appendChild(self.createParamLine({label: "Abbreviation: ", value: alias.getAbbreviation()}));
-    }
-    if ((self.getConfiguration().getBooleanValue(ConfigurationType.SHOW_ELEMENT_FORMULA))) {
-      div.appendChild(self.createParamLine({label: "Formula: ", value: alias.getFormula()}));
-    }
-    if ((self.getConfiguration().getBooleanValue(ConfigurationType.SHOW_ELEMENT_FORMER_SYMBOLS))) {
-      div.appendChild(self.createArrayParamLine({label: "Former symbols: ", value: alias.getFormerSymbols()}));
-    }
+    div.appendChild(self.createParamLine({
+      label: "Full name: ", value: alias.getFullName(),
+      className: self._configurationOptionToClassName(ConfigurationType.SHOW_ELEMENT_FULL_NAME)
+    }));
+    div.appendChild(self.createParamLine({
+      label: "Symbol: ", value: alias.getSymbol(),
+      className: self._configurationOptionToClassName(ConfigurationType.SHOW_ELEMENT_SYMBOL)
+    }));
+    div.appendChild(self.createParamLine({
+      label: "Abbreviation: ", value: alias.getAbbreviation(),
+      className: self._configurationOptionToClassName(ConfigurationType.SHOW_ELEMENT_ABBREVIATION)
+    }));
+    div.appendChild(self.createParamLine({
+      label: "Formula: ", value: alias.getFormula(),
+      className: self._configurationOptionToClassName(ConfigurationType.SHOW_ELEMENT_FORMULA)
+    }));
+    div.appendChild(self.createArrayParamLine({
+      label: "Former symbols: ", value: alias.getFormerSymbols(),
+      className: self._configurationOptionToClassName(ConfigurationType.SHOW_ELEMENT_FORMER_SYMBOLS)
+    }));
     if ((self.getConfiguration().getBooleanValue(ConfigurationType.SHOW_ELEMENT_MODIFICATIONS))) {
       div.appendChild(self.createModifications(alias.getOther('modifications')));
     }
-    if ((self.getConfiguration().getBooleanValue(ConfigurationType.SHOW_ELEMENT_CHARGE))) {
-      div.appendChild(self.createParamLine({label: "Charge: ", value: alias.getCharge()}));
-    }
-    if ((self.getConfiguration().getBooleanValue(ConfigurationType.SHOW_ELEMENT_SYNONYMS))) {
-      div.appendChild(self.createArrayParamLine({label: "Synonyms: ", value: alias.getSynonyms()}));
-    }
-    if ((self.getConfiguration().getBooleanValue(ConfigurationType.SHOW_ELEMENT_DESCRIPTION))) {
-      div.appendChild(self.createLabelText(alias.getDescription()));
-    }
-    if ((self.getConfiguration().getBooleanValue(ConfigurationType.SHOW_ELEMENT_ANNOTATIONS))) {
-      div.appendChild(self.createAnnotations({label: "Annotations: ", annotations: alias.getReferences()}));
-    }
+    div.appendChild(self.createParamLine({
+      label: "Charge: ", value: alias.getCharge(),
+      className: self._configurationOptionToClassName(ConfigurationType.SHOW_ELEMENT_CHARGE)
+    }));
+    div.appendChild(self.createArrayParamLine({
+      label: "Synonyms: ", value: alias.getSynonyms(),
+      className: self._configurationOptionToClassName(ConfigurationType.SHOW_ELEMENT_SYNONYMS)
+    }));
+    div.appendChild(self.createLabelText(alias.getDescription(), self._configurationOptionToClassName(ConfigurationType.SHOW_ELEMENT_DESCRIPTION)));
+    div.appendChild(self.createAnnotations({
+      label: "Annotations: ", annotations: alias.getReferences(),
+      className: self._configurationOptionToClassName(ConfigurationType.SHOW_ELEMENT_ANNOTATIONS)
+    }));
     return div;
   })
 };