From 04f3c31baf0abd727f360805cfc6a2a1e5f53835 Mon Sep 17 00:00:00 2001
From: Felipe Adachi <felipeadachi@gmail.com>
Date: Mon, 11 Apr 2022 18:25:00 -0300
Subject: [PATCH] fix HTML display for mismatching number of frequent items
 between profiles (#536)

- Iterate based on min. number of frequentItems
- frequentItem Strings loaded w/ empty string when trying to access not-existing index
---
 .../templates/index-hbs-cdn-all-in.html       | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/whylogs/viewer/templates/index-hbs-cdn-all-in.html b/src/whylogs/viewer/templates/index-hbs-cdn-all-in.html
index f75e20ae85..b3dfc13780 100644
--- a/src/whylogs/viewer/templates/index-hbs-cdn-all-in.html
+++ b/src/whylogs/viewer/templates/index-hbs-cdn-all-in.html
@@ -1776,6 +1776,10 @@ <h1 class="no-responsive__title">Hold on! :)</h1>
         return svgEl._groups[0][0].outerHTML;
       }
 
+      function range_arr(size, startAt = 0) {
+        return [...Array(size).keys()].map(i => i + startAt);
+}
+
       function generateBarChart(currentWidth, key, datas, referenceData) {
         let histogramData = [],
             overlappedHistogramData = [];
@@ -1786,10 +1790,13 @@ <h1 class="no-responsive__title">Hold on! :)</h1>
         }
         let yFormat,
             xFormat;
-        const data = histogramData.map((profile, index) => {
+        
+
+        minArray = range_arr(Math.min(histogramData.length,overlappedHistogramData.length))
+        const data = minArray.map((profile, index) => {
           return {
             group: index,
-            profile: profile.axisY,
+            profile: histogramData[index].axisY,
             reference_profile: overlappedHistogramData[index].axisY
           }
         }).slice(0, 20)
@@ -1885,10 +1892,13 @@ <h1 class="no-responsive__title">Hold on! :)</h1>
           histogramData = chartData(datas)
           overlappedHistogramData = chartData(referenceData.columns[key.data.key])
         }
-        const data = histogramData.map((value, index) => {
-          const difference = value.axisY - overlappedHistogramData[index].axisY
+
+        minArray = range_arr(Math.min(histogramData.length,overlappedHistogramData.length))
+
+        const data = minArray.map((value, index) => {
+          const difference = histogramData[index].axisY - overlappedHistogramData[index].axisY
           const negativeValues = difference < 0 ? difference : 0
-          return [+value.axisY, negativeValues]
+          return [+histogramData[index].axisY, negativeValues]
         }).slice(0, 20).flat()
 
         let yFormat,
@@ -2666,7 +2676,7 @@ <h1 class="no-responsive__title">Hold on! :)</h1>
           ${frequentItemBoxElement('',chipElementTableData(items[item].value))}
         `
         referenceFrequentItemString += `
-          ${frequentItemBoxElement('',chipElementTableData(referenceItems[item].value))}
+          ${frequentItemBoxElement('',chipElementTableData(referenceItems[item]?.value ?? ''))}
         `
       }
     );