better inflections display

website/package.json

@@ -7,7 +7,7 @@
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.2",
-    "@lingdocs/pashto-inflector": "3.8.9",
+    "@lingdocs/pashto-inflector": "3.9.4",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -110,6 +110,6 @@
     "user-event": "^4.0.0"
   },
   "peerDependencies": {
-    "@lingdocs/pashto-inflector": "3.8.9"
+    "@lingdocs/pashto-inflector": "3.9.4"
   }
 }

website/src/App.css

@@ -140,6 +140,14 @@ hr {
     margin-left: 1rem;
 }
 
+.inflections-preview-table {
+    table-layout: fixed;
+}
+
+.inflections-preview-table td {
+    padding-right: 1rem;
+}
+
 kbd {
     background-color: #eee;
     border-radius: 3px;

website/src/components/ExtraEntryInfo.tsx

@@ -5,14 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-
+import {
-import React from "react";
+    inflectWord,
-import { inflectWord, Types, InlinePs } from "@lingdocs/pashto-inflector";
+    Types,
+    InlinePs,
+} from "@lingdocs/pashto-inflector";
+import { isAdjectiveEntry, isNounEntry } from "@lingdocs/pashto-inflector/dist/lib/type-predicates";
 
 const InflectionsInfo = ({ entry, textOptions }: {
     entry: Types.DictionaryEntry,
     textOptions: Types.TextOptions,
 }) => {
+    if (!isNounEntry(entry) && !isAdjectiveEntry(entry)) {
+        return null;
+    }
     const inf = ((): Types.InflectorOutput | false => {
         try {
             return inflectWord(entry);
@@ -24,21 +30,11 @@ const InflectionsInfo = ({ entry, textOptions }: {
     if (!inf) {
         return null;
     }
-    // unisex noun / adjective
+    if (inf.inflections) {
-    if (inf.inflections && "masc" in inf.inflections && "fem" in inf.inflections) {
+        // TODO: would be nice if inflection pattern number was in the inflections object
         return (
             <div className="entry-extra-info" data-testid="inflections-info">
-                <InlinePs opts={textOptions}>{inf.inflections.masc[1][0]}</InlinePs>
+                <InflectionsPreview inf={inf.inflections} opts={textOptions} />
-                {` `}
-                <InlinePs opts={textOptions}>{inf.inflections.fem[0][0]}</InlinePs>
-            </div>
-        );
-    }
-    // masculine noun
-    if (inf.inflections && "masc" in inf.inflections) {
-        return (
-            <div className="entry-extra-info" data-testid="inflections-info">
-                <InlinePs opts={textOptions}>{inf.inflections.masc[1][0]}</InlinePs>
             </div>
         );
     }
@@ -46,6 +42,13 @@ const InflectionsInfo = ({ entry, textOptions }: {
     return null;
 };
 
+function InflectionsPreview({ inf, opts }: { inf: Types.Inflections, opts: Types.TextOptions }) {
+    return <div className="small">
+            {"masc" in inf && <span className="mr-2"><InlinePs opts={opts}>{inf.masc[1][0]}</InlinePs></span>}
+            {"fem" in inf && <InlinePs opts={opts}>{inf.fem[1][0]}</InlinePs>}
+    </div>
+}
+
 const ArabicPluralInfo = ({ entry, textOptions }: {
     entry: Types.DictionaryEntry,
     textOptions: Types.TextOptions,

website/src/screens/IsolatedEntry.tsx

@@ -14,6 +14,7 @@ import {
     InlinePs,
     Types as T,
     typePredicates as tp,
+    getInflectionPattern,
 } from "@lingdocs/pashto-inflector";
 import {
     submissionBase,
@@ -224,7 +225,13 @@ function IsolatedEntry({ state, dictionary, isolateEntry }: {
         }
         {editSubmitted && <p>Thank you for your help!</p>}
         {inf && <>
-            {inf.inflections && <InflectionsTable inf={inf.inflections} textOptions={textOptions} />}
+            {inf.inflections && <div>
+                <div>Inflection pattern {humanReadableInflectionPattern(getInflectionPattern(
+                    // @ts-ignore
+                    entry
+                ), textOptions)}</div>
+                <InflectionsTable inf={inf.inflections} textOptions={textOptions} />
+            </div>}
             {"plural" in inf && inf.plural !== undefined && <div>
                 <h5>Plural</h5>
                 <InflectionsTable inf={inf.plural} textOptions={textOptions} />
@@ -276,4 +283,20 @@ function explodeEntry(entry: T.DictionaryEntry): T.DictionaryEntry {
     };
 }
 
+function humanReadableInflectionPattern(p: T.InflectionPattern, textOptions: T.TextOptions): JSX.Element | null {
+    return p === 1
+        ? <span>#1 Basic</span>
+        : p === 2
+        ? <span>#2 Unstressed <InlinePs opts={textOptions}>{{ p: "ی", f: "ey", e: "" }}</InlinePs></span>
+        : p === 3
+        ? <span>#3 Stressed <InlinePs opts={textOptions}>{{ p: "ی", f: "éy", e: "" }}</InlinePs></span>
+        : p === 4
+        ? <span>#4 "Pashtoon"</span>
+        : p === 5
+        ? <span>#5 Short Squish</span>
+        : p === 6
+        ? <span>#6 Fem. inan. <InlinePs opts={textOptions}>{{ p: "ي", f: "ee", e: "" }}</InlinePs></span>
+        : null;
+}
+
 export default IsolatedEntry;

website/yarn.lock

@@ -1590,10 +1590,10 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
-"@lingdocs/pashto-inflector@3.8.9":
+"@lingdocs/pashto-inflector@3.9.4":
-  version "3.8.9"
+  version "3.9.4"
-  resolved "https://npm.lingdocs.com/@lingdocs%2fpashto-inflector/-/pashto-inflector-3.8.9.tgz#c023449dc13dbc32ef95cef172a68b5b0b4659bf"
+  resolved "https://npm.lingdocs.com/@lingdocs%2fpashto-inflector/-/pashto-inflector-3.9.4.tgz#b85bd8b9c235da1b77a04bd4178be91371a94726"
-  integrity sha512-60hAao+ADerI5hOMeJzYmrSCliwTqCndbUlx1Ke58s2FikxDqUb9/wb700JVbhsVLyRdr6tGg+YslDf4irr5tA==
+  integrity sha512-bthgBbzkFHIYUOTFNUNcwWFuhCkFlX7RCPQIbZdXFPOdUoEGtlngqJkECKm+pIShQioEGuMxhW0plhXDIccA8w==
   dependencies:
     "@formkit/auto-animate" "^1.0.0-beta.1"
     classnames "^2.2.6"