feat: add intelligibility marks

package.json

@@ -48,7 +48,7 @@
   "dependencies": {
     "@ag-grid-community/client-side-row-model": "25.2.0",
     "@ag-grid-community/core": "25.2.0",
-    "@interslavic/utils": "^2.2.2",
+    "@interslavic/utils": "^2.2.5",
     "classnames": "2.3.2",
     "lodash": "4.17.21",
     "md5": "2.3.0",

src/actions/actions.ts

@@ -197,5 +197,5 @@ export function toggleThemeAction(data: 'dark' | 'light') {
     return {
         type: ActionTypes.TOGGLE_THEME,
         data,
-    }    
+    }
 }

src/components/Modals/ModalDialog/ModalDialog.scss

@@ -79,11 +79,11 @@
   }
 
   &__body {
-    padding: .5vh 2.5vw;
     min-width: 500px;
     overflow: auto;
 
     @media (max-width: 678px) {
+      padding: .5vh 2.5vw;
       min-width: 90vw;
     }
 
@@ -96,8 +96,20 @@
     }
   }
 
+  &__body, &__footer {
+    padding: 12px 24px;
+
+    @media (max-width: 678px) {
+      padding: .5vh 2.5vw;
+    }
+  }
+
   &__footer {
     border-top: var(--border);
-    padding: 16px;
+    line-height: 1.5;
+
+    @media (max-width: 450px) {
+      font-size: 3vw;
+    }
   }
 }

src/components/Modals/TranslationsModal/TranslationsModal.scss

@@ -1,54 +1,5 @@
-.details-modal {
-  background: var(--light);
-  border: var(--border);
-  border-radius: var(--border-radius-s);
-
-  &__header {
-    display: flex;
-    justify-content: space-between;
-    border-bottom: var(--border);
-    padding: 16px;
-
-    &-title {
-      font-size: 20px;
-      line-height: 24px;
-      font-weight: 600;
-      color: var(--dark);
-
-      .details {
-        font-weight: 400;
-        font-style: italic;
-      }
-    }
-
-    &-close {
-      cursor: pointer;
-      background: none;
-      border: none;
-      font-size: 24px;
-      line-height: 24px;
-      font-weight: 700;
-      color: var(--light-gray-color);
-      transition: 100ms color ease-in-out;
-
-      &:hover {
-        color: var(--muted-text-color);
-      }
-    }
-  }
-
-  &__body {
-    padding: .5vh 2.5vw;
-
-    @media (max-width: 678px) {
-      * {
-        font-size: 2.5vw !important;
-      }
-    }
-  }
-
-  &__footer {
-    border-top: var(--border);
-    padding: 16px;
+.modal-legend {
+  @media (min-width: 678px) {
+    max-width: 56ch;
   }
 }

src/components/Modals/TranslationsModal/TranslationsModal.tsx

@@ -15,17 +15,18 @@ import { useModalDialog } from 'hooks/useModalDialog';
 import { useResults } from 'hooks/useResults';
 import { getCyrillic } from 'utils/getCyrillic';
 import { getLatin } from 'utils/getLatin';
+import { findIntelligibilityIssues } from "utils/intelligibilityIssues";
 
 import { Table } from 'components/Table';
 
 import './TranslationsModal.scss';
 
 function renderTranslate(str: string): string {
     if (str && str[0] === '!') {
-        return `{${str.slice(1)}}[s]@ts;`;
+        return `🤖 {${str.slice(1)}}[s]@ts;`;
     }
-    
-    return `{✓}[g] ${str}@ts`;
+
+    return `${str}@ts`;
 }
 
 export const TranslationsModal =
@@ -55,6 +56,8 @@ export const TranslationsModal =
             ...addLangsFiltered,
         ];
 
+        const intelligibility = Dictionary.getField(item.raw, 'intelligibility');
+        const marks = findIntelligibilityIssues(intelligibility);
         const tableData = allLangs.reduce((arr, lang) => {
             const translate = Dictionary.getField(item.raw, lang).toString();
 
@@ -81,7 +84,7 @@ export const TranslationsModal =
             return [
                 ...arr,
                 [
-                    `{${t(`${lang}Lang`)}}[B]@ts;b`,
+                    `{${marks[lang] || ''} ${t(`${lang}Lang`)}}[B]@ts;b`,
                     renderTranslate(translate),
                 ],
                 (
@@ -94,6 +97,8 @@ export const TranslationsModal =
             ];
         }, []);
 
+        const hasMarks = new Set(Object.values(marks).filter(Boolean)).size > 0;
+
         return (
             <>
                 <div className="modal-dialog__header">
@@ -112,9 +117,9 @@ export const TranslationsModal =
                     <Table data={tableData}/>
                 </div>
                 <footer className="modal-dialog__footer">
-                    {t('translationsBottomText')}
-                    <br/>
-                    {t('aboutJoinText')}
+                    <div className="modal-legend">
+                        {hasMarks ? [t('translationsBottomTextShort'), t('translationsBottomTextExtra')].join(', ') : t('translationsBottomTextShort') + '.'}
+                    </div>
                 </footer>
             </>
         );

src/components/ResultsCard/ResultsCard.scss

@@ -150,4 +150,21 @@
       }
     }
   }
