Implement smart readings display and highlight English definition in …

…popover dictionary based on gloss

brandt.md

@@ -44,8 +44,8 @@ progress: 81 / 4143 tasks complete (~1.9%)
   - [x] display text with English translation and gloss (Feb 9)
   - [x] display character definitions on click (Feb 9)
   - [ ] display lesson notes in popover
-  - [ ] in popover: highlight reading/definition according to gloss, if present
-  - [ ] display correct character readings via gloss, if present
+  - [x] in popover: highlight reading/definition according to gloss, if present
+  - [x] display correct character readings via gloss, if present
   - [x] enable character definitions for characters first seen in other passages
   - [ ] make build script to aggregate lexicon + make text file to be checked into repo to track changes
 - Lesson 1, Text 1

src/app/lexiconEntryEnKeywords.ts

@@ -0,0 +1,16 @@
+import { LexiconEntry } from "@/app/texts/Passage";
+
+export function findEntryMatchingEnKeywords(
+  entries: LexiconEntry[],
+  enKeywords: string[]
+) {
+  return entries.find((e) =>
+    getEntryEnKeywords(e).some((k) => enKeywords.includes(k))
+  );
+}
+export function getEntryEnKeywords(entry: LexiconEntry): string[] {
+  return entry.en?.split(/[,;]/).map((s) => toEnMatchKeyword(s)) || [];
+}
+export function toEnMatchKeyword(s: string): string {
+  return s.trim().replace(/^(an? |to |the )/g, "");
+}

src/app/prebuild.ts

@@ -12,6 +12,11 @@ import {
 } from "@/app/texts/files";
 import * as fs from "fs";
 import * as path from "path";
+import {
+  getEntryEnKeywords,
+  findEntryMatchingEnKeywords,
+  toEnMatchKeyword,
+} from "./lexiconEntryEnKeywords";
 
 const prebuildDirectoryPath = path.join(process.cwd(), "prebuild");
 
