feat: polish rod and trajectory UX interactions

Improve Majic Rod Solver usability with denser table controls, clearer unit-aware guidance, and stronger accessibility affordances for keyboard/screen-reader workflows.

Made-with: Cursor
This commit is contained in:
2026-04-17 08:16:11 -06:00
parent 2a6cee21f8
commit 64d4492c60
7 changed files with 163 additions and 19 deletions

View File

@@ -14,6 +14,7 @@ type Props = { store: CaseStore };
export function PumpTab({ store }: Props) {
const { state, update } = store;
const isMetric = state.unitsSelection === 1;
const pumpOptions = useMemo(() => {
const mmVals = PUMP_PLUNGER_INCH_OPTIONS.map((inchVal) => pumpDiameterMmFromInches(inchVal));
@@ -37,7 +38,11 @@ export function PumpTab({ store }: Props) {
<Row
label="Plunger diameter"
htmlFor="plungerDiam"
hint="Stored as mm in the case file when above 2 (same convention as rod OD)."
hint={
isMetric
? "Metric-first display with imperial equivalent in each option."
: "Imperial-first display with metric equivalent in each option."
}
>
<SelectField
id="plungerDiam"
@@ -47,7 +52,11 @@ export function PumpTab({ store }: Props) {
ariaLabel="Pump plunger diameter"
/>
</Row>
<Row label="Pump Friction" htmlFor="pumpFric" hint="lbf (imperial)">
<Row
label="Pump Friction"
htmlFor="pumpFric"
hint={isMetric ? "N (SI case)" : "lbf (imperial oilfield case)"}
>
<NumberField
id="pumpFric"
value={state.pumpFriction}
@@ -55,7 +64,11 @@ export function PumpTab({ store }: Props) {
onChange={(v) => update("pumpFriction", v)}
/>
</Row>
<Row label="Pump Intake Pressure" htmlFor="pumpIntake" hint="psi (imperial)">
<Row
label="Pump Intake Pressure"
htmlFor="pumpIntake"
hint={isMetric ? "Pa (SI case)" : "psi (imperial oilfield case)"}
>
<NumberField
id="pumpIntake"
value={state.pumpIntakePressure}