+
+  &__status {
+    /* inline text-like button */
+    cursor: pointer;
+    background: none;
+    border: none;
+    appearance: none;
+    -webkit-appearance: none;
+    font: inherit;
+    margin: 0;
+    padding: 0;
+    transition: transform .1s ease-in-out;
+
+    &:hover {
+      transform: scale(1.3);
+    }
+  }
 }

src/components/ResultsCard/ResultsCard.tsx

@@ -14,6 +14,7 @@ import { useAlphabets } from 'hooks/useAlphabets';
 import { useIntersect } from 'hooks/useIntersect';
 import { useLang } from 'hooks/useLang';
 import { useShortCardView } from 'hooks/useShortCardView';
+import { estimateIntelligibility, hasIntelligibilityIssues } from "utils/intelligibilityIssues";
 import { toQueryString } from 'utils/toQueryString';
 import { getPartOfSpeech } from 'utils/wordDetails';
 import { wordHasForms } from 'utils/wordHasForms';
@@ -96,6 +97,8 @@ export const ResultsCard =
         const wordId = Dictionary.getField(item.raw, 'id').toString();
         const pos = getPartOfSpeech(item.details);
         const dispatch = useDispatch();
+        const intelligibility = Dictionary.getField(item.raw, 'intelligibility');
+        const intelligibilityVector = estimateIntelligibility(intelligibility);
         const lang = useLang();
 
         const cardBiInfo: ICardAnalytics = useMemo(() => (
@@ -194,6 +197,15 @@ export const ResultsCard =
                             lang={item.to}
                         />
                     ) : renderOriginal(item, alphabets, index)}
+                    {'\u00A0'}
+                    { hasIntelligibilityIssues(intelligibilityVector)
+                        ? <button
+                            key="intelligibilityIssues"
+                            onClick={showTranslations}
+                            className={classNames({ 'results-card__status': true })}
+                            title={t('intelligibilityIssues')}>⚠️</button>
+                        : undefined
+                    }
                     {item.to === 'isv' && short && (
                         <>
                             &nbsp;

src/components/Table/Table.scss

@@ -7,6 +7,7 @@
   text-align: start;
   width: 100%;
   border-collapse: collapse;
+  line-height: 1.4;
 
   th,
   td {
@@ -89,4 +90,4 @@
       border-left-color: transparent;
     }
   }
-}
+}

src/consts.ts

@@ -53,6 +53,7 @@ export const initialFields = [
     'en',
     'sameInLanguages',
     'genesis',
+    'intelligibility',
 ];
 
 export const initialAddFields = [

src/index.scss

@@ -69,7 +69,7 @@ html, body {
 }
 
 #app, input, select, button, a, textarea {
-  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", Arial, sans-serif;
+  font-family: Roboto, "Helvetica Neue", "Segoe UI", "Liberation Sans", Arial, sans-serif;
   -webkit-appearance: none;
 }
 

src/translations/data.json

@@ -2550,20 +2550,35 @@
     "mk": "Покажи меѓусловенски зборови со избрани азбуки",
     "bg": "Покажи междуславянски думите с избрани азбука"
   },
