Healthcare: clinical components — problem list, presenting problems, assessment & plan#297
Merged
Conversation
…, assessment & plan Implements the concern/assertion condition model from the design doc (Clinical-Med-Allergies-Conditions.md): - ProblemList: patient-level concerns with assertion history timelines (refine/revise/progress lineage), ICD-10/ICD-11/SNOMED codings shown parenthetically with full background in tooltips, uncertainty badges, observations (quick progress notes), and an Unconfirmed group separate from Active/Resolved - PresentingProblems: encounter-scoped relevant problem list fed by the patient problem list, with problem-focused vs comprehensive scope banner and relevance tagging on the encounter reference - Assessment: visit A&P with orders nested under problems via the durable concernId link, inline add-order, unlinked-orders bucket - ConditionEditor: add/observe/refine/revise/relate dialog with capture-first entry, coding rows, fuzzy onset, and three-state field uncertainty (unknown != blank, confidence levels) - MedicationList: presenting-medications reconciliation list - useDragReorder hook: shared HTML5 drag & drop reordering used by all lists (concerns, orders incl. cross-problem moves, medications), with full keyboard equivalents (Alt+arrows, Move menus, roving focus) and aria-live announcements for 508 compliance
Deploying ui with
|
| Latest commit: |
633481d
|
| Status: | 🚫 Build failed. |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new set of controlled, props-only Healthcare UI components (Problem List / Presenting Problems / Assessment & Plan / Condition Editor / Medication List) plus shared drag-reorder infrastructure, aligning the UI with the concern-vs-assertion condition model described in the included design doc.
Changes:
- Introduces new Healthcare components with Storybook stories under
Healthcare/for clinical problem/medication workflows. - Adds a shared
useDragReorderhook (plus helpers) and wires it into multiple list-like components. - Exposes new components/icons via public exports and adds the design doc to the repo.
Reviewed changes
Copilot reviewed 20 out of 20 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/index.ts | Exports new Healthcare components from the package entrypoint. |
| src/hooks/useDragReorder.ts | Adds shared HTML5 drag-and-drop reorder hook + helpers. |
| src/hooks/index.ts | Re-exports the new drag-reorder hook/utilities. |
| src/components/ProblemList/ProblemList.tsx | Implements patient-level concerns list with grouping, timelines, actions, and DnD. |
| src/components/ProblemList/ProblemList.stories.tsx | Adds interactive/read-only/empty Storybook stories for ProblemList. |
| src/components/ProblemList/index.ts | Barrel exports for ProblemList types/helpers. |
| src/components/PresentingProblems/PresentingProblems.tsx | Implements encounter-scoped “relevant problems” selection/tagging UI with DnD. |
| src/components/PresentingProblems/PresentingProblems.stories.tsx | Adds Storybook stories for PresentingProblems (scope variations). |
| src/components/PresentingProblems/index.ts | Barrel exports for PresentingProblems types/constants. |
| src/components/MedicationList/MedicationList.tsx | Implements presenting-medications reconciliation list with grouping and DnD. |
| src/components/MedicationList/MedicationList.stories.tsx | Adds interactive/default/read-only Storybook stories for MedicationList. |
| src/components/MedicationList/index.ts | Barrel exports for MedicationList types/constants. |
| src/components/Icons/index.ts | Exports additional lucide icons used by new components. |
| src/components/ConditionEditor/ConditionEditor.tsx | Adds condition assertion editor modal with uncertainty controls and modes. |
| src/components/ConditionEditor/ConditionEditor.stories.tsx | Adds Storybook stories for ConditionEditor modes. |
| src/components/ConditionEditor/index.ts | Barrel exports for ConditionEditor types. |
| src/components/Assessment/Assessment.tsx | Implements visit Assessment & Plan with nested orders, linking, and DnD. |
| src/components/Assessment/Assessment.stories.tsx | Adds Storybook stories for Assessment (interactive/read-only). |
| src/components/Assessment/index.ts | Barrel exports for Assessment types/constants. |
| Clinical-Med-Allergies-Conditions.md | Adds design doc describing the canonical model and UI surfaces. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…browser)
- scripts/codify/extract.mjs: dumps 770K MedicalCodify_search rows (12
codetypes) from the dockerized rxdb MariaDB to TSV
- scripts/codify/build-index.mjs: builds binary .mcdx index shards per
clinical domain (condition/med/lab/procedure/vaccine) with a sorted
token dictionary, posting lists, and curated alias expansion
(aliases.json: chf/lvhf, lasix<->furosemide, a1c/hba1c, brand<->generic)
- src/components/CodeLookup: shard parser + multi-word-prefix BM25-ish
engine ('con hea fa' -> Congestive heart failure) with edit-distance-1
typo fallback, Web Worker loader, and combobox component + stories
- Artifacts land in .storybook/public/codify/ (gitignored); pnpm
codify:extract && pnpm codify:build to regenerate
- Verified: golden queries return in 0.6-30 ms locally over 770K entries
Not exported from src/index.ts yet (worker bundling in tsup pending).
…down - Results now render in a floating dropdown (combobox pattern): opens on results, closes on select/Esc/blur, hover highlight without clobbering keyboard navigation (mousemove, not mouseenter) - Compact rows: label first, then codesystem + code right-aligned in small per-domain-tinted text (replaces the oversized badge) - Medication rows drill into all forms & strengths with ArrowRight (or the chevron): re-searches the med shard by name, filters to dosed FDB/RxNORM entries, alphabetized; ArrowLeft/Back returns. Aliases make Lasix drill list furosemide forms (114 entries) and vice versa - Selecting fills the input and suppresses the follow-up auto-search so the dropdown doesn't reopen
README covering the end-to-end design: extract/build pipeline, domain sharding, the .mcdx binary format, the prefix+BM25-ish scoring algorithm with alias and Damerau-Levenshtein-1 typo handling, worker loading, component keyboard model incl. med forms/strengths drill-down, and the production roadmap (RXCUI concept grouping, OPFS persistence, ranking priors, licensing). Linked from the Storybook docs.
- Add order now uses a code lookup instead of free text: new
renderOrderSearch prop (dependency-injected so the library build
doesn't bundle the lookup worker; story wires CodeLookup)
- Order type defaults to 'Auto': the type is inferred from the picked
code's system (RxNORM/FDB/NDC/CVX -> medication, LOINC/Quest/LabCorp
-> lab, HCPCS/ICD10PCS -> procedure); selecting an explicit type
filters the lookup to matching domains at query time
- CodeLookup: new searchDomains prop restricts searches per-query
without reloading shards
- Picked orders carry code {fullid, codetype, fullcode}; the story shows
it as the order detail
- Free-text entry remains the fallback when no lookup is provided
Dragging to select text in the embedded order search was hijacked by the draggable problem block. The block now sets draggable=false (and drops the grab cursor) while its add-order form is open, restoring normal text selection; drag & drop resumes when the form closes.
- New bare prop renders just the input + dropdown (no card, no status line) for embedding in forms; loading progress and error state show in the placeholder instead - Assessment add-order form uses bare mode: type filter, search, and Done now align at the same 40px height on one row
…s open The block body yields to text selection/editing (draggable=false), but the problem header row (number, name, codes) becomes the drag source, so the block can still be reordered mid-entry — the open form travels with it. The form itself is never inside a draggable ancestor.
New clearOnSelect prop, defaulting to true in bare mode: picking a result clears the query and keeps focus so the user can type the next order immediately. Standalone mode keeps the picked label in the input.
The bottom row is now a single 'Add' search across all domains: picking a diagnosis (ICD10/ICD9/SNOMED US via new isConditionCodetype) adds a problem to the assessment, anything else becomes an (unlinked) order typed by its coding system. The unlinked bucket's add button is gone and the bucket only takes space once it actually contains orders.
- The unified add row gains a mode dropdown: Add (auto) / Add problem /
Add order. Problem/order modes scope the search domains and route the
pick directly; auto keeps codetype-based detection
- CodeLookup: new onFreeText prop - Enter with no highlighted result (or
the new 'Use "..." as free text' footer row) submits the raw text
- Free text in problem/order mode adds directly; in auto mode an inline
prompt asks 'Add "..." as: Problem / Order / Cancel' before adding.
Free-text problems arrive uncoded and unconfirmed in the story
- onAddAssessment now takes AssessmentAddPick { label, code? } so coded
and free-text problems share one callback
The toolbar actions previously only logged. They now open the editor seeded from the concern; saving appends the new assertion (revision refutes the prior) and repoints the visit item's assertionId so the block header, plan, and link chips update immediately.
Security / correctness: - extract.mjs no longer hardcodes the MariaDB password: reads RXDB_MYSQL_PASSWORD / MYSQL_PWD / --password, fails fast when missing, and passes it via the child environment instead of argv - engine.ts: viaAlias is now tracked per-document (aliasBuf scratch buffer, reset with the other buffers) instead of one shard-level flag - reorderIds() ignores dragged ids that aren't in the list (stale/cross- list payloads can no longer inject unknown ids) - useDragReorder keeps the dragged id in a ref set synchronously in dragstart (dragover no longer races React state) and clears the stale drop indicator when hovering invalid targets Accessibility: - CodeLookup ids are per-instance via React.useId (aria-controls / aria-activedescendant survive multiple instances); aria-expanded now mirrors actual dropdown visibility (incl. drill mode / free-text row) - Keyboard reordering (Alt+arrows + roving focus) added to MedicationList rows and PresentingProblems selected rows; Assessment unlinked orders now render via OrderRow (focusable + Move menu), replacing the pointer-only chip row - Pointer drag & drop now announces via the aria-live regions in ProblemList, MedicationList, and Assessment (reorder, move-to-problem) - ProblemList: Alt+arrow reordering and its aria-label hint are disabled in readOnly mode (canReorder follows drag.enabled) Styling / misc: - ProblemList timeline dot uses -left-5 (valid on Tailwind 3 + 4) - Drag indicator classes (opacity-40, inset shadows, cursor-grab) added to miewebUISafelist for Tailwind 3 consumers - ConditionEditor: seed effect depends on open/mode/prior (no stale form when switching while open); coding values are trimmed on save - PresentingProblems: unselected rows are only dimmed/badged out-of- scope in problem-focused encounters, not comprehensive ones - Prettier pass over all touched component files
Member
Author
|
Addressed all Copilot review feedback in 62f5913 (threads resolved):
|
…-fields file The MedicationListField import referenced a file that isn't part of this PR (removed in 923a7c1), which broke pnpm typecheck in CI.
- New useLiveAnnouncement hook: clears the aria-live region before setting the message (after a tick), so repeated identical announcements (e.g. two 'moved down' reorders in a row) are announced every time instead of being swallowed by React state bailout. Adopted by ProblemList, MedicationList, PresentingProblems, and Assessment - CodeLookup: domains/searchDomains now distinguish 'prop not provided' (undefined = all domains) from an explicit empty array (= none); the keys use null for absent and pass [] through to the worker - ConditionEditor: fields marked explicitly unknown no longer persist contradictory values on save - coding/severity/onset are cleared when their unknown toggle is set (unknown wins over a seeded value)
…, git-lfs shard distribution; move pipeline to packages/codify submodule
- Build pipeline moved to the new packages/codify submodule (also hosts
the SQLite FTS5 build + codify-mcp stdio server for agent loops)
- .mcdx v2: docPrior u8 section (log-quantized usage; simulated top-200
meds/ICD-10 diagnoses/SNOMED procedures until a production export is
wired in) + meta.locale; engine still reads v1 (prior=0)
- engine: final score x= (1 + 0.5*prior/255) - common codes outrank rare
ones at equal text relevance (hypertension -> I10 first)
- Shards now per locale ({indexUrl}/{locale}/); es is a curated sample
(common diagnoses + med ingredient INNs) with its own alias set (hta,
dm2, ic...); CodeLookup gains a locale prop
- Worker: OPFS persistence - network-first manifest check, cached shards
reused only when builtAt/version/bytes match, torn-cache-safe manifest
write-after, full offline fallback when the network is down
- Storybook: Language toolbar global (en/es) wired to CodeLookup stories;
shards committed via git-lfs and served from .storybook/public/codify/
(no longer gitignored)
Comment on lines
+342
to
+347
| <RowIconButton | ||
| key={action} | ||
| label={ACTION_META[action].label} | ||
| icon={ACTION_META[action].icon} | ||
| onClick={() => onAction?.(medication, action)} | ||
| /> |
Comment on lines
+538
to
+542
| Index unavailable: {status.message}. Run{' '} | ||
| <code className="font-mono"> | ||
| node scripts/codify/extract.mjs && node | ||
| scripts/codify/build-index.mjs | ||
| </code> |
Comment on lines
+100
to
+103
| ) { | ||
| // hovering an invalid target: clear any stale indicator | ||
| setOver((prev) => (prev ? null : prev)); | ||
| return; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements the concern/assertion condition model from the design doc (Clinical-Med-Allergies-Conditions.md) as a set of Healthcare components, plus the supporting drag-and-drop infrastructure.
Design doc
concernIdas the durable identity orders reference; time-stampedConditionAssertions carry the evolving ICD-10-CM / ICD-11 / SNOMED codings (refinement / revision / progression / reattribution lineage; revisions refute, never rewrite)IndicationLink= durableconcernId+ frozen coding snapshot (billing ICD-10 is a projection, never the join key)Components (props-only, controlled; each with Storybook stories under
Healthcare/)ProblemList— patient-level concerns grouped Unconfirmed / Active / Inactive / Resolved; expandable assertion timelines; parenthetical ICD codes with full coding/history/observations in tooltips; uncertainty badges; observations (quick progress notes); refine / revise / resolve / relate / observe actionsPresentingProblems— encounter-scoped relevant problem list fed by the patient problem list; scope banner; relevance tagging (Addressed / Relevant Hx / Noted); negative assertion gated to comprehensive scopeAssessment— visit A&P with orders nested under problems viaconcernId; inline add-order; unlinked-orders bucket with link chipsConditionEditor— add / observe / refine / revise / relate dialog; capture-first (name only required); coding rows; fuzzy onset; three-state field uncertainty (unknown ≠ blank, confidence levels)MedicationList— presenting-medications reconciliation listuseDragReorder— shared HTML5 DnD hook (no new deps, no localStorage; consumer persists id order)Accessibility (508)
Every drag interaction has a keyboard equivalent: Alt+↑/↓ reorder, Alt+←/→ move orders between problems, per-row "Move to…" menus, roving focus, toolbar arrow-key navigation, and
aria-liveannouncements.Not ready to merge — remaining work
AssessmentOrderis a display stub)toFhir,closeEncountermerge) per design doc phases