proof-of-concept: intelligibility filter

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',
@@ -137,6 +138,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,

src/components/Controls/Controls.scss

@@ -29,6 +29,7 @@
 
   .search-type-selector,
   .pos-selector,
+  .intelligibility-selector,
   .flavorisation-selector {
     flex: 1 1 auto;
     margin: 0 var(--gap-size);

src/components/Controls/Controls.tsx

@@ -19,6 +19,8 @@ import { LangSelector } from 'components/LangSelector';
 import { POSSelector } from 'components/POSSelector';
 import { SearchTypeSelector } from 'components/SearchTypeSelector';
 
+import { IntelligibilitySelector } from "../IntelligibilitySelector";
+
 import './Controls.scss';
 
 export const Controls =
@@ -64,6 +66,7 @@ export const Controls =
                     <SearchTypeSelector key="searchType" />
                     <FlavorisationSelector key="flavorisation" />
                     <POSSelector key="posFilter" />
+                    <IntelligibilitySelector key="intelligibilityFilter" />
                 </Expand>
             </div>
         );

src/components/IntelligibilitySelector/IntelligibilitySelector.scss

@@ -0,0 +1,9 @@
+.intelligibility-selector {
+  .selector__select {
+    width: 50%;
+
+    @media (max-width: 450px) {
+      width: 65%;
+    }
+  }
+}

src/components/IntelligibilitySelector/IntelligibilitySelector.tsx

@@ -0,0 +1,39 @@
+import { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { t } from 'translations';
+
+import { intelligibilityFilterAction } from 'actions';
+
+import { useIntelligibilityFilter } from 'hooks/useIntelligibilityFilter';
+
+import { Selector } from 'components/Selector';
+
+import { langs } from "../../consts";
+
+import './IntelligibilitySelector.scss';
+
+const sortedLangs = [...langs].sort();
+
+export const IntelligibilitySelector =
+    () => {
+        const dispatch = useDispatch();
+        const intelligibilityFilter = useIntelligibilityFilter();
+        const options = ['', ...sortedLangs].map((value) => ({
+            name: value ? t(`${value}Lang`) : t('anyLanguage'),
+            value,
+        }));
+        const onSelect = useCallback((pos) => {
+            dispatch(intelligibilityFilterAction(pos));
+        }, [dispatch]);
+
+        return (
+            <Selector
+                className="intelligibility-selector"
+                options={options}
+                onSelect={onSelect}
+                value={intelligibilityFilter}
+                label={t('targetLanguage')}
+            />
+        );
+    };

src/components/IntelligibilitySelector/index.ts

@@ -0,0 +1 @@
+export * from './IntelligibilitySelector';

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 !== ''}/>
                 );
             }
 

src/components/ResultsCard/ResultsCard.scss

@@ -150,4 +150,12 @@
       }
     }
   }
+
+  &__status {
+    opacity: 0.5;
+
+    &.verified {
+      opacity: initial;
+    }
+  }
 }

src/components/ResultsCard/ResultsCard.tsx

@@ -20,6 +20,9 @@ import { wordHasForms } from 'utils/wordHasForms';
 
 import { Clipboard } from 'components/Clipboard';
 
+import { useIntelligibilityFilter } from "../../hooks/useIntelligibilityFilter";
+import { getIntelligibilityReport } from "../../utils/getIntelligibilityReport";
+
 import './ResultsCard.scss';
 
 import ErrorIcon from './images/error-icon.svg';
@@ -96,6 +99,8 @@ export const ResultsCard =
         const wordId = Dictionary.getField(item.raw, 'id').toString();
         const pos = getPartOfSpeech(item.details);
         const dispatch = useDispatch();
