reaction window with kinetics provides info about species role

frontend-js/src/main/js/map/window/ReactionInfoWindow.js

@@ -69,7 +69,11 @@ ReactionInfoWindow.prototype.createContentDiv = function () {
       result.appendChild(Functions.createElement({type: "h4", content: "Kinetic law"}));
 
       if (kineticLaw.getMathMlPresentation() !== undefined) {
-        result.appendChild(Functions.createElement({type: "div", content: kineticLaw.getMathMlPresentation()}));
+        result.appendChild(Functions.createElement({
+          type: "div",
+          content: kineticLaw.getMathMlPresentation(),
+          xss: false
+        }));
       } else {
 
         result.appendChild(Functions.createElement({
@@ -93,7 +97,7 @@ ReactionInfoWindow.prototype.createContentDiv = function () {
       return Promise.all(promises);
     }).then(function (parameters) {
       result.appendChild(self.createSbmlParameterDiv(parameters));
-      result.appendChild(self.createKineticsElementsDiv(reaction.getElements()));
+      result.appendChild(self.createKineticsElementsDiv(reaction));
     }).then(function () {
       return Promise.resolve(result);
     });
@@ -141,15 +145,27 @@ ReactionInfoWindow.prototype.createSbmlParameterDiv = function (parameters) {
   return result;
 };
 
-ReactionInfoWindow.prototype.createKineticsElementsDiv = function (elements) {
+ReactionInfoWindow.prototype.createKineticsElementsDiv = function (reaction) {
   var result = Functions.createElement({type: "div"});
   result.appendChild(Functions.createElement({type: "h5", content: "Elements: "}));
   var guiUtils = new GuiUtils();
   var table = Functions.createElement({type: "div", style: "display: table;", className: "borderTable"});
-  table.appendChild(guiUtils.createTableRow(["Name", "elementId", "Constant", "Boundary condition", "Initial concentration", "Initial amount"]));
-  for (var i = 0; i < elements.length; i++) {
-    var element = elements[i];
-    table.appendChild(guiUtils.createTableRow([element.getName(), element.getElementId(), element.getConstant(), element.getBoundaryCondition(), element.getInitialConcentration(), element.getInitialAmount()]));
+  table.appendChild(guiUtils.createTableRow(["Name", "Role", "elementId", "Constant", "Boundary condition", "Initial concentration", "Initial amount"]));
+  var elements = reaction.getReactants();
+  var i, element;
+  for (i = 0; i < elements.length; i++) {
+    element = elements[i];
+    table.appendChild(guiUtils.createTableRow([element.getName(), "Reactant", element.getElementId(), element.getConstant(), element.getBoundaryCondition(), element.getInitialConcentration(), element.getInitialAmount()]));
+  }
+  elements = reaction.getProducts();
+  for (i = 0; i < elements.length; i++) {
+    element = elements[i];
+    table.appendChild(guiUtils.createTableRow([element.getName(), "Product", element.getElementId(), element.getConstant(), element.getBoundaryCondition(), element.getInitialConcentration(), element.getInitialAmount()]));
+  }
+  elements = reaction.getModifiers();
+  for (i = 0; i < elements.length; i++) {
+    element = elements[i];
+    table.appendChild(guiUtils.createTableRow([element.getName(), "Modifier", element.getElementId(), element.getConstant(), element.getBoundaryCondition(), element.getInitialConcentration(), element.getInitialAmount()]));
   }
   result.appendChild(table);
   return result;