@@ -76,9 +81,7 @@ function mergeLexiconEntries(
   const merged: LexiconEntry[] = [...a];
   for (const entry of b) {
     const bEntryEnKeywords = getEntryEnKeywords(entry);
-    const matchingEntry = merged.find((e) =>
-      getEntryEnKeywords(e).some((k) => bEntryEnKeywords.includes(k))
-    );
+    const matchingEntry = findEntryMatchingEnKeywords(merged, bEntryEnKeywords);
     if (matchingEntry) {
       matchingEntry.en = mergeEntryEnKeywords(matchingEntry, entry);
       matchingEntry.jyutping = mergeEntryPronunciation(
@@ -99,18 +102,7 @@ function mergeLexiconEntries(
   return merged;
 }
 
-function getEntryEnKeywords(entry: LexiconEntry): string[] {
-  return entry.en?.split(/[,;]/).map((s) => toEnMatchKeyword(s)) || [];
-}
-function toEnMatchKeyword(s: string): string {
-  return s.trim().replace(/^(an? |to |the )/, "");
-}
-
 function mergeEntryEnKeywords(a: LexiconEntry, b: LexiconEntry): string {
-  // const aKeywords = getEntryEnKeywords(a);
-  // const bKeywords = getEntryEnKeywords(b);
-  // const mergedKeywords = [...new Set([...aKeywords, ...bKeywords])].join(', ');
-  // return mergedKeywords;
   const mergedSegments =
     a.en
       ?.split(";")

src/app/texts/[textId]/ChineseWithPopover.tsx

@@ -9,6 +9,10 @@ import { PassageVocab } from "../Passage";
 import { usePopover } from "./Popover";
 import { useState } from "react";
 import { textIsPunctuation } from "./punctuation";
+import {
+  findEntryMatchingEnKeywords,
+  toEnMatchKeyword,
+} from "@/app/lexiconEntryEnKeywords";
 
 export type DisplayOptions = {
   ruby: null | "en" | "vi" | "jyutping" | "pinyin";
@@ -28,6 +32,7 @@ export function ChineseWithPopover({
 }) {
   const popover = usePopover();
   const [popoverChar, setChar] = useState<string | null>(null);
+  const [popoverCharGloss, setCharGloss] = useState<string | null>(null);
 
   let glossedChars = 0;
 
@@ -40,16 +45,31 @@ export function ChineseWithPopover({
 
         const id = `text-${char}-${i}`;
 
-        if (!vocab[char]) {
+        const entries = vocab[char];
+
+        if (!entries?.length) {
           return <span key={i}>{char}</span>;
         }
+
+        const enGloss = gloss?.[glossIndex]?.replace(/_/g, " ") || null;
+
+        const soleEntry = entries.length === 1 ? entries[0] : null;
+
+        const matchingEntry = enGloss
+          ? findEntryMatchingEnKeywords(entries, [enGloss])
+          : null;
+
         let rubyText: string | null = null;
-        if (displayOptions.ruby === "en")
-          rubyText = gloss?.[glossIndex]?.replace(/_/g, " ") || null;
+        if (displayOptions.ruby === "en") rubyText = enGloss;
         else
           rubyText =
-            displayOptions?.ruby && vocab[char]
-              ? vocab[char]![0][displayOptions.ruby]
+            displayOptions?.ruby && (matchingEntry || soleEntry)
+              ? (matchingEntry || soleEntry
+                  ? [matchingEntry || soleEntry!]
+                  : entries
+                )
+                  .map((e) => e[displayOptions.ruby!])
+                  .join(" / ")
               : null;
 
         return (
@@ -64,55 +84,120 @@ export function ChineseWithPopover({
               onClick: (e) => {
                 popover.refs.setReference(e.currentTarget);
                 setChar(char);
+                setCharGloss(enGloss);
               },
             })}
           >
             {rubyText ? (
               <ruby id={id}>
                 {char}
-                <rt className="text-[0.40em] mr-[0.40em]">{rubyText}</rt>
+                <rt className="text-[0.40em] mr-[0.40em]">
+                  {rubyText}
+                  {!soleEntry && !matchingEntry ? "*" : ""}
+                </rt>
               </ruby>
             ) : (
               char
             )}
           </span>
         );
       })}
-      {popover.open && popoverChar && vocab[popoverChar] && (
-        <FloatingPortal>
-          <FloatingFocusManager context={popover.context} modal={popover.modal}>
-            <div
-              ref={popover.refs.setFloating}
-              style={{
-                ...popover.floatingStyles,
-                filter:
-                  "drop-shadow(1px 1px 2px rgb(var(--foreground-rgb) / 0.4))",
-              }}
-              aria-labelledby={popover.labelId}
-              aria-describedby={popover.descriptionId}
-              {...popover.getFloatingProps()}
-            >
-              <FloatingArrow
-                ref={popover.arrowRef}
-                context={popover.context}
-                style={{
-                  fill: "rgba(var(--background-rgb))",
-                }}
-                fill="blue"
-              />
-              <div className="bg-background max-w-[10rem]">
-                {popoverChar &&
-                  vocab[popoverChar]?.map((entry, i) => (
-                    <div key={i} className="p-1 rounded">
-                      <b>{entry.vi}</b>{" "}
-                      <span className="text-sm">{entry.en}</span>
-                    </div>
-                  ))}
-              </div>
-            </div>
-          </FloatingFocusManager>
-        </FloatingPortal>
-      )}
+      {popover.open &&
+        popoverChar &&
+        vocab[popoverChar] &&
+        PopoverDictionaryContent(popover, popoverChar, vocab, popoverCharGloss)}
     </span>
   );
 }
+
+function PopoverDictionaryContent(
+  popover: ReturnType<typeof usePopover>,
+  popoverChar: string,
+  vocab: PassageVocab,
+  enGloss: string | null
+) {
+  return (
+    <FloatingPortal>
+      <FloatingFocusManager context={popover.context} modal={popover.modal}>
+        <div
+          ref={popover.refs.setFloating}
+          style={{
+            ...popover.floatingStyles,
+            filter: "drop-shadow(1px 1px 2px rgb(var(--foreground-rgb) / 0.4))",
+          }}
+          aria-labelledby={popover.labelId}
+          aria-describedby={popover.descriptionId}
+          {...popover.getFloatingProps()}
+        >
+          <FloatingArrow
+            ref={popover.arrowRef}
+            context={popover.context}
+            style={{
+              fill: "rgba(var(--background-rgb))",
+            }}
+            fill="blue"
+          />
+          <div className="bg-background max-w-[10rem]">
+            {popoverChar &&
+              vocab[popoverChar]?.map((entry, i, entries) => {
+                const enDefinitionSegmentsCount =
+                  entry.en?.split(/[,;]/).length || 0;
+
+                return (
+                  <div key={i} className="p-1 rounded">
+                    {[entry.jyutping, entry.pinyin, entry.vi]
+                      .filter((e) => e)
+                      .map((e, i, readings) => (
+                        <span key={i}>
+                          <b>{e}</b>
+                          {i < readings.length - 1 ? " / " : " "}
+                        </span>
+                      ))}
+                    <span className="text-sm">
+                      {entry.en
+                        ?.split("; ")
+                        .map(
+                          (semicolonSegment, semicolonI, semicolonSegments) => {
+                            const commaSegments = semicolonSegment.split(", ");
+                            return (
+                              <span key={semicolonSegment}>
+                                {commaSegments.map(
+                                  (commaSegment, commaI, commaSegments) => {
+                                    const segmentKeyword =
+                                      toEnMatchKeyword(commaSegment);
+
+                                    return (
+                                      <span
+                                        key={commaSegment}
+                                        className={`${
+                                          segmentKeyword === enGloss &&
+                                          enDefinitionSegmentsCount > 1
+                                            ? "bg-yellow-400/10 border-yellow-400 border text-foreground"
+                                            : ""
+                                        }`}
+                                      >
+                                        {commaSegment}
+                                        {commaI < commaSegments.length - 1
+                                          ? ", "
+                                          : ""}
+                                      </span>
+                                    );
+                                  }
+                                )}
+                                {semicolonI < semicolonSegments.length - 1
+                                  ? "; "
+                                  : ""}
+                              </span>
+                            );
+                          }
+                        )}
+                    </span>
+                  </div>
+                );
+              })}
+          </div>
+        </div>
+      </FloatingFocusManager>
+    </FloatingPortal>
+  );
+}

texts/brandt-ch01-1.passage.md

@@ -24,7 +24,7 @@ father speak this what harm
 
 兒曰。常聞人言。鵲鳴吉。鴉鳴凶。
 (The) boy said, "(I) have often heard people say (that when a) magpie chatters, (it brings) good luck, (and when a) crow caws, (it brings) bad luck.
-boy speak frequent hear people say magpie sing auspicious crow sing unlucky
+boy speak frequent hear person say magpie sing auspicious crow sing unlucky
 
 今{d:鳴者}{e:鴉也}。故叱之。
 Today the crows have been cawing, therefore I have hooted at them."

texts/brandt-ch01-1.vocab.tsv

@@ -10,19 +10,19 @@ Traditional	Vietnamese	Jyutping	English
 頸	cảnh	geng²	the neck; the throat; an isthmus
 而	nhi	ji⁴	a conjunctive particle; an adversative particle; and; yet; but; like; you; your
 鳴	minh	ming⁴	the cry of a bird or animal; a sound; to sing; to cry
-兒	nhi	ji⁴	a child; a son; male
+兒	nhi	ji⁴	a child; a son; male; boy
 叱	sất	cik¹	to hoot at
 之	chi	zi¹	of; it; him; her; them; this; that; to go; to proceed
 父	phụ	fu⁶	a father
 曰	viết	joek⁶	to speak
 是	thị	si⁶	to be; right; this; that
-何	hà	ho⁴	an interrogative particle; how? why? what?
+何	hà	ho⁴	an interrogative particle; how; why; what
 害	hại	hoi⁶	to injure; harm
 常	thường	soeng⁴	constant; usual; frequent
 聞	văn	man⁴	to hear; to smell; read
 聞	vấn	man⁴, man²	to make known; to state
 人	nhân	jan⁴	a man; person
-言	ngôn	jin⁴	words; language; to speak; to express
+言	ngôn	jin⁴	words; language; to speak; to express; to say
 鵲	thước	coek³	the magpie; the jay
 今	kim	gam¹	now; the present time
 者	giả	ze²	a particle of many uses imparting various shades of meaning - adjectival, participial etc. to words to which it is joined; that which
@@ -43,7 +43,7 @@ Traditional	Vietnamese	Jyutping	English
 知	tri	zi¹	to know; to perceive; to be aware of
 況	huống	fong³	moreover; still more; how much more
 而況	nhi huống	ji⁴ fong³	still more; how much more
-乎	hồ	fu⁴	an interrogative and exclamatory particle; an expletive
+乎	hồ	fu⁴	an interrogative particle; an exclamatory particle; an expletive
 背	bội	bui³	behind; contrary
 理	lý	lei⁵	right
 行	hành	hang⁴	to act; to do