+        const intFilter = useIntelligibilityFilter();
+        const intelligibility = Dictionary.getField(item.raw, 'intelligibility');
         const lang = useLang();
 
         const cardBiInfo: ICardAnalytics = useMemo(() => (
@@ -177,6 +182,11 @@ export const ResultsCard =
 
         const short = useShortCardView();
 
+        const status = intFilter ? getIntelligibilityReport(
+            intFilter,
+            intelligibility
+        ) : null;
+
         return (
             <div
                 className={classNames('results-card', { short })}
@@ -185,6 +195,13 @@ export const ResultsCard =
                 onClick={reportClick}
             >
                 <div className="results-card__translate">
+                    { status
+                        ? <span
+                            key="intelligibilityStatus"
+                            className={classNames({ 'results-card__status': true, verified: status.verified })}
+                            title={status.status}>{status.emoji}&nbsp;</span>
+                        : undefined
+                    }
                     {item.to !== 'isv' ? (
                         <Clipboard
                             str={item.translate}

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>

src/consts.ts

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

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);
+}

src/index.tsx

@@ -65,6 +65,7 @@ export const defaultState: IMainState = {
     fromText: '',
     searchType: 'begin',
     posFilter: '',
+    intelligibilityFilter: '',
     dictionaryLanguages: langs,
     flavorisationType: '3',
     alphabetType: 'latin',

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();

src/reducers/reducers.ts

@@ -53,6 +53,7 @@ export interface IMainState {
     fromText: string;
     searchType: string;
     posFilter: string;
+    intelligibilityFilter: string;
     flavorisationType: string;
     dictionaryLanguages: string[];
     page: string;
@@ -74,13 +75,14 @@ export interface IMainState {
 export function mainReducer(state: IMainState, { type, data }) {
     switch (type) {
         case ActionTypes.LANG: {
-            const { fromText, flavorisationType, searchType, posFilter } = state;
+            const { fromText, flavorisationType, searchType, intelligibilityFilter, posFilter } = state;
             const lang = data;
             const [rawResults, translateTime] = Dictionary.translate({
                 inputText: fromText,
                 ...lang,
                 searchType,
                 posFilter,
+                intelligibilityFilter,
                 flavorisationType,
             });
 
@@ -94,13 +96,14 @@ export function mainReducer(state: IMainState, { type, data }) {
             };
         }
         case ActionTypes.SEARCH_TYPE: {
-            const { flavorisationType, lang, fromText, posFilter } = state;
+            const { flavorisationType, lang, fromText, posFilter, intelligibilityFilter } = state;
             const searchType = data;
             const [rawResults, translateTime] = Dictionary.translate({
                 inputText: fromText,
                 ...lang,
                 searchType,
                 posFilter,
+                intelligibilityFilter,
                 flavorisationType,
             });
 
@@ -114,13 +117,14 @@ export function mainReducer(state: IMainState, { type, data }) {
             };
         }
         case ActionTypes.FROM_TEXT: {
-            const { searchType, flavorisationType, lang, posFilter } = state;
+            const { searchType, flavorisationType, lang, posFilter, intelligibilityFilter } = state;
             const fromText = data;
             const [rawResults, translateTime] = Dictionary.translate({
                 inputText: fromText,
                 ...lang,
                 searchType,
                 posFilter,
+                intelligibilityFilter,
                 flavorisationType,
             });
 
@@ -134,12 +138,13 @@ export function mainReducer(state: IMainState, { type, data }) {
             };
         }
         case ActionTypes.RUN_SEARCH: {
-            const { searchType, flavorisationType, lang, fromText, posFilter } = state;
+            const { searchType, flavorisationType, lang, fromText, posFilter, intelligibilityFilter } = state;
             const [rawResults, translateTime] = Dictionary.translate({
                 inputText: fromText,
                 ...lang,
                 searchType,
                 posFilter,
+                intelligibilityFilter,
                 flavorisationType,
             });
 
@@ -152,13 +157,14 @@ export function mainReducer(state: IMainState, { type, data }) {
             };
         }
         case ActionTypes.CHANGE_ISV_SEARCH_LETTERS: {
-            const { searchType, flavorisationType, lang, fromText, posFilter } = state;
+            const { searchType, flavorisationType, lang, fromText, posFilter, intelligibilityFilter } = state;
             const isvSearchLetters = Dictionary.changeIsvSearchLetters(data);
             const [rawResults, translateTime] = Dictionary.translate({
                 inputText: fromText,
                 ...lang,
                 searchType,
                 posFilter,
+                intelligibilityFilter,
                 flavorisationType,
             });
 
@@ -172,14 +178,15 @@ export function mainReducer(state: IMainState, { type, data }) {
             };
         }
         case ActionTypes.CHANGE_ISV_SEARCH_BY_WORDFORMS: {
-            const { searchType, flavorisationType, lang, fromText, posFilter } = state;
+            const { searchType, flavorisationType, lang, fromText, intelligibilityFilter, posFilter } = state;
             const isvSearchByWordForms = data;
             Dictionary.setIsvSearchByWordForms(data);
             const [rawResults, translateTime] = Dictionary.translate({
                 inputText: fromText,
                 ...lang,
                 searchType,
                 posFilter,
+                intelligibilityFilter,
                 flavorisationType,
             });
 
@@ -193,12 +200,13 @@ export function mainReducer(state: IMainState, { type, data }) {
             };
         }
         case ActionTypes.FLAVORISATION_TYPE: {
-            const { searchType, lang, fromText, posFilter } = state;
+            const { searchType, lang, fromText, intelligibilityFilter, posFilter } = state;
             const [rawResults, translateTime] = Dictionary.translate({
                 inputText: fromText,
                 ...lang,
                 searchType,
                 posFilter,
+                intelligibilityFilter,
                 flavorisationType: data,
             });
 
@@ -210,13 +218,33 @@ export function mainReducer(state: IMainState, { type, data }) {
                 results: Dictionary.formatTranslate(rawResults, lang.from, lang.to, data, state.alphabets),
             };
         }
+        case ActionTypes.INTELLIGIBILITY_FILTER: {
+            const { searchType, lang, fromText, posFilter, flavorisationType } = state;
+            const [rawResults, translateTime] = Dictionary.translate({
+                inputText: fromText,
+                ...lang,
+                searchType,
+                flavorisationType,
+                posFilter,
+                intelligibilityFilter: data,
+            });
+
+            biReporter.performanceSearch(translateTime);
+
+            return {
+                ...state,
+                intelligibilityFilter: data,
+                results: Dictionary.formatTranslate(rawResults, lang.from, lang.to, flavorisationType, state.alphabets),
+            };
+        }
         case ActionTypes.POS_FILTER: {
-            const { searchType, lang, fromText, flavorisationType } = state;
+            const { searchType, lang, fromText, flavorisationType, intelligibilityFilter } = state;
             const [rawResults, translateTime] = Dictionary.translate({
                 inputText: fromText,
                 ...lang,
                 searchType,
                 flavorisationType,
+                intelligibilityFilter,
                 posFilter: data,
             });
 

src/services/biReporter.ts

@@ -87,6 +87,7 @@ export class BiReporter {
             searchLanguageTo: state.lang.to,
             searchLanguage: state.lang.from === 'isv' ? state.lang.to : state.lang.from,
             searchFilterPos: state.posFilter,
+            searchFilterLang: state.intelligibilityFilter,
             searchFilterPart: state.searchType,
             searchByWordForms: state.isvSearchByWordForms,
             interfaceLanguage: state.interfaceLang,