more on equative explorer

src/components/equative-explorer/EquativeDisplay.tsx

@@ -13,7 +13,7 @@ import {
     assembleEquativeOutput,
     SubjectInput,
 } from "../../lib/equative-machine";
-import { isNoun, isPluralEntry } from "../../lib/type-predicates";
+import { isNoun, isPluralEntry, isUnisexNoun } from "../../lib/type-predicates";
 
 function EquativeDisplay({ state }: { state: ExplorerState }) {
     if (state.subjectType === "pronouns") {
@@ -27,6 +27,9 @@ function EquativeDisplay({ state }: { state: ExplorerState }) {
     const subjInput: SubjectInput = isNoun(entry) ? {
         entry,
         plural: isPluralEntry(entry) ? true : state.subjectsSelected.info.plural,
+        ...isUnisexNoun(entry) ? {
+            gender: state.subjectsSelected.info.gender,
+        } : {},
     } : entry;
 
     const eq = assembleEquativeOutput(

src/components/equative-explorer/EquativeExplorer.tsx

@@ -28,6 +28,7 @@ const defaultState: ExplorerState = {
     subjectsSelected: {
         noun: defaultNoun,
         participle: defaultParticiple,
+        unisexNoun: defaultUnisexNoun,
         info: {
             plural: false,
             gender: "masc",
@@ -44,7 +45,7 @@ function EquativeExplorer() {
         unsafeSetState(newState);
     }
     return <>
-        <div className="d-flex flex-row justify-content-between">
+        <div className="d-flex flex-row justify-content-between align-items-center">
             <SubjectSelector state={state} dispatch={dispatch} />
             <PredicateSelector state={state} dispatch={dispatch} />
         </div>

src/components/equative-explorer/explorer-inputs.ts

@@ -7,14 +7,14 @@ import {
     ParticipleInput,
 } from "../../lib/equative-machine";
 
-const unisexNouns = nouns.filter(x => isUnisexNoun(x)) as UnisexNoun[];
+const unisexNouns = sort(nouns.filter(x => isUnisexNoun(x)) as UnisexNoun[]);
-const nonUnisexNouns = nouns.filter(x => !isUnisexNoun(x)) as (MascNoun | FemNoun)[];
+const nonUnisexNouns = sort(nouns.filter(x => !isUnisexNoun(x)) as (MascNoun | FemNoun)[]);
 
 
 const inputs = {
     adjective: sort(adjectives),
-    unisexNoun: sort(unisexNouns),
+    unisexNoun: unisexNouns,
-    noun: sort(nonUnisexNouns),
+    noun: nonUnisexNouns,
     // @ts-ignore
     participle: sort(verbs.map(e => e.entry) as ParticipleInput[]),
 };

src/components/equative-explorer/explorer-reducer.ts

@@ -41,6 +41,7 @@ export function reducer(state: ExplorerState, action: ExplorerReducerAction): Ex
             },
         };
     }
+    if (action.type === "setSubjectPlural") {
         return {
             ...state,
             subjectsSelected: {
@@ -51,4 +52,15 @@ export function reducer(state: ExplorerState, action: ExplorerReducerAction): Ex
                 },
             },
         };
+    }
+    return {
+        ...state,
+        subjectsSelected: {
+            ...state.subjectsSelected,
+            info: {
+                ...state.subjectsSelected.info,
+                gender: action.payload,
+            },
+        },
+    };
 }

src/components/equative-explorer/explorer-selectors.tsx

@@ -8,10 +8,16 @@ import {
 } from "./explorer-types";
 import {
     ButtonSelect,
+    Types as T,
 } from "@lingdocs/pashto-inflector";
 import { isPluralEntry } from "../../lib/type-predicates";
 import Select from "react-select";
 
+const zIndexProps = {
+    menuPortalTarget: document.body, 
+    styles: { menuPortal: (base: any) => ({ ...base, zIndex: 9999 }) },
+};
+
 export function SubjectSelector({ state, dispatch }: {
     state: ExplorerState,
     dispatch: (action: ExplorerReducerAction) => void,
@@ -36,7 +42,7 @@ export function SubjectSelector({ state, dispatch }: {
         ? undefined
         : state.subjectsSelected[state.subjectType];
     return <div className="form-group mr-2 flex-fill">
-        <label htmlFor="predicate-select"><strong>Subject:</strong></label>
+        <label htmlFor="predicate-select"><h5>Subject:</h5></label>
         <div className="form-check">
             <input
                 className="form-check-input"
@@ -65,6 +71,20 @@ export function SubjectSelector({ state, dispatch }: {
                 Nouns
             </label>
         </div>
+        <div className="form-check">
+            <input
+                className="form-check-input"
+                type="radio"
+                name="unisexNounsSubjectRadio"
+                id="unisexNounsSubjectRadio"
+                value="unisexNoun"
+                checked={state.subjectType === "unisexNoun"}
+                onChange={onTypeSelect}
+            />
+            <label className="form-check-label" htmlFor="unisexNounsPredicateRadio">
+                Unisex Nouns
+            </label>
+        </div>
         <div className="form-check mb-2">
             <input
                 className="form-check-input"
@@ -89,8 +109,11 @@ export function SubjectSelector({ state, dispatch }: {
                     options={options}
                     isSearchable
                     placeholder={options.find(o => o.value === subject?.ts.toString())?.label}
+                    {...zIndexProps}
                 />
-                {state.subjectType === "noun" && <ButtonSelect
+                <div className="d-flex flex-row justify-content-center">
+                    {state.subjectType !== "participle" && <div className={state.subjectType === "unisexNoun" ? "mr-2" : ""}>
+                        <ButtonSelect
                             small
                             options={[
                                 ...!pluralNounSelected ? [{ label: "Singular", value: "singular" }] : [],
@@ -98,7 +121,20 @@ export function SubjectSelector({ state, dispatch }: {
                             ]}
                             value={(state.subjectsSelected.info.plural || pluralNounSelected) ? "plural" : "singular"}
                             handleChange={(p) => dispatch({ type: "setSubjectPlural", payload: p === "plural" ? true : false })}
-                />}
+                        />
+                    </div>}
+                    {state.subjectType === "unisexNoun" && <div className="ml-2">
+                        <ButtonSelect
+                        small
+                        options={[
+                            { label: "Masc.", value: "masc" },
+                            { label: "Fem.", value: "fem" },
+                        ]}
+                        value={state.subjectsSelected.info.gender}
+                        handleChange={(p) => dispatch({ type: "setSubjectGender", payload: p as T.Gender })}
+                        />
+                    </div>}
+                </div>
             </>
         }
     </div>;
@@ -121,7 +157,7 @@ export function PredicateSelector({ state, dispatch }: {
     }));
     const predicate = state.predicatesSelected[state.predicateType];
     return <div className="form-group ml-2 flex-fill" style={{ maxWidth: "50%" }}>
-        <label htmlFor="predicate-select"><strong>Predicate:</strong></label>
+        <label htmlFor="predicate-select"><h5>Predicate:</h5></label>
         <div className="form-check">
             <input
                 className="form-check-input"
@@ -159,6 +195,7 @@ export function PredicateSelector({ state, dispatch }: {
             options={options}
             isSearchable
             placeholder={options.find(o => o.value === predicate.ts.toString())?.label}
+            {...zIndexProps}
         />
     </div>;
 }

src/components/equative-explorer/explorer-types.ts

@@ -2,7 +2,7 @@ import { Types as T } from "@lingdocs/pashto-inflector";
 import { ParticipleInput } from "../../lib/equative-machine";
 
 export type PredicateType = keyof PredicatesSelected;
-export type SubjectType = "noun" | "pronouns" | "participle";
+export type SubjectType = "noun" | "pronouns" | "participle" | "unisexNoun";
 
 export type ExplorerState = {
     subjectType: SubjectType,
@@ -17,6 +17,7 @@ type PredicatesSelected = {
 type SubjectSelected = {
     noun: Noun,
     participle: ParticipleInput,
+    unisexNoun: UnisexNoun,
     info: {
         plural: boolean,
         gender: T.Gender,
@@ -33,4 +34,6 @@ export type ExplorerReducerAction = {
     type: "setSubject", payload: number,
 } | {
     type: "setSubjectPlural", payload: boolean,
+} | {
+    type: "setSubjectGender", payload: T.Gender,
 };

src/content/equatives/equative-explorer.mdx

@@ -4,6 +4,4 @@ title: Equative Explorer 🌎
 
 import EquativeExplorer from "../../components/equative-explorer/EquativeExplorer";
 
-This is in progress... will be able to explore much more soon. 👷‍♂️
-
 <EquativeExplorer />