alias info window show data from submaps on anchros

frontend-js/src/main/css/global.css

@@ -42,25 +42,25 @@
     clear: both;
 }
 
-.mapChartNameDiv {
+.minerva-chart-name {
     width: 150px;
     float: left;
     display: inline-block;
 }
 
-.mapChartRowEvenDiv {
+.minerva-chart-row-even, .minerva-chart-row-odd {
+    position: relative;
     white-space: nowrap;
     overflow: hidden;
     margin: 1px;
     width: 360px;
+}
+
+.minerva-chart-row-even {
     background-color: #D3D3D3;
 }
 
-.mapChartRowOddDiv {
-    white-space: nowrap;
-    overflow: hidden;
-    margin: 1px;
-    width: 360px;
+.minerva-chart-row-odd {
     background-color: #C0C0C0;
 }
 

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

@@ -109,14 +109,13 @@ AliasInfoWindow.prototype.createChartDiv = function (params) {
   overlays.forEach(function (overlay, i) {
     promises.push(overlay.getFullAliasById(self.getAlias().getId()).then(function (data) {
       var rowDiv = document.createElement("div");
-      if (i % 2 === 0) {
-        rowDiv.className = "mapChartRowEvenDiv";
+      if (i % 2 === 0 || self.getAlias().getLinkedSubmodelId() !== undefined) {
+        rowDiv.className = "minerva-chart-row-even";
       } else {
-        rowDiv.className = "mapChartRowOddDiv";
+        rowDiv.className = "minerva-chart-row-odd";
       }
-      rowDiv.style.position = "relative";
       var nameDiv = document.createElement("div");
-      nameDiv.className = "mapChartNameDiv";
+      nameDiv.className = "minerva-chart-name";
       nameDiv.innerHTML = overlays[i].getName() + " ";
       rowDiv.appendChild(nameDiv);
 
@@ -193,6 +192,47 @@ AliasInfoWindow.prototype.createChartDiv = function (params) {
         return rowDiv;
       }
     }));
+    if (self.getAlias().getLinkedSubmodelId() !== undefined) {
+      promises.push(new Promise.resolve(overlay).then(function (overlay) {
+        var overlayData = overlay.getAliases();
+        var overlayDataOnSubmap = [];
+        for (var j = 0; j < overlayData.length; j++) {
+          var data = overlayData[j];
+          if (data.getModelId() === self.getAlias().getLinkedSubmodelId()) {
+            overlayDataOnSubmap.push(data);
+          }
+        }
+        return self._computeColors(overlayDataOnSubmap).then(function (colors) {
+          var rowDiv = document.createElement("div");
+          rowDiv.className = "minerva-chart-row-odd";
+          var nameDiv = document.createElement("div");
+          nameDiv.className = "minerva-chart-name";
+          var submapName = self.getCustomMap().getTopMap().getSubmapById(self.getAlias().getLinkedSubmodelId()).getModel().getName();
+          nameDiv.innerHTML = "Submap " + submapName;
+          rowDiv.appendChild(nameDiv);
+
+          var emptyDiv = document.createElement("div");
+          emptyDiv.style.float = "left";
+          emptyDiv.style.width = "201px";
+          rowDiv.appendChild(emptyDiv);
+
+          var totalAmount = 0;
+          for (var j = 0; j < colors.length; j++) {
+            totalAmount += colors[j].amount;
+          }
+
+          for (j = 0; j < colors.length; j++) {
+            var overlayDataDiv = document.createElement("div");
+            overlayDataDiv.innerHTML = "&nbsp;";
+            overlayDataDiv.style.float = "left";
+            overlayDataDiv.style.width = Math.floor(100*colors[j].amount / totalAmount) + "%";
+            overlayDataDiv.style.background = colors[j].color;
+            emptyDiv.appendChild(overlayDataDiv);
+          }
+          return rowDiv;
+        });
+      }));
+    }
   });
   return Promise.all(promises).then(function (rows) {
     for (var i = 0; i < rows.length; i++) {
@@ -505,5 +545,41 @@ AliasInfoWindow.prototype.getPosition = function () {
   return new Point(alias.x + alias.width / 2, alias.y + alias.height / 2);
 };
 
+/**
+ *
+ * @param {LayoutAlias[]} overlayData
+ * @returns {Promise<Array>}
+ * @private
+ */
+AliasInfoWindow.prototype._computeColors = function (overlayData) {
+  var promises = [];
+  for (var i = 0; i < overlayData.length; i++) {
+    promises.push(Functions.overlayToColor(overlayData[i]));
+  }
+  return Promise.all(promises).then(function (colors) {
+    var countByColor = [], color;
+    for (var i = 0; i < colors.length; i++) {
+      color = colors[i];
+      if (countByColor[color] !== undefined) {
+        countByColor[color]++;
+      } else {
+        countByColor[color] = 1;
+      }
+    }
+    var result = [];
+    for (color in countByColor) {
+      if (countByColor.hasOwnProperty(color)) {
+        result.push({color: color, amount: countByColor[color]});
+      }
+    }
+    var compare = function (a, b) {
+      return a.color.localeCompare(b.color);
+    };
+    result.sort(compare);
+    return result;
+  });
+
+};
+
 
 module.exports = AliasInfoWindow;