Probing chart
A React block (a whole screen) in Beamline's Clinic app.
A periodontal probing chart. Six sites per tooth (three buccal, three lingual) across both arches as you face the patient, each depth in its cell and drawn as a line under the row with the 4 mm mark, deep pockets tinted (5 mm and more warning, 7 and more danger); bleeding and suppuration are marks on the site. Entry is by keyboard: a digit sets the depth and moves to the next site, B and S mark bleeding and suppuration, arrows move, Backspace clears; missing teeth are skipped. The focused tooth is drawn from above between its six sites (buccal over, lingual under, each reading like the chart's cell); a site is chosen there or in the chart, and a keypad (0–9, Bleeding, Suppuration) sets it, the way to chart on a touch screen. A saved draft is not a finished exam: finishing asks first (saying how many sites are blank), stamps the time and locks it; a refused save keeps the measurements.
Use it for
- Recording probing depths, bleeding and suppuration during a periodontal exam.
- Any fast keyboard entry of many small measurements laid out on anatomy.
Not for
- Putting procedures on teeth (tooth-picker, procedure-picker).
Anatomy
- header: the product's mark, the title, patient, date, provider and location, the exam's state
- totals: sites measured, pockets 5 mm or deeper, bleeding sites
- upper and lower arches: buccal and lingual rows of depth cells, a depth line per row with the 4 mm mark, tooth numbers
- the focused tooth: the tooth drawn between its six sites, the chosen one outlined; a keypad of depths 0–9 with Bleeding and Suppuration
- save draft, finish (asks first)
States
- site: not measured (blank), measured, 5 mm and more (warning), 7 mm and more (danger), bleeding (danger mark), suppuration (warning mark), focused (ink ring)
- missing tooth: dimmed and skipped
- exam: draft (warning), saved (info), finished and locked (success)
- refused save: the reason said, measurements kept
- phone: the chart scrolls sideways, the editor below
- right to left: the page mirrors, the chart keeps its anatomical orientation
- reduced motion: nothing animates
Keyboard
- Tab into the chart at the focused site; digits set the depth and move on; B bleeding; S suppuration; arrows move; Backspace clears; Tab to the editor and actions
Motion
Nothing moves. Nothing runs at rest.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
patient (required) | string | — | |
exam (required) | { date: string; provider: string; location: string; } | — | |
defaultChart (required) | ProbeChart | — | |
missing | number[] | — | |
finished | { at: string; by: string; } | null | — | Finished exams are read only. |
defaultSite | string | — | The site focused at first, as "tooth:surface:index". |
now | string | — | |
onSave | ((chart: ProbeChart) => Promise<unknown>) | — | |
onFinish | ((chart: ProbeChart) => Promise<unknown>) | — | Finish and lock the exam; reject with the reason to keep it a draft. |
product | string | — | Your product's name, shown as its mark. |
className | string | — | Classes on the documented visual root; no override by default. |
ref | Ref<HTMLDivElement> | — | Receives the documented native target or imperative handle; omitted by default. |
Built from
Import
import { ProbingChart } from "@beamline/probing-chart";Get it
Probing chart is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent
More in Clinic
- Appointment book: The desk's day with the appointment editor beside it. The appointment being edited is a block on the day like any other, drawn in the accent while it is…
- Book an appointment: A client books an appointment on the practice's own site: a service (length and price beside it), who gives it or anyone free, and where; a day with…
- Services and hours: A practice's services and the hours its practitioners can be booked, one relation seen from both ends. A service reads as values and changes on demand…
- Patient overview: One patient's record on a page. A search finds patients by name, chart number or birth date (recent patients when empty; same names told apart by birth…
- Patient chart: A clinic's chart for one client and their animals. The client's header (phone, email, contact preferences, the balance with what it means and as of when…
- Health questionnaire: A patient's medical history as a versioned questionnaire. Every question takes Yes, No or I don't know, and one not answered says so, never read as No; a…
- Case workspace: A patient's clinical cases and how cases work at the practice. A case shows its status, type, teeth, staff, location and start; its checklist counts…
- Care plan: A client's care plan composed beside what the client will see of it. Every field says who sees it (the care team only, or the client too) and the…
- Treatment plan: A patient's treatment plan in named phases. Each procedure shows its tooth, status and fee beside the patient's and the insurer's estimate (not known…
- Plan templates: Reusable treatment-plan templates. A template reads as words at rest and changes on demand: its name edits in place; the status its procedures start as…
- Plan acceptance: A treatment plan presented for acceptance, from both sides. The practice chooses the agreement (the account's default or this location's own) and how…
- Plan follow-up: The practice's follow-up lists, for the person who turns accepted treatment into booked chairs. Treatment plans lead with what's at stake: the value…
- Session notes and tasks: A session's note beside its follow-up tasks, each task tied to the exact words it came from: choose a task and its words light in the note or the…
- Note templates: A practitioner's note templates in one library with three ways in. My templates lists their own by kind, favourites first, each with when it was last…
- Procedure picker: Procedures, conditions and bundles put on a patient's teeth from the chair. The mode (existing, planned, completed) is chosen before adding and each…
- Results notebook: A notebook entry's structured results. The entry's text above a bounded results table with typed columns: a sample link, numbers in their unit with their…
- Insurance claims: Insurance claims as a queue: every claim at first, in the order a person works them (rejected by the clearinghouse, denied by the payer, partly paid, not…
- Account ledger: A patient's account. All transactions or the ones needing attention, each dated with its type in a word, its amount and the running balance; entries that…
- Dispensing: Dispensing from the shelf by lot. A product is found with its stock and prices (consumables left out unless asked); the quantity is drawn across its…
- Record sharing: Records sent out of a clinic. Several visits' records and their documents (record, invoice, plan, lab result, image) are chosen separately, with how much…
- Client journal: A client's journal from both ends. The client's side is their home, built around their day: today's goals with how many are done and a mark each, done…