different display (with all tenses listed) for chart mode in VPExplorer

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pashto-inflector",
-  "version": "5.0.12",
+  "version": "5.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pashto-inflector",
-      "version": "5.0.12",
+      "version": "5.1.0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pashto-inflector",
-  "version": "5.0.12",
+  "version": "5.1.0",
   "author": "lingdocs.com",
   "description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations",
   "homepage": "https://verbs.lingdocs.com",

src/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/ps-react",
-  "version": "5.0.12",
+  "version": "5.1.0",
   "description": "Pashto inflector library module with React components",
   "main": "dist/components/library.js",
   "module": "dist/components/library.js",

src/components/src/Hider.tsx

@@ -21,7 +21,7 @@ const defaultLevel = 4;
 const indentAfterLevel = 5;
 
 function Hider(props: {
-    label: string,
+    label: string | JSX.Element,
     showing: boolean,
     aspect?: T.Aspect,
     handleChange: () => void,
@@ -48,14 +48,16 @@ function Hider(props: {
                     extraMargin,
                 ),
             },
-            <>
+            <div className="d-flex flex-row align-items-center">
                 {props.showing ? caretDown : caretRight}
                 {` `}
                 {props.aspect
-                    ? <i className={`fas fa-${props.aspect === "imperfective" ? "video" : "camera"} mr-2`} />
+                    ? <i className={`fas fa-${props.aspect === "imperfective" ? "video" : "camera"}`} />
                     : ""}
+                <div className="ml-2">
                     {props.label}
-            </>,
+                </div>
+            </div>,
         )}
         {props.showing && props.children}
     </div>

src/components/src/vp-explorer/AllTensesDisplay.tsx

@@ -0,0 +1,58 @@
+import { abilityTenseOptions, imperativeTenseOptions, perfectTenseOptions, verbTenseOptions } from "./verbTenseOptions";
+import ChartDisplay from "./VPChartDisplay";
+import Hider from "../Hider";
+import * as T from "../../../types";
+import useStickyState from "../useStickyState";
+import { isModalTense, isPerfectTense, isVerbTense } from "../../../lib/src/type-predicates";
+
+function AllTensesDisplay({ VS, opts }: { VS: T.VerbSelection, opts: T.TextOptions }) {
+    const [showing, setShowing] = useStickyState<string[]>([], "tensesShowing");
+    const [showFormulas, setShowFormulas] = useStickyState<boolean>(false, "showFormulasWithCharts");
+    const adjustShowing = (v: string) => {
+        if (showing.includes(v)) {
+            setShowing(os => os.filter(x => x !== v));
+        } else {
+            setShowing(os => [v, ...os]);
+        }
+    }
+    const options = VS.tenseCategory === "basic"
+        ? verbTenseOptions
+        : VS.tenseCategory === "perfect"
+        ? perfectTenseOptions
+        : VS.tenseCategory === "modal"
+        ? abilityTenseOptions
+        : imperativeTenseOptions;
+    return <div>
+        <div className="clickable mb-2 small text-center" onClick={() => setShowFormulas(x => !x)}>
+            {!showFormulas ? "Show" : "Hide"} Formulas
+        </div>
+        {options.map((tense) => <div key={Math.random()}>
+            <Hider
+                label={tense.label}
+                showing={showing.includes(tense.value)}
+                handleChange={() => adjustShowing(tense.value)}
+                hLevel={5}
+            >
+                {showFormulas && <div className="mb-1">
+                    <samp>🧪 {tense.formula}</samp>
+                </div>}
+                <ChartDisplay
+                    VS={{
+                        ...VS,
+                        [isVerbTense(tense.value)
+                            ? "verbTense"
+                            : isPerfectTense(tense.value)
+                            ? "perfectTense"
+                            : isModalTense(tense.value)
+                            ? "modalTense"
+                            : "imperativeTense"
+                        ]: tense.value,
+                    }}
+                    opts={opts}
+                />
+            </Hider>
+        </div>)}
+    </div>;
+}
+
+export default AllTensesDisplay;

src/components/src/vp-explorer/TensePicker.tsx

@@ -7,40 +7,7 @@ import { customStyles } from "../EntrySelect";
 import {
     VpsReducerAction
 } from "../../../lib/src/phrase-building/vps-reducer";