-  "translationsBottomText": {
-    "en": "The symbol ✓ indicates verified translations.",
-    "isv": "Znakom ✓ sut označene prověrene prěvody",
-    "ru": "Знаком ✓ отмечены проверенные переводы.",
-    "uk": "Знаком ✓ відзначені перевірені переклади.",
-    "be": "Знакам ✓ адзначаны правераныя пераклады.",
-    "pl": "Symbol ✓ oznacza zweryfikowane tłumaczenia.",
-    "cs": "Symbol ✓ označuje ověřené překlady.",
-    "sk": "Symbol ✓ označuje overené preklady.",
-    "sl": "Simbol ✓ označuje preverjene prevode.",
-    "hr": "Simbol ✓ označava provjerene prijevode.",
-    "sr": "Симбол ✓ означава проверене преводе.",
-    "mk": "Симболот ✓ означува заверени преводи.",
-    "bg": "Символът ✓ показва проверени преводи."
+  "translationsBottomTextShort": {
+    "en": "The symbol 🤖 denotes machine translations",
+    "isv": "Znakom 🤖 sut označene mašinne prěvody",
+    "ru": "Символом 🤖 обозначаются машинные переводы",
+    "uk": "Символом 🤖 позначаються машинні переклади",
+    "be": "Сімвалам 🤖 азначаюцца машынныя пераклады",
+    "pl": "Symbolem 🤖 oznaczane są tłumaczenia maszynowe",
+    "cs": "Symbolem 🤖 jsou označeny strojové překlady",
+    "sk": "Symbolom 🤖 sú označené strojové preklady",
+    "sl": "Simbol 🤖 označuje strojne prevode",
+    "hr": "Simbolom 🤖 označeni su strojni prijevodi",
+    "sr": "Символом 🤖 означавају се машински преводи",
+    "mk": "Символот 🤖 означува машински преводи",
+    "bg": "Символът 🤖 означава машинни преводи"
+  },
+  "translationsBottomTextExtra": {
+    "en": "\uD83D\uDEAB before a language name implies no comprehension by native speakers of that language, while ⚠️ indicates potential problems with understanding the Interslavic word.",
+    "isv": "\uD83D\uDEAB prěd nazvoju jezyka označaje, že govoritelji togo jezyka ne budut razuměti slova, a ⚠️ znači potencialne problemy s razuměńjem medžuslovjanskogo slova.",
+    "ru": "\uD83D\uDEAB перед названием языка означает, что его носители не смогут понять слово, в то время как ⚠️ предупреждает о возможных проблемах с пониманием межславянского слова.",
+    "uk": "\uD83D\uDEAB перед назвою мови означає, що її носії не зможуть зрозуміти слово, тоді як ⚠️ попереджає про можливі проблеми з розумінням міжслов'янського слова.",
+    "be": "\uD83D\uDEAB перад назвай мовы азначае, што яе носіцы не змогуць зразумець слова, а ⚠️ папярэджвае пра магчымыя праблемы з разуменнем міжславянскага слова.",
+    "pl": "\uD83D\uDEAB przed nazwą języka oznacza, że jego użytkownicy nie będą w stanie zrozumieć słowa, podczas gdy ⚠️ ostrzega przed potencjalnymi problemami z rozumieniem słowa międzysłowiańskiego.",
+    "cs": "\uD83D\uDEAB před názvem jazyka znamená, že jeho mluvčí nebudou schopni slovo pochopit, zatímco ⚠️ varuje před potenciálními problémy s pochopením mezislovanského slova.",
+    "sk": "\uD83D\uDEAB pred názvom jazyka znamená, že jeho rečníci nebudú schopní slovo pochopiť, zatiaľ čo ⚠️ varuje pred potenciálnymi problémami s pochopením medzislovanského slova.",
+    "sl": "\uD83D\uDEAB pred imenom jezika pomeni, da njegovi govorci ne bodo mogli razumeti besede, medtem ko ⚠️ opozarja na morebitne težave pri razumevanju medslavenske besede.",
+    "hr": "\uD83D\uDEAB ispred naziva jezika znači da njegovi govornici neće moći razumjeti riječ, dok ⚠️ upozorava na potencijalne probleme s razumijevanjem međuslavenske riječi.",
+    "sr": "\uD83D\uDEAB испред назива језика означава да његови говорници неће моћи разумети реч, док ⚠️ упозорава на потенцијалне проблеме с разумевањем међусловенске речи.",
+    "mk": "\uD83D\uDEAB пред името на јазикот означува дека неговите говорници нема да можат да го разберат зборот, додека ⚠️ укажува на потенцијални проблеми со разбирањето на меѓусловенската збор.",
+    "bg": "\uD83D\uDEAB преди името на езика означава, че неговите говорители няма да могат да разберат думата, докато ⚠️ предупреждава за потенциални проблеми с разбирането на междуславянската дума."
   },
   "resultsNotFound": {
     "en": "Nothing found",
@@ -3240,5 +3255,20 @@
     "sr": "Мрачна тема",
     "mk": "Темна тема",
     "bg": "Тъмна тема"
+  },
+  "intelligibilityIssues": {
+    "en": "The word is not universally intelligible across Slavic languages",
+    "isv": "Slovo ne je universalno razumljivo vo vsih slovjanskyh jezykah",
+    "ru": "Слово не является универсально понятным во всех славянских языках",
+    "uk": "Слово не є універсально зрозумілим у всіх слов'янських мовах",
+    "be": "Слова не з'яўляецца ўніверсальна зразумелым у ўсіх словянскіх мовах",
+    "pl": "Słowo nie jest powszechnie zrozumiałe we wszystkich językach słowiańskich",
+    "cs": "Slovo není univerzálně srozumitelné ve všech slovanských jazycích",
+    "sk": "Slovo nie je univerzálne zrozumiteľné vo všetkých slovanských jazykoch",
+    "sl": "Slowo ni univerzalno razumljivo v vseh slovanskih jezikih",
+    "hr": "Riječ nije univerzalno razumljiva u svim slavenskim jezicima",
+    "sr": "Реч није универзално разумљива у свим словенским језицима",
+    "mk": "Зборот не е универзално разбирлив во сите словенски јазици",
+    "bg": "Думата не е универсално разбираема във всички слаавянски езици"
   }
 }