diff --git a/browser/js/clone.js b/browser/js/clone.js
index 64ef3a1cfd11cd081f4447224710c96b72a13098..64332a38f2ded123a21773abac35766155ad2898 100644
--- a/browser/js/clone.js
+++ b/browser/js/clone.js
@@ -1707,6 +1707,9 @@ Clone.prototype = {
             html += row_1("locus", this.m.systemBox(this.germline).outerHTML + this.germline +
                 "<div class='div-menu-selector' id='listLocus' style='display: none'>" + this.createLocusList() + "</div>", undefined, time_length)
         }
+        if (this.seg != undefined && this.seg.junction != undefined){
+            html += row_1("Productivity", this.getProductivityNameDetailed() + "</div>", undefined, time_length)
+        }
         if (this.hasSizeConstant() || (this.hasSizeDistrib() && this.getGene("5") != "undefined V")){
             html += row_1("V gene (or 5')", this.getGene("5") +
                 "<div class='div-menu-selector' id='listVsegment' style='display: none'>" + this.createSegmentList("Vsegment") + "</div>", undefined, time_length)
diff --git a/browser/js/model.js b/browser/js/model.js
index 210054a7d844f45c26393dfe9e99332e7b6d81da..213be7ba9706da869ef74be33e23ec89a803c3e1 100644
--- a/browser/js/model.js
+++ b/browser/js/model.js
@@ -729,8 +729,18 @@ changeAlleleNotation: function(alleleNotation, update, save) {
             } else if (typeof this.diversity[key][time] != 'undefined') {
         	    // Diversity may not be stored in an Array for retrocompatiblitiy reasons
         	    // See #1941 and #3416
-        		if (this.diversity[key][time] != null) {
-                    return this.diversity[key][time].toFixed(3);
+        		if (this.diversity[key][time] != null){
+                    if (typeof this.diversity[key][time] == "number") {
+                        // old case, one global diversity
+                        return this.diversity[key][time].toFixed(3);
+                    } else {
+                        // case diversity by locus
+                        var diversity_by_locus = {}
+                        for (var locus in this.diversity[key][time]) {
+                            diversity_by_locus[locus] = this.diversity[key][time][locus].toFixed(3)
+                        }
+                        return diversity_by_locus
+                    }
                 } else {
                     return this.diversity[key][time]
                 }
@@ -1563,9 +1573,20 @@ changeAlleleNotation: function(alleleNotation, update, save) {
 
         // Sub-table diversity
         if ( typeof this.diversity != 'undefined') {
-            html += "<tr><td class='header' "+colspan_header+"> diversity </td></tr>"
+            html += "<tr><td class='header' "+colspan_header+"> Diversity indices </td></tr>"
             for (var key_diversity in this.diversity) {
-                html += "<tr><td> " + key_diversity.replace('index_', '') + "</td><td>" + this.getDiversity(key_diversity, timeID) + '</td></tr>'
+                var diversity = this.getDiversity(key_diversity, timeID)
+                if (typeof diversity == "string" || diversity == null){
+                    html += "<tr><td> " + translate_key_diversity(key_diversity) + "</td><td>" + diversity + '</td></tr>'
+                } else if (typeof diversity == "object"){
+                    html += "<tr><td "+colspan_header+">"+translate_key_diversity(key_diversity)+"</td></tr>"
+                    var present_locus = this.getLocusPresentInTop(timeID)
+                    for (var locus in diversity) {
+                        if( present_locus.indexOf(locus) != -1 || locus == "all"){
+                            html += "<tr><td> " + this.systemBox(locus).outerHTML + " "+locus+"</td><td>" + diversity[locus] + '</td></tr>'
+                        }
+                    }
+                }
             }
         }
         if ( typeof this.samples.diversity != 'undefined' && typeof this.samples.diversity[timeID] != 'undefined') {
@@ -1659,6 +1680,24 @@ changeAlleleNotation: function(alleleNotation, update, save) {
         return html
     },
 
+    /**
+     * Allow to know if a locus is present in clonotype of a sample
+     * include each clonotype of each clone inside the top limit and present with a least one read
+     * If a clone is share between sample, it will be present even in not in top limit of the sample (see fuse of top field)
+     */
+    getLocusPresentInTop: function(time){
+        var locus = []
+        for (var i = this.clones.length - 1; i >= 0; i--) {
+            var clone = this.clones[i]
+            if (clone.reads[time] && clone.top <= m.top){
+                if (locus.indexOf(clone.germline) == -1){
+                    locus.push(clone.germline)
+                }
+            }
+        }
+        return Array.from( new Set(locus) )
+    },
+
 
 ////////////////////////////////////
 //// clusters functions
diff --git a/browser/js/tools.js b/browser/js/tools.js
index aca759f5aa9e8824a68705a6abedca4e8bb8cdd7..02a348204c50ddef44235db06f483659cdc2ee78 100644
--- a/browser/js/tools.js
+++ b/browser/js/tools.js
@@ -938,6 +938,16 @@ function download_csv(csv, filename) {
 }
 
 
+function translate_key_diversity(key_diversity){
+    var table = {
+        "index_H_entropy" :      "Shannon's diversity",
+        "index_E_equitability" : "Shannon's equitability",
+        "index_Ds_diversity" :   "Simpson's diversity"
+    }
+    return table[key_diversity]
+}
+
+
 ///////////////////////////
 /// Fct to fill info table
 ///////////////////
diff --git a/browser/test/QUnit/testFiles/clone_test.js b/browser/test/QUnit/testFiles/clone_test.js
index 8fe2e8717b32565b2830e3edd1642d83939e6bfc..50692d29d6585c2395c779fc43bd1d37f6f15fba 100644
--- a/browser/test/QUnit/testFiles/clone_test.js
+++ b/browser/test/QUnit/testFiles/clone_test.js
@@ -284,8 +284,8 @@ QUnit.test("name, informations, getHtmlInfo", function(assert) {
         "getHtmlInfo: segmentation information + modification button + manuallyChanged icon");
     
     // <tr><td>locus</td><td colspan='4'><span title=\"TRG\" class=\"systemBoxMenu\">G</span>TRG</td></tr> // not tested (order of title/class)
-    
-
+    assert.includes(html, "<tr id='modal_line_Productivity'><td id='modal_line_title_Productivity'>Productivity</td><td colspan='4' id='modal_line_value_Productivity'>",
+        "getHtmlInfo: productivity information (if exist)");
     // locus/genes content tests
     // TODO correct this locus test/function for chromium/firefox (inversion des balises)
     /*assert.includes(html, "<tr><td>locus</td><td colspan='4'><span title=\"TRG\" class=\"systemBoxMenu\">G</span>TRG<div class='div-menu-selector' id='listLocus' style='display: none'>",
diff --git a/browser/test/QUnit/testFiles/model_test.js b/browser/test/QUnit/testFiles/model_test.js
index 12f314e288002775700ca4afee445e7243420176..153c0b8f877e2df86572b094dc977546c7cb03ac 100644
--- a/browser/test/QUnit/testFiles/model_test.js
+++ b/browser/test/QUnit/testFiles/model_test.js
@@ -688,4 +688,74 @@ QUnit.test("export clone informations", function(assert) {
     // ** Don't call, open a download file popup ** //
     // var airr_without_list = m.exportCloneAs("airr")
     // assert.deepEqual(airr, airr_without_list, "Get export informations by model exportCloneAs function")
+
+});
+
+
+QUnit.test("getLocusPresentInTop", function(assert) {
+    // Create and populate model
+    var m = new Model();
+    var data_copy = JSON.parse(JSON.stringify(json_data));
+    m.parseJsonData(data_copy, 100)
+    m.initClones()
+
+    var locus = m.getLocusPresentInTop(0)
+    assert.deepEqual( locus, ["IGH", "TRG"] )
+
+    locus = m.getLocusPresentInTop(1)
+    assert.deepEqual( locus, ["IGH", "TRG"] )
+});
+
+
+QUnit.test("getPointHtmlInfo", function(assert) {
+
+    // Create and populate model
+    var m = new Model();
+    var data_copy = JSON.parse(JSON.stringify(json_data));
+    m.parseJsonData(data_copy, 100)
+    m.initClones()
+    m.diversity = {
+        "index_H_entropy": [
+          5.688690639121887,
+          {
+            "all": 5.685521833966959,
+            "TRG": 5.251430198730304,
+            "IGH": 4.6659245018527145
+          }
+        ],
+        "index_E_equitability": [
+          0.39255398511886597,
+          {
+            "all": 0.39234431286307087,
+            "TRG": 0.3710257284862601,
+            "IGH": 0.3524275802230387
+          }
+        ],
+        "index_Ds_diversity": [
+          0.9644120931625366,
+          {
+            "all": 0.9643881817723228,
+            "TRG": 0.9505217377100443,
+            "IGH": 0.8727130704274034
+          }
+        ]
+      }
+
+    // first sample has old fashion diversity
+    var html_info = m.getPointHtmlInfo(0)
+    assert.includes(html_info, "Diversity indices", "htmlInfo get diversity header")
+    assert.includes(html_info, "<tr><td> Shannon's diversity</td><td>5.689</td></tr>", "An index is correctly present and formated")
+    assert.notIncludes(html_info, '<tr><td colspan=\'5\'>Shannon\'s diversity</td></tr><tr><td> <span class="systemBoxMenu" title="all">x</span> all</td>', "")
+
+
+    // second sample has diversity by locus
+    html_info = m.getPointHtmlInfo(1)
+    // each diversity indices has header
+    assert.includes(html_info, "<tr><td colspan='5'>Shannon's diversity</td></tr>")
+    assert.includes(html_info, "<tr><td colspan='5'>Shannon's equitability</td></tr>")
+    assert.includes(html_info, "<tr><td colspan='5'>Simpson's diversity</td></tr>")
+    // each present locus id visible
+    assert.includes(html_info, '<tr><td colspan=\'5\'>Simpson\'s diversity</td></tr><tr><td> <span class="systemBoxMenu" title="all">x</span> all</td>')
+    assert.includes(html_info, '<tr><td> <span class=\"systemBoxMenu\" title=\"TRG\" style=\"background: rgb(220, 50, 47);\">G</span> TRG</td><td>5.251</td></tr>')
+    assert.includes(html_info, '<tr><td> <span class=\"systemBoxMenu\" title=\"IGH\" style=\"background: rgb(108, 113, 196);\">H</span> IGH</td><td>4.666</td></tr>')
 });
diff --git a/browser/test/functional/issues/test_4070.rb b/browser/test/functional/issues/test_4070.rb
index 6683701590a4baac4bf9fe15c79b0beb7aeb5edf..90521faa242be0da0ad324366afb8bdc6d1d8435 100644
--- a/browser/test/functional/issues/test_4070.rb
+++ b/browser/test/functional/issues/test_4070.rb
@@ -16,7 +16,7 @@ class TestNullDiversityIssue < BrowserTest
     $b.info_point.i.click
     info_timepoint = $b.div(id: "info_timepoint")
     # timepoint information panel is open and show correct informations
-    assert( info_timepoint.text.include? "Ds_diversity")    
+    assert( info_timepoint.text.include? "Simpson's diversity")
     assert( info_timepoint.text.include? "null")    
   end