Frontend
Frontend components, form state management, AgGrid definitions, and API integration for Microbiology.
Frontend
Core Repositories
The Microbiology frontend code resides primarily in livehealth-frontend. This handles the master data UI in Drug Master / Panel Master and the report builder / report entry UI in Profile & Report Management.
Master Data Components
Antibiotic Master
Source: livehealth-frontend/src/components/reusable/Antibiotic/container/index.tsx
The Antibiotic Master component provides a list view and a creation/edit modal. It interacts with the /reporting/antibiotics/ APIs.
- Fetches and displays the list of antibiotics.
- Provides standard table actions (Copy, Edit, Disable, Enable).
- When disabling an antibiotic, it fetches related organisms from
/reporting/antibiotics/\{id\}/organismsand displays them in a warning modal.
Organism Master & Mapping
Source: livehealth-frontend/src/components/reusable/Organism/container/index.tsx
The Organism Master provides the main CRUD operations for organisms.
- Contains a
MappingTabwhich acts as the host for the Microbiology Ranges and Molecular Mapping sub-tabs. - The
Microbiology Rangestab enables searching for an antibiotic and configuring the R, I, and S breakpoints for Disk Diffusion (Diameter) and MIC. - When disabling an organism, it fetches related antibiotics from
/reporting/organisms/\{id\}/antibiotics.
RIS Mapping Helper (mappingListParsing)
Source: livehealth-frontend/src/components/reusable/Antibiotic/utils/helpers.ts
This helper translates the UI representation of RIS grids into the flat payload structure required by the backend API:
// Each antibiotic is transformed to:
{
antibiotic_id: 42,
antibiotic_name: "Ciprofloxacin",
resistance_diameter_upper: 12,
resistance_diameter_lower: 0,
// ... (all 12 fields)
}Report Configuration Components
These components are used when configuring a Microbiology test under Test List > Add New Parameter.
MicrobiologyForm
Source: livehealth-frontend/src/components/LabAdmin/AddEditReport/components/MicrobiologyForm/index.tsx
- Mounts the main parameter settings.
- Forces
Render Pivot Table on PDF(should_pivot) tofalseifmax_allowed_microorganismis set to1. - Contains tabs for Configuration and Meta.
updateMicroEditables
Source: livehealth-frontend/src/components/LabAdmin/Utils/helpers.ts
When Method Type changes between Detection Window, MIC, and Interpretation Only, this helper manages visibility of the result grid columns (result_1, result_2, result_r, etc.). For Interpretation Only, it hides all columns except name and result_2.
Report Entry & AgGrid
At report entry, the Microbiology component builds a dynamic grid using ag-grid-react.
Rendering the Component (renderComponent)
Source: livehealth-frontend/src/components/reusable/Modals/Report/EditReportView/index.tsx
The standard EditReportView handles rendering based on component_type. For MICROBIOLOGY:
- It renders a multi-select dropdown for adding organisms up to
max_allowed_microorganism. - Below each selected organism, it renders an AgGrid of mapped antibiotics.
Maximum Organism Enforcement
Before adding a new organism, the system validates the current count:
if (Object.keys(microbiologyOrganisms).length >= max_allowed_microorganism) {
message: `${t("Maximum")} ${max_allowed_microorganism} ${t("organism")} ${t("allowed")}`;
// Prevents addition
}Auto-interpretation (calculateValueForMicro)
Source: livehealth-frontend/src/components/reusable/Modals/Report/helpers.ts
When the user types a value in the result_1 cell, calculateValueForMicro runs:
- Determines if the method type is
MICorDetection Window. - Checks the entered value against
resistance_upper/_lower,intermediate_upper/_lower, andsensitive_upper/_lower. - Populates
result_2with the corresponding interpretation text (e.g.Sensitive).
Reference Range Formatting
Source: livehealth-frontend/src/components/reusable/Modals/Report/helpers.ts
The read-only reference columns (result_r, result_i, result_s) are formatted as strings:
{lower} - {upper}. If no range is configured, they display - - -.