-
+import { imperativeTenseOptions, perfectTenseOptions, verbTenseOptions } from "./verbTenseOptions";
-const verbTenseOptions: { label: string | JSX.Element, value: T.VerbTense, formula: string }[] = [{
-    label: <div><i className="fas fa-video mr-2" />present</div>,
-    value: "presentVerb",
-    formula: "imperfective stem + present verb ending",
-}, {
-    label: <div><i className="fas fa-camera mr-2" />subjunctive</div>,
-    value: "subjunctiveVerb",
-    formula: "perfective stem + present verb ending",
-}, {
-    label: <div><i className="fas fa-video mr-2" />imperfective future</div>,
-    value: "imperfectiveFuture",
-    formula: "ba + present",
-}, {
-    label: <div><i className="fas fa-camera mr-2" />perfective future</div>,
-    value: "perfectiveFuture",
-    formula: "ba + subjunctive",
-}, {
-    label: <div><i className="fas fa-video mr-2" />continuous past</div>,
-    value: "imperfectivePast",
-    formula: "imperfective root + past verb ending",
-}, {
-    label: <div><i className="fas fa-camera mr-2" />simple past</div>,
-    value: "perfectivePast",
-    formula: "perfective root + past verb ending",
-}, {
-    label: <div><i className="fas fa-video mr-2" />habitual continual past</div>,
-    value: "habitualImperfectivePast",
-    formula: "ba + continuous past",
-}, {
-    label: <div><i className="fas fa-camera mr-2" />habitual simple past</div>,
-    value: "habitualPerfectivePast",
-    formula: "ba + simple past",
-}];
 
 function composeFormula(formula: string, prefix: "passive" | "ability"): string {
     return formula.replace(/^perfective/, `${prefix} perfective`)
@@ -52,50 +19,6 @@ function composeFormula(formula: string, prefix: "passive" | "ability"): string
         .replace("past participle", `${prefix} past participle`);
 }
 
-const perfectTenseOptions: { label: string | JSX.Element, value: T.PerfectTense, formula: string }[] = [{
-    label: "Present Perfect",
-    value: "presentPerfect",
-    formula: "past participle + present equative",
-}, {
-    label: "Habitual Perfect",
-    value: "habitualPerfect",
-    formula: "past participle + habitual equative",
-}, {
-    label: "Subjunctive Perfect",
-    value: "subjunctivePerfect",
-    formula: "past participle + subjunctive equative",
-}, {
-    label: "Future Perfect",
-    value: "futurePerfect",
-    formula: "past participle + future equative",
-}, {
-    label: "Past Perfect",
-    value: "pastPerfect",
-    formula: "past participle + past equative",
-}, {
-    label: `"Would Be" Perfect`,
-    value: "wouldBePerfect",
-    formula: `past participle + "would be" equative`,
-}, {
-    label: "Past Subjunctive Perfect",
-    value: "pastSubjunctivePerfect",
-    formula: "past participle + past subjunctive equative",
-}, {
-    label: `"Would Have Been" Perfect`,
-    value: "wouldHaveBeenPerfect",
-    formula: `past participle + "would have been" equative`,
-}];
-
-const imperativeTenseOptions: { label: string | JSX.Element, value: T.ImperativeTense, formula: string }[] = [{
-    label: <div><i className="fas fa-video mr-2" />imperfective imperative</div>,
-    value: "imperfectiveImperative",
-    formula: "imperfective stem + imperative ending",
-}, {
-    label: <div><i className="fas fa-camera mr-2" />perfective imperative</div>,
-    value: "perfectiveImperative",
-    formula: "perfective stem + imperative ending",
-}];
-
 export function getRandomTense(o?: T.PerfectTense | T.VerbTense | T.ModalTense | T.ImperativeTense): T.PerfectTense | T.VerbTense | T.ModalTense | T.ImperativeTense {
     let tns: T.PerfectTense | T.VerbTense | T.ModalTense | T.ImperativeTense;
     const oldTenseCategory = !o
@@ -184,11 +107,18 @@ function TensePicker(props: ({
     const showImperativeOption = ("vps" in props && props.vps.verb.voice === "active")
         || ("vpsComplete" in props && props.vpsComplete.verb.voice !== "active");
     const inPassiveVoice = ("vps" in props && props.vps.verb.voice === "passive") || ("vpsComplete" in props && props.vpsComplete.verb.voice === "passive");;
-    const canHaveFormula = "vps" in props && props.mode !== "quiz";
+    const inAllTensesMode = props.mode === "charts";
+    const canHaveFormula = "vps" in props
+        && props.mode !== "quiz"
+        && !inAllTensesMode;
     return <div>
         <div style={{ maxWidth: "300px", minWidth: "250px", margin: "0 auto" }}>
             <div className="d-flex flex-row justify-content-between align-items-center">
-                <div className="h5">Verb Tense:</div>
+                <div className="h5">
+                    {props.mode === "charts"
+                        ? "Tense Category:"
+                        : "Verb Tense:"}
+                </div>
                 {canHaveFormula && <div className="clickable mb-2 small" onClick={() => setShowFormula(x => !x)}>
                     🧪 {!showFormula ? "Show" : "Hide"} Formula
                 </div>}
@@ -230,7 +160,7 @@ function TensePicker(props: ({
                     {[...verbTenseOptions, ...perfectTenseOptions, ...imperativeTenseOptions].find(o => o.value === props.vpsComplete.verb.tense)?.label}
                 </div>
             : <>
-                <Select
+                {!inAllTensesMode && <Select
                     isSearchable={false}
                     // for some reason can't use tOptions with find here;
                     value={props.vps.verb && ([...verbTenseOptions, ...perfectTenseOptions, ...imperativeTenseOptions].find(o => o.value === props.vps.verb[
@@ -245,12 +175,24 @@ function TensePicker(props: ({
                     className="mb-2"
                     options={tOptions}
                     styles={customStyles}
-                />
+                />}
             </>}
             {"vps" in props && props.vps.verb && (props.mode !== "quiz") && <div className="d-flex flex-row justify-content-between align-items-center mt-2 mb-1" style={{ width: "100%" }}>
-                <div className="btn btn-light clickable" onClick={moveTense("back")}>
+                {!inAllTensesMode ? <div className="btn btn-light clickable" onClick={moveTense("back")}>
                     <i className="fas fa-chevron-left" />
-                </div>
+                </div> : <div />}
+                {/* {props.mode === "charts" && <ButtonSelect
+                    small
+                    value={props.chartMode}
+                    options={[{
+                        label: "all",
+                        value: "allTenses",
+                    }, {
+                        label: "one",
+                        value: "oneTense",
+                    }]}
+                    handleChange={props.onChartModeChange}
+                />} */}
                 {props.mode === "phrases" && <ButtonSelect
                     small
                     value={props.vps.verb.negative.toString() as "true" | "false"}
@@ -263,9 +205,9 @@ function TensePicker(props: ({
                     }]}
                     handleChange={onPosNegSelect}
                 />}
-                <div onClick={moveTense("forward")} className="btn btn-light clickable">
+                {!inAllTensesMode ? <div onClick={moveTense("forward")} className="btn btn-light clickable">
                     <i className="fas fa-chevron-right" />
-                </div>
+                </div> : <div />}
             </div>}
             {(canHaveFormula && showFormula) && (() => {
                 // TODO: Be able to show modal formulas too

src/components/src/vp-explorer/VPExplorer.tsx

@@ -3,7 +3,6 @@ import TensePicker from "./TensePicker";
 import VPDisplay from "./VPDisplay";
 import ButtonSelect from "../ButtonSelect";
 import * as T from "../../../types";
-import ChartDisplay from "./VPChartDisplay";
 import useStickyState, { useStickyReducer } from "../useStickyState";
 import { makeVPSelectionState } from "../../../lib/src/phrase-building/verb-selection";
 import { useEffect, useState } from "react";
@@ -14,6 +13,7 @@ import LZString from "lz-string";
 import { vpsReducer } from "../../../lib/src/phrase-building/vps-reducer";
 import { getObjectSelection } from "../../../lib/src/phrase-building/blocks-utils";
 import VPPicker from "./VPPicker";
+import AllTensesDisplay from "./AllTensesDisplay";
 
 export const vpPhraseURLParam = "vp";
 
@@ -180,7 +180,7 @@ function VPExplorer(props: {
             opts={props.opts}
             setForm={handleSetForm}
         />}
-        {mode === "charts" && <ChartDisplay VS={vps.verb} opts={props.opts} />}
+        {mode === "charts" && <AllTensesDisplay VS={vps.verb} opts={props.opts} />}
         {mode === "quiz" && <VPExplorerQuiz opts={props.opts} vps={vps} />}
         {showClipped && <div className="alert alert-primary text-center" role="alert" style={{
             position: "fixed",

src/components/src/vp-explorer/verbTenseOptions.tsx

@@ -0,0 +1,113 @@
+import * as T from "../../../types";
+
+export const verbTenseOptions: { label: string | JSX.Element, value: T.VerbTense, formula: string }[] = [{
+    label: <div><i className="fas fa-video mr-2" />present</div>,
+    value: "presentVerb",
+    formula: "imperfective stem + present verb ending",
+}, {
+    label: <div><i className="fas fa-camera mr-2" />subjunctive</div>,
+    value: "subjunctiveVerb",
+    formula: "perfective stem + present verb ending",
+}, {
+    label: <div><i className="fas fa-video mr-2" />imperfective future</div>,
+    value: "imperfectiveFuture",
+    formula: "ba + present",
+}, {
+    label: <div><i className="fas fa-camera mr-2" />perfective future</div>,
+    value: "perfectiveFuture",
+    formula: "ba + subjunctive",
+}, {
+    label: <div><i className="fas fa-video mr-2" />continuous past</div>,
+    value: "imperfectivePast",
+    formula: "imperfective root + past verb ending",
+}, {
+    label: <div><i className="fas fa-camera mr-2" />simple past</div>,
+    value: "perfectivePast",
+    formula: "perfective root + past verb ending",
+}, {
+    label: <div><i className="fas fa-video mr-2" />habitual continual past</div>,
+    value: "habitualImperfectivePast",
+    formula: "ba + continuous past",
+}, {
+    label: <div><i className="fas fa-camera mr-2" />habitual simple past</div>,
+    value: "habitualPerfectivePast",
+    formula: "ba + simple past",
+}];
+
+export const abilityTenseOptions: { label: string | JSX.Element, value: T.VerbTense, formula: string }[] = [{
+    label: <div><i className="fas fa-video mr-2" />present ability</div>,
+    value: "presentVerb",
+    formula: "ability imperfective stem + present verb ending",
+}, {
+    label: <div><i className="fas fa-camera mr-2" />subjunctive ability</div>,
+    value: "subjunctiveVerb",
+    formula: "ability perfective stem + present verb ending",
+}, {
+    label: <div><i className="fas fa-video mr-2" />imperfective future ability</div>,
+    value: "imperfectiveFuture",
+    formula: "ba + present ability",
+}, {
+    label: <div><i className="fas fa-camera mr-2" />perfective future ability</div>,
+    value: "perfectiveFuture",
+    formula: "ba + subjunctive ability",
+}, {
+    label: <div><i className="fas fa-video mr-2" />continuous past ability</div>,
+    value: "imperfectivePast",
+    formula: "ability imperfective root + past verb ending",
+}, {
+    label: <div><i className="fas fa-camera mr-2" />simple past ability</div>,
+    value: "perfectivePast",
+    formula: "ability perfective root + past verb ending",
+}, {
+    label: <div><i className="fas fa-video mr-2" />habitual continual past ability</div>,
+    value: "habitualImperfectivePast",
+    formula: "ba + continuous past ability",
+}, {
+    label: <div><i className="fas fa-camera mr-2" />habitual simple past ability</div>,
+    value: "habitualPerfectivePast",
+    formula: "ba + simple past ability",
+}];
+
+export const perfectTenseOptions: { label: string | JSX.Element, value: T.PerfectTense, formula: string }[] = [{
+    label: "Present Perfect",
+    value: "presentPerfect",
+    formula: "past participle + present equative",
+}, {
+    label: "Habitual Perfect",
+    value: "habitualPerfect",
+    formula: "past participle + habitual equative",
+}, {
+    label: "Subjunctive Perfect",
+    value: "subjunctivePerfect",
+    formula: "past participle + subjunctive equative",
+}, {
+    label: "Future Perfect",
+    value: "futurePerfect",
+    formula: "past participle + future equative",
+}, {
+    label: "Past Perfect",
+    value: "pastPerfect",
+    formula: "past participle + past equative",
+}, {
+    label: `"Would Be" Perfect`,
+    value: "wouldBePerfect",
+    formula: `past participle + "would be" equative`,
+}, {
+    label: "Past Subjunctive Perfect",
+    value: "pastSubjunctivePerfect",
+    formula: "past participle + past subjunctive equative",
+}, {
+    label: `"Would Have Been" Perfect`,
+    value: "wouldHaveBeenPerfect",
+    formula: `past participle + "would have been" equative`,
+}];
+
+export const imperativeTenseOptions: { label: string | JSX.Element, value: T.ImperativeTense, formula: string }[] = [{
+    label: <div><i className="fas fa-video mr-2" />imperfective imperative</div>,
+    value: "imperfectiveImperative",
+    formula: "imperfective stem + imperative ending",
+}, {
+    label: <div><i className="fas fa-camera mr-2" />perfective imperative</div>,
+    value: "perfectiveImperative",
+    formula: "perfective stem + imperative ending",
+}];

src/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/inflect",
-  "version": "5.0.12",
+  "version": "5.1.0",
   "description": "Pashto inflector library",
   "main": "dist/index.js",
   "types": "dist/lib/library.d.ts",