different display for chart mode in EPExplorer and VPExplorer - showing all tenses in a collapsable list

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pashto-inflector",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "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.1.0",
+  "version": "5.1.1",
   "description": "Pashto inflector library module with React components",
   "main": "dist/components/library.js",
   "module": "dist/components/library.js",

src/components/src/ep-explorer/EPExplorer.tsx

@@ -11,7 +11,6 @@ import {
 } from "react";
 import { completeEPSelection } from "../../../lib/src/phrase-building/render-ep";
 import { makeEPSBlocks } from "../../../lib/src/phrase-building/blocks-utils";
-import EquativePicker from "./EquativePicker";
 import autoAnimate from "@formkit/auto-animate";
 // @ts-ignore
 import LZString from "lz-string";
@@ -128,16 +127,9 @@ function EPExplorer(props: {
                 entryFeeder={props.entryFeeder}
                 eps={eps}
                 onChange={handleEpsChange}
-            />}
-        {mode === "charts" && <div className="my-2">
-            <div className="h5 text-center clickable">Equative</div>
-            <EquativePicker
-                equative={eps.equative}
-                onChange={payload => adjustEps({ type: "set equative", payload })}
-                hideNegative={false}
             />
-        </div>}
+        }
-        {mode === "charts" && <EqChartsDisplay tense={eps.equative.tense} opts={props.opts} />}
+        {mode === "charts" && <EqChartsDisplay opts={props.opts} />}
         {mode === "phrases" && <EPDisplay
             opts={props.opts}
             eps={eps}

src/components/src/ep-explorer/EqChartsDisplay.tsx

@@ -3,8 +3,37 @@ import VerbFormDisplay from "../VerbFormDisplay";
 import { baParticle } from "../../../lib/src/grammar-units";
 import { getEquativeForm } from "../../../lib/src/phrase-building/render-ep";
 import { addToForm } from "../../../lib/src/p-text-helpers";
+import useStickyState from "../useStickyState";
+import { epTenseOptions as options } from "./epTenseOptions";
+import Hider from "../Hider";
 
-function EqChartsDisplay({ tense, opts }: {
+function EqChartsDisplay({ opts }: { opts: T.TextOptions }) {
+    const [showing, setShowing] = useStickyState<string[]>([], "EPTensesShowing");
+    const adjustShowing = (v: string) => {
+        if (showing.includes(v)) {
+            setShowing(os => os.filter(x => x !== v));
+        } else {
+            setShowing(os => [v, ...os]);
+        }
+    }
+    return <div>
+        {options.map((tense) => <div key={Math.random()}>
+            <Hider
+                label={tense.label}
+                showing={showing.includes(tense.value)}
+                handleChange={() => adjustShowing(tense.value)}
+                hLevel={5}
+            >
+                <EqChartDisplay
+                    tense={tense.value}
+                    opts={opts}
+                />
+            </Hider>
+        </div>)}
+    </div>;
+}
+
+function EqChartDisplay({ tense, opts }: {
     tense: T.EquativeTense,
     opts: T.TextOptions,
 }) {

src/components/src/ep-explorer/EquativePicker.tsx

@@ -1,38 +1,13 @@
 import * as T from "../../../types"
 import Select from "react-select";
 import ButtonSelect from "../ButtonSelect";
+import { epTenseOptions as options } from "./epTenseOptions";
 
 const zIndexProps = {
     menuPortalTarget: document.body, 
     styles: { menuPortal: (base: any) => ({ ...base, zIndex: 9999 }) },
 };
 
-const options: { label: string | JSX.Element, value: T.EquativeTense }[] = [{
-    label: "Present",
-    value: "present",
-}, {
-    label: "Habitual",
-    value: "habitual",
-}, {
-    label: "Subjunctive",
-    value: "subjunctive",
-}, {
-    label: "Future",
-    value: "future",
-}, {
-    label: "Past",
-    value: "past",
-}, {
-    label: `"Would Be"`,
-    value: "wouldBe",
-}, {
-    label: "Past Subjunctive",
-    value: "pastSubjunctive",
-}, {
-    label: `"Would Have Been"`,
-    value: "wouldHaveBeen",
-}];
-
 function EquativePicker({ equative, onChange, hideNegative }: {
     equative: { tense: T.EquativeTense, negative: boolean },
     onChange: (e: { tense: T.EquativeTense, negative: boolean }) => void,

src/components/src/ep-explorer/epTenseOptions.tsx

@@ -0,0 +1,27 @@
+import * as T from "../../../types";
+
+export const epTenseOptions: { label: string | JSX.Element, value: T.EquativeTense }[] = [{
+    label: "Present",
+    value: "present",
+}, {
+    label: "Habitual",
+    value: "habitual",
+}, {
+    label: "Subjunctive",
+    value: "subjunctive",
+}, {
+    label: "Future",
+    value: "future",
+}, {
+    label: "Past",
+    value: "past",
+}, {
+    label: `"Would Be"`,
+    value: "wouldBe",
+}, {
+    label: "Past Subjunctive",
+    value: "pastSubjunctive",
+}, {
+    label: `"Would Have Been"`,
+    value: "wouldHaveBeen",
+}];

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

@@ -6,7 +6,7 @@ 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 [showing, setShowing] = useStickyState<string[]>([], "VPTensesShowing");
     const [showFormulas, setShowFormulas] = useStickyState<boolean>(false, "showFormulasWithCharts");
     const adjustShowing = (v: string) => {
         if (showing.includes(v)) {
@@ -24,7 +24,7 @@ function AllTensesDisplay({ VS, opts }: { VS: T.VerbSelection, opts: T.TextOptio
         : imperativeTenseOptions;
     return <div>
         <div className="clickable mb-2 small text-center" onClick={() => setShowFormulas(x => !x)}>
-            {!showFormulas ? "Show" : "Hide"} Formulas
+            🧪 {!showFormulas ? "Show" : "Hide"} Formulas
         </div>
         {options.map((tense) => <div key={Math.random()}>
             <Hider
@@ -34,7 +34,7 @@ function AllTensesDisplay({ VS, opts }: { VS: T.VerbSelection, opts: T.TextOptio
                 hLevel={5}
             >
                 {showFormulas && <div className="mb-1">
-                    <samp>🧪 {tense.formula}</samp>
+                    <samp>{tense.formula}</samp>
                 </div>}
                 <ChartDisplay
                     VS={{

src/lib/package.json

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