# Probing chart A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Clinic](https://beamline.io/components/apps/clinic) app. Live demo: https://beamline.io/components/probing-chart 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](https://beamline.io/components/tooth-picker), [procedure-picker](https://beamline.io/components/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)` | — | | | `onFinish` | `((chart: ProbeChart) => Promise)` | — | 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` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [Alert Dialog](https://beamline.io/components/alert-dialog.md) - [Avatar](https://beamline.io/components/avatar.md) - [Button](https://beamline.io/components/button.md) - [Empty state](https://beamline.io/components/empty-state.md) - [Label](https://beamline.io/components/label.md) - [Segmented control](https://beamline.io/components/segmented-control.md) - [Select](https://beamline.io/components/select.md) - [Skeleton](https://beamline.io/components/skeleton.md) - [Spinner](https://beamline.io/components/spinner.md) - [Text morph](https://beamline.io/components/text-morph.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Import ```tsx 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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Clinic - [Appointment book](https://beamline.io/components/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](https://beamline.io/components/client-booking): 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](https://beamline.io/components/booking-setup): 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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/session-notes): 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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/claims-queue): 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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).