Frontend

What Frontend Owns

Frontend Perspective

• The sidebar exposes Drug Master / Panel Master as the entry point.
• Gene Master shows the gene catalog with tabs for all, system default, custom, and disabled genes.
• Antibiotic Master shows the antibiotic catalog with tabs for all, system default, custom, and disabled antibiotics.
• Organism Master lets users manage organism records and view their linked antibiotics.
• List pages support download, bulk actions, filtering, row actions, and system-default requests.
• Test List lets users create a report/test with test type Molecular.
• Report Parameters lets users add molecular components such as Gene, Organism, Antibiotic Resistance, and Molecular Pivot.
• Gene configuration controls report-entry fields and display metadata.
• Organism configuration includes a Viral Load field in addition to the standard gene-style fields.
• Antibiotic Resistance links to a Gene component and provides antibiogram-style display with resistance filtering.
• Molecular Pivot links to Antibiotic Resistance components and supports group-by, sort-by, and order-by metadata.

Core Frontend State Objects

Visibility Rules

The feature appears when the user has access to the Drug Master / Panel Master sidebar section.

The Gene Master, Antibiotic Master, and Organism Master screens are siblings inside the same sidebar group that also contains Drug Master, Panel Master, and Brand Master.

Molecular report components appear from the Add New Parameter menu after the test/report is configured with test type Molecular.

Antibiotic Resistance component requires at least one Gene component to be present in the same test because it must link to a Gene component.

Molecular Pivot component requires at least one Antibiotic Resistance component to be present.

Runtime UI Behaviors

• When a user opens Gene Master, the initial load calls /reporting/genes/?is_disabled=0 and stores results in MODEL.allGenes.
• When a user clicks the Disabled Genes tab, the disabled-genes API is called once and stored in MODEL.disabledGenes.
• When a user opens Antibiotic Master, the initial load calls /reporting/antibiotics/?is_disabled=0 and stores results in MODEL.allAntibiotics.
• When a user opens Organism Master, the initial load calls /reporting/organisms/?is_disabled=0 and stores results in MODEL.allOrganisms.
• When the Disabled Antibiotics or Disabled Organisms tab is clicked, the corresponding disabled list is fetched once and cached.
• When a user copies a gene, antibiotic, or organism, the name is prefixed with Copy of and a new record is created immediately.
• When a user disables an antibiotic, the related organisms are fetched from /reporting/antibiotics/{id}/organisms and shown in the disable confirmation modal before the disable action proceeds.
• When a user disables an organism, the related antibiotics are fetched from /reporting/organisms/{id}/antibiotics and shown in the disable confirmation modal.
• When a user disables a gene, no dependency check is performed before showing the confirmation modal.
• When validation fails, the modal should keep entered data and show actionable validation feedback.
• When save succeeds, the modal closes and the list reflects the updated record.
• When the user selects test type Molecular, the Report Parameters tab can add molecular components.
• When the user adds a Gene component, it opens with Configuration, Meta, and Defaults tabs.
• When the user adds an Organism component, it opens with Configuration, Meta, and Defaults tabs.
• When the user adds an Antibiotic Resistance component, it links to a Gene component and exposes the Configuration and Meta tabs with an antibiotic filter toggle.
• When the user adds a Molecular Pivot component, it links to Antibiotic Resistance components and exposes a Meta tab with Group By, Sort By, and Order By fields.
• During report entry, the Gene component grid shows Detected when the entered value is at or below the cut-off, and Not Detected when above.
• During report entry, the Organism component behaves the same way as Gene regarding the detection logic.
• Detected rows are highlighted; Not Detected rows are not highlighted.
• The Antibiotic Resistance component has a Calculate button that populates antibiotic resistance data based on the linked Gene results.
• The Antibiotic Resistance filter toggles (Show All Antibiotics, Only Resistant, Only Sensitive) filter the visible antibiotic rows.

Important Molecular Snippets (Frontend)

Report entry component renderer

Source: livehealth-frontend/src/components/reusable/Modals/Report/EditReportView/index.tsx

renderComponent(...) is the report-entry switchboard. It reads component_type from each report format row and renders the matching molecular component.

Important behavior:

• GENE and ORGANISM render collapsible grids with an Add Genes or Add Organisms dropdown.
• Both pass component_type into the grid helpers so detection logic can be applied correctly.
• ANTIBIOTIC_RESISTANCE renders an antibiogram-style grid linked to Gene components, with a Calculate button and a resistance filter.
• MOLECULAR_PIVOT renders a summary pivot of Antibiotic Resistance findings using metadata for group-by, sort-by, and order-by.

Molecular detection logic in renderCell

Source: livehealth-frontend/src/components/reusable/Modals/Report/EditReportView/AgGrid/helpers.tsx

renderCell(...) applies molecular-specific result logic when componentType is GENE or ORGANISM.

Key behavior:

• When result_1 is entered, the comparison checks value > cut_off instead of value >= cut_off.
• If value is above the cut-off, interpretation is Not Detected, is_positive = 0, highlightFlag = 0.
• If value is at or below the cut-off, interpretation is Detected, is_positive = 1, highlightFlag = 1.
• Non-numeric values default to Detected.
• This is the opposite of toxicology logic where higher values trigger Positive.

Minimal control flow:

const molecularCheck =
  componentType?.toUpperCase() == "GENE" ||
  componentType?.toUpperCase() == "ORGANISM";

if (molecularCheck) {
  condition = Number(updatedValue) > Number(copyData?.cut_off);
  // Non-numeric or empty → treated as detected
  if (isNaN(Number(updatedValue)) || String(updatedValue)?.trim()?.length === 0) {
    condition = true;
  }
}

if (condition) {
  result = molecularCheck ? "Not Detected" : "Positive";
  is_positive = molecularCheck ? 0 : 1;
  highlightFlag = molecularCheck ? 0 : 1;
} else {
  is_positive = molecularCheck ? 1 : 0;
  highlightFlag = molecularCheck ? 1 : 0;
}

Molecular row color helper

Source: livehealth-frontend/src/components/reusable/Modals/Report/EditReportView/AgGrid/helpers.tsx

getColorForMolecular(...) highlights rows where the result value is at or below the cut-off, indicating detection.

if (
  data[colObj?.column_ref] !== null &&
  data[colObj?.column_ref] !== "" &&
  Number(data[colObj?.column_ref]) <= data?.cut_off
) {
  return UPPER_LIMIT_COLOR; // row is highlighted for detected values
}
return WHITE_COLOR;

Molecular Pivot column helper

Source: livehealth-frontend/src/components/reusable/Modals/Report/EditReportView/AgGrid/helpers.tsx

prepareSummaryComponentColumnDefForMolecular(...) builds the column definitions for the Molecular Pivot grid. It appends an Antibiotic Name column to the standard configured columns and applies group-by, sort-by, and order-by from component meta.

Antibiotic Resistance grid helper

Source: livehealth-frontend/src/components/reusable/Modals/Report/EditReportView/AgGrid/helpers.tsx

prepareColumnDefMicro(...) and renderCellMicro(...) build the column definitions and cell rendering for the Antibiotic Resistance component. The method_type from component meta influences how result values are interpreted and displayed in the antibiogram grid.

Default row resolution

Source: livehealth-frontend/src/components/reusable/Modals/Report/EditReportView/AgGrid/helpers.tsx

prepareDefaultRowData(...) resolves default instances for report entry. When linked_model is GENE, it reads from MODEL.allGenes instead of MODEL.allDrugs or MODEL.allAntibiotics.

Gene Master container

Source: livehealth-frontend/src/components/reusable/Gene/container/index.tsx

GeneMaster owns the Gene Master list screen.

Important behavior:

• Initial load calls getDrugListApi("/reporting/genes/?is_disabled=0").
• Stores active genes in MODEL.allGenes.
• Disabled Genes tab lazily calls /reporting/genes/?is_disabled=1.
• Tabs split the list into All Genes, System Defaults, Custom Genes, and Disabled Genes.
• Add Gene opens CreateGene.
• Row click/edit loads the selected gene into the update flow.
• Copy creates a new gene by cloning the selected row and prefixing the name with Copy of.
• Enable calls /reporting/genes/{id}/enable/.
• Disable opens a confirmation modal and then calls /reporting/genes/{id}/disable/.
• Tab state syncs to GENERIC.selectedTab for sub-tab navigation inside the modal.

Antibiotic Master container

Source: livehealth-frontend/src/components/reusable/Antibiotic/container/index.tsx

AntibioticMaster owns the Antibiotic Master list screen.

Important behavior:

• Initial load calls getDrugListApi("/reporting/antibiotics/?is_disabled=0").
• Stores active antibiotics in MODEL.allAntibiotics.
• Disabled Antibiotics tab lazily calls /reporting/antibiotics/?is_disabled=1.
• Tabs split the list into All Antibiotics, System Defaults, Custom Antibiotics, and Disabled Antibiotics.
• Add Antibiotic opens CreateAntibiotic.
• Row click/edit loads the selected antibiotic through convertObjForResponse(...).
• Copy creates a new antibiotic by cloning and prefixing the name with Copy of.
• Before disabling an antibiotic, fetches related organisms from /reporting/antibiotics/{id}/organisms and shows them in the disable modal.
• Enable calls /reporting/antibiotics/{id}/enable/.
• Disable calls /reporting/antibiotics/{id}/disable/.

Organism Master container

Source: livehealth-frontend/src/components/reusable/Organism/container/index.tsx

OrganismMaster owns the Organism Master list screen.

Important behavior:

• Initial load calls getDrugListApi("/reporting/organisms/?is_disabled=0").
• Stores active organisms in MODEL.allOrganisms.
• Disabled Organisms tab lazily calls /reporting/organisms/?is_disabled=1.
• Tabs split the list into All Organisms, System Defaults, Custom Organisms, and Disabled Organisms.
• Add Organism opens CreateOrganism.
• Row click/edit loads the selected organism through convertObjForResponse(...).
• Copy creates a new organism by cloning and prefixing with Copy of.
• Before disabling an organism, fetches related antibiotics from /reporting/organisms/{id}/antibiotics and shows them in the disable modal.
• Enable calls /reporting/organisms/{id}/enable/.
• Disable calls /reporting/organisms/{id}/disable/.
• On clear, GENERIC.organismMappingTab resets to Molecular Mapping, indicating a Molecular Mapping sub-tab inside the organism modal.

Key Frontend Locations & Helpers

Frontend State Lifecycle