Improve frequency display (#1438)

* Add frequencyDisplayMode option

* Update tests

* Add setting

* Update frequency display styles

* Improve wrapping

3 files changed, 26 insertions, 7 deletions

diff --git a/ext/js/data/options-util.js b/ext/js/data/options-util.js
index 1105dfed..d7f09135 100644
--- a/ext/js/data/options-util.js
+++ b/ext/js/data/options-util.js
@@ -457,7 +457,8 @@ class OptionsUtil {
             {async: false, update: this._updateVersion5.bind(this)},
             {async: true,  update: this._updateVersion6.bind(this)},
             {async: false, update: this._updateVersion7.bind(this)},
-            {async: true,  update: this._updateVersion8.bind(this)}
+            {async: true,  update: this._updateVersion8.bind(this)},
+            {async: false, update: this._updateVersion9.bind(this)}
         ];
     }
 
@@ -736,4 +737,13 @@ class OptionsUtil {
         }
         return options;
     }
+
+    _updateVersion9(options) {
+        // Version 9 changes:
+        //  Added general.frequencyDisplayMode.
+        for (const profile of options.profiles) {
+            profile.options.general.frequencyDisplayMode = 'split-tags-grouped';
+        }
+        return options;
+    }
 }
diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index 9b451995..da1b053a 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -581,16 +581,21 @@ class DisplayGenerator {
 
     _createFrequencyGroup(details, kanji) {
         const {dictionary, frequencyData} = details;
+
         const node = this._templates.instantiate('frequency-group-item');
+        const body = node.querySelector('.tag-body-content');
 
-        const tagList = node.querySelector('.frequency-tag-list');
-        const tag = this._createTag({notes: '', name: dictionary, category: 'frequency'});
-        tagList.appendChild(tag);
+        this._setTextContent(node.querySelector('.tag-label-content'), dictionary);
+        node.dataset.details = dictionary;
 
-        const frequencyListContainer = node.querySelector('.frequency-list');
-        const createItem = (kanji ? this._createKanjiFrequency.bind(this) : this._createTermFrequency.bind(this));
-        this._appendMultiple(frequencyListContainer, createItem, frequencyData, dictionary);
+        for (let i = 0, ii = frequencyData.length; i < ii; ++i) {
+            const item = frequencyData[i];
+            const itemNode = (kanji ? this._createKanjiFrequency(item, dictionary) : this._createTermFrequency(item, dictionary));
+            itemNode.dataset.index = `${i}`;
+            body.appendChild(itemNode);
+        }
 
+        body.dataset.count = `${frequencyData.length}`;
         node.dataset.count = `${frequencyData.length}`;
 
         return node;
@@ -600,6 +605,8 @@ class DisplayGenerator {
         const {expression, reading, frequencies} = details;
         const node = this._templates.instantiate('term-frequency-item');
 
+        this._setTextContent(node.querySelector('.tag-label-content'), dictionary);
+
         const frequency = frequencies.join(', ');
 
         this._setTextContent(node.querySelector('.frequency-disambiguation-expression'), expression, 'ja');
@@ -622,6 +629,7 @@ class DisplayGenerator {
 
         const frequency = frequencies.join(', ');
 
+        this._setTextContent(node.querySelector('.tag-label-content'), dictionary);
         this._setTextContent(node.querySelector('.frequency-value'), frequency, 'ja');
 
         node.dataset.character = character;
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index 30a8e294..be402ec3 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -812,6 +812,7 @@ class Display extends EventDispatcher {
         data.ankiEnabled = `${options.anki.enable}`;
         data.glossaryLayoutMode = `${options.general.glossaryLayoutMode}`;
         data.compactTags = `${options.general.compactTags}`;
+        data.frequencyDisplayMode = `${options.general.frequencyDisplayMode}`;
         data.enableSearchTags = `${options.scanning.enableSearchTags}`;
         data.showPitchAccentDownstepNotation = `${options.general.showPitchAccentDownstepNotation}`;
         data.showPitchAccentPositionNotation = `${options.general.showPitchAccentPositionNotation}`;