Frequency display improvements (#1060)

* Hide redundant frequencies

* Add dataset counters for unique expressions/readings

* Update frequency display to include disambiguations

ext/mixed/css/display.css

@@ -572,9 +572,6 @@ button.action-button {
 .entry-header3 {
     display: inline;
 }
-.term-frequency-separator::before {
-    content: ":";
-}
 .entry+.entry {
     border-top: var(--thin-border-size) solid var(--light-border-color);
 }
@@ -609,6 +606,27 @@ button.action-button {
 .term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text::after {
     content: "\3001";
 }
+.term-frequency-separator::before {
+    content: ":";
+}
+.term-frequency-disambiguation-separator::before {
+    content: ":";
+}
+.term-frequency-disambiguation::before {
+    content: "(";
+}
+.term-frequency-disambiguation::after {
+    content: ") ";
+}
+.frequencies .tag[data-reading-is-same=true] .term-frequency-disambiguation-separator,
+.frequencies .tag[data-reading-is-same=true] .term-frequency-disambiguation-reading,
+.entry[data-unique-expression-count="1"] .term-frequency-disambiguation-separator,
+.entry[data-unique-expression-count="1"] .term-frequency-disambiguation-expression,
+.entry[data-unique-reading-count="1"] .term-frequency-disambiguation-separator,
+.entry[data-unique-reading-count="1"] .term-frequency-disambiguation-reading,
+.entry[data-unique-expression-count="1"][data-unique-reading-count="1"] .term-frequency-disambiguation {
+    display: none;
+}
 
 
 /* Merged term styles */
@@ -648,6 +666,9 @@ button.action-button {
     bottom: -1.9em;
     white-space: nowrap;
 }
+.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.frequencies .term-frequency-disambiguation {
+    display: none;
+}
 
 
 /* Definitions */

ext/mixed/display-templates.html

@@ -88,7 +88,7 @@
 <template id="kanji-reading-template"><dd class="kanji-reading"></dd></template>
 
 <template id="tag-template"><span class="tag"><span class="tag-inner"></span></span></template>
-<template id="tag-frequency-template"><span class="tag" data-category="frequency"><span class="tag-inner"><span class="term-frequency-dictionary-name"></span><span class="term-frequency-separator"></span><span class="term-frequency-value"></span></span></span></template>
+<template id="tag-frequency-template"><span class="tag" data-category="frequency"><span class="tag-inner"><span class="term-frequency-disambiguation"><span class="term-frequency-disambiguation-expression"></span><span class="term-frequency-disambiguation-separator"></span><span class="term-frequency-disambiguation-reading"></span></span><span class="term-frequency-dictionary-name"></span><span class="term-frequency-separator"></span><span class="term-frequency-value"></span></span></span></template>
 <template id="tag-search-template"><span class="tag" data-category="search"></span></template>
 
 </body></html>

ext/mixed/js/display-generator.js

@@ -57,12 +57,21 @@ class DisplayGenerator {
         const pitches = DictionaryDataUtil.getPitchAccentInfos(details);
         const pitchCount = pitches.reduce((i, v) => i + v.pitches.length, 0);
 
+        const uniqueExpressions = new Set();
+        const uniqueReadings = new Set();
+        for (const {expression, reading} of expressions) {
+            uniqueExpressions.add(expression);
+            uniqueReadings.add(reading);
+        }
+
         node.dataset.format = type;
         node.dataset.expressionMulti = `${merged}`;
         node.dataset.expressionCount = `${expressions.length}`;
         node.dataset.definitionCount = `${definitions.length}`;
         node.dataset.pitchAccentDictionaryCount = `${pitches.length}`;
         node.dataset.pitchAccentCount = `${pitchCount}`;
+        node.dataset.uniqueExpressionCount = `${uniqueExpressions.size}`;
+        node.dataset.uniqueReadingCount = `${uniqueReadings.size}`;
 
         bodyContainer.dataset.sectionCount = `${
             (definitions.length > 0 ? 1 : 0) +
@@ -437,16 +446,19 @@ class DisplayGenerator {
     }
 
     _createFrequencyTag(details) {
+        const {expression, reading, dictionary, frequency} = details;
         const node = this._templates.instantiate('tag-frequency');
 
-        let n = node.querySelector('.term-frequency-dictionary-name');
+        node.querySelector('.term-frequency-disambiguation-expression').textContent = expression;
-        n.textContent = details.dictionary;
+        node.querySelector('.term-frequency-disambiguation-reading').textContent = reading;
+        node.querySelector('.term-frequency-dictionary-name').textContent = dictionary;
+        node.querySelector('.term-frequency-value').textContent = frequency;
 
-        n = node.querySelector('.term-frequency-value');
+        node.dataset.expression = expression;
-        n.textContent = `${details.frequency}`;
+        node.dataset.reading = reading;
-
+        node.dataset.readingIsSame = `${reading === expression}`;
-        node.dataset.dictionary = details.dictionary;
+        node.dataset.dictionary = dictionary;
-        node.dataset.frequency = details.frequency;
+        node.dataset.frequency = frequency;
 
         return node;
     }