wip: intelligibility marks 2

sonic16x · Dec 24, 2023 · 8c212a7 · 8c212a7
1 parent 8874ddd
commit 8c212a7
Show file tree

Hide file tree

Showing 21 changed files with 270 additions and 99 deletions.
diff --git a/src/actions/actions.ts b/src/actions/actions.ts
@@ -14,6 +14,7 @@ export enum ActionTypes {
     RUN_SEARCH = 'RUN_SEARCH',
     CHANGE_ISV_SEARCH_LETTERS = 'CHANGE_ISV_SEARCH_LETTERS',
     CHANGE_ISV_SEARCH_BY_WORDFORMS = 'CHANGE_ISV_SEARCH_BY_WORDFORMS',
+    INTELLIGIBILITY_FILTER = 'INTELLIGIBILITY_FILTER',
     POS_FILTER = 'POS_FILTER',
     SET_ALPHABETS = 'SET_ALPHABETS',
     SHOW_MODAL_DIALOG = 'SHOW_MODAL_DIALOG',
@@ -138,6 +139,13 @@ export function changeIsvSearchByWordForms(data: boolean) {
     };
 }
 
+export function intelligibilityFilterAction(data: string) {
+    return {
+        type: ActionTypes.INTELLIGIBILITY_FILTER,
+        data,
+    };
+}
+
 export function posFilterAction(data: string) {
     return {
         type: ActionTypes.POS_FILTER,

diff --git a/src/components/Controls/Controls.scss b/src/components/Controls/Controls.scss
@@ -30,6 +30,7 @@
 
   .search-type-selector,
   .pos-selector,
+  .intelligibility-selector,
   .flavorisation-selector {
     flex: 1 1 auto;
     margin: 0 var(--gap-size);

diff --git a/src/components/Modals/ModalDialog/ModalDialog.scss b/src/components/Modals/ModalDialog/ModalDialog.scss
@@ -99,5 +99,6 @@
   &__footer {
     border-top: var(--border);
     padding: 16px;
+    line-height: 1.5;
   }
 }
diff --git a/src/components/Modals/TranslationsModal/TranslationsModal.scss b/src/components/Modals/TranslationsModal/TranslationsModal.scss
@@ -1,54 +1,3 @@
-.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 {
+  max-width: 56ch;
 }
diff --git a/src/components/Modals/TranslationsModal/TranslationsModal.tsx b/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`,
+                    `{${t(`${lang}Lang`)} ${marks[lang] || ''}}[B]@ts;b`,
                     renderTranslate(translate),
                 ],
                 (
@@ -112,9 +115,9 @@ export const TranslationsModal =
                     <Table data={tableData}/>
                 </div>
                 <footer className="modal-dialog__footer">
-                    {t('translationsBottomText')}
-                    <br/>
-                    {t('aboutJoinText')}
+                    <div className="modal-legend">
+                        {t('translationsBottomText')}
+                    </div>
                 </footer>
             </>
         );

diff --git a/src/components/Results/Results.tsx b/src/components/Results/Results.tsx
@@ -19,13 +19,16 @@ import { isScrollBarVisible } from 'utils/isScrollBarVisible';
 import { ResultsCard } from 'components/ResultsCard';
 import { ResultsEmpty } from 'components/ResultsEmpty';
 
+import { useIntelligibilityFilter } from "../../hooks/useIntelligibilityFilter";
+
 import './Results.scss';
 
 export const Results =
     () => {
         const worksheetUrl = getTablePublicUrl(tablesData[0].spreadsheetId, tablesData[0].sheetId);
         const results = useResults();
         const posFilter = usePosFilter();
+        const intelligibilityFilter = useIntelligibilityFilter();
         const lang = useLang();
         const containerRef = useRef<HTMLDivElement>();
         const fromText = useFromText();
@@ -41,7 +44,7 @@ export const Results =
         if (!results || !results.length) {
             if (empty) {
                 return (
-                    <ResultsEmpty showReset={posFilter !== ''}/>
+                    <ResultsEmpty showReset={posFilter !== '' || intelligibilityFilter !== ''}/>
                 );
             }
 

diff --git a/src/components/ResultsCard/ResultsCard.scss b/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);
+    }
+  }
 }
diff --git a/src/components/ResultsCard/ResultsCard.tsx b/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 { hasIntelligibilityIssues } from "utils/intelligibilityIssues";
 import { toQueryString } from 'utils/toQueryString';
 import { getPartOfSpeech } from 'utils/wordDetails';
 import { wordHasForms } from 'utils/wordHasForms';
@@ -96,6 +97,7 @@ 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 lang = useLang();
 
         const cardBiInfo: ICardAnalytics = useMemo(() => (
@@ -194,6 +196,15 @@ export const ResultsCard =
                             lang={item.to}
                         />
                     ) : renderOriginal(item, alphabets, index)}
+                    {'\u00A0'}
+                    { hasIntelligibilityIssues(intelligibility)
+                        ? <button
+                            key="intelligibilityIssues"
+                            onClick={showTranslations}
+                            className={classNames({ 'results-card__status': true })}
+                            title={t('intelligibilityIssues')}>⚠️</button>
+                        : undefined
+                    }
                     {item.to === 'isv' && short && (
                         <>
                             &nbsp;

diff --git a/src/components/ResultsEmpty/ResultsEmpty.tsx b/src/components/ResultsEmpty/ResultsEmpty.tsx
@@ -2,7 +2,7 @@ import { useDispatch } from 'react-redux';
 
 import { t } from 'translations';
 
-import { posFilterAction } from 'actions';
+import { intelligibilityFilterAction, posFilterAction } from 'actions';
 
 import './ResultsEmpty.scss';
 
@@ -25,7 +25,10 @@ export const ResultsEmpty =
                         type="button"
                         className="results-empty__button"
                         aria-label="Reset filters"
-                        onClick={() => dispatch(posFilterAction(''))}
+                        onClick={() => {
+                            dispatch(posFilterAction(''));
+                            dispatch(intelligibilityFilterAction(''));
+                        }}
                     >
                         {t('resultsNotFoundResetFilters')}
                     </button>

diff --git a/src/consts.ts b/src/consts.ts
@@ -53,6 +53,7 @@ export const initialFields = [
     'en',
     'sameInLanguages',
     'genesis',
+    'intelligibility',
 ];
 
 export const initialAddFields = [

diff --git a/src/hooks/useIntelligibilityFilter.ts b/src/hooks/useIntelligibilityFilter.ts
@@ -0,0 +1,7 @@
+import { useSelector } from 'react-redux';
+
+import { IMainState } from 'reducers';
+
+export function useIntelligibilityFilter() {
+    return useSelector((state: IMainState) => state.intelligibilityFilter);
+}
diff --git a/src/index.scss b/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;
 }
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -68,6 +68,7 @@ export const defaultState: IMainState = {
     fromText: '',
     searchType: 'begin',
     posFilter: '',
+    intelligibilityFilter: '',
     dictionaryLanguages: langs,
     flavorisationType: '3',
     alphabetType: 'latin',

diff --git a/src/middlewares/analyticsMiddleware.ts b/src/middlewares/analyticsMiddleware.ts
@@ -10,6 +10,7 @@ export function analyticsMiddleware({ getState }) {
         switch (action.type) {
             case ActionTypes.FROM_TEXT:
             case ActionTypes.POS_FILTER:
+            case ActionTypes.INTELLIGIBILITY_FILTER:
             case ActionTypes.SEARCH_TYPE:
             case ActionTypes.LANG: {
                 const state: IMainState = getState();