Frontend Architecture

The frontend implementation for Machine Flags was divided into two major areas:

1. Enabling Machine Flags during test configuration
2. Viewing Machine Flags in report and validation screens

The feature was implemented across multiple React component layers inside the LIMS frontend application.

Frontend Areas Covered

1. Enabling Machine Flags

Machine Flags are enabled during pathology test configuration.

Route: /admin/test-list/<testId>

File Reference: src/components/LabAdmin/AddEditReport/components/ReportConfigurations/index.tsx

Component Hierarchy:

ReportConfigurations
    ↓
TestInformation
    ↓
ConfigCheckBox

ReportConfigurations Component

Responsibility

Acts as the root container for:

• Test configuration
• Report parameter configuration
• Report templating
• Parent mapping
• Feature flags

This component initializes:

• Redux form state
• Generic state
• Report settings
• Test configuration tabs

Important Responsibility for Machine Flags

The component loads and manages testInformationForm state which contains enableDeviceFlags configuration.

TestInformation Component

File Reference:

src/components/LabAdmin/AddEditReport/components/ReportConfigurations/TestInformation/index.tsx

Responsibility

The TestInformation component handles:

• Test metadata
• Test configuration
• Pricing
• Sample settings
• Configuration checkboxes

This component renders the reusable <ConfigCheckBox /> component.

Machine Flags Integration

The Machine Flags feature is exposed through enableDeviceFlags checkbox configuration. The checkbox is rendered only for eligible pathology tests.

ConfigCheckBox Component

File Reference:

src/components/LabAdmin/AddEditReport/reusable/ConfigCheckBox/index.tsx

Responsibility

The ConfigCheckBox component renders all configurable test-level feature flags.

Examples:

• Auto Approval
• Auto Dispatch
• Outsourced Test
• Cell Counter
• Enable Device Flags

Machine Flags Checkbox

The feature was added as:

{
  label: i18n.t("Enable Device Flags (Store results in MongoDB)"),
  id: "enableDeviceFlags",
  isChecked: 0,
  isDisabled: false,
}

Visibility Logic

The frontend only shows the checkbox when: document_db_enabled === true AND test_type === "normal"

Filtering Logic

if (!document_db_enabled || testInformationForm?.test_type?.toLowerCase() != "normal") {
  newList = newList.filter((item: JsonObject) => item.id !== "enableDeviceFlags");
}

Automatic State Handling

If the test is already a document report isDocumentReport === true then frontend automatically enables enableDeviceFlags = 1

Logic

if (
  ins?.id == "enableDeviceFlags" &&
  !("enableDeviceFlags" in testInformationForm) &&
  !!isDocumentReport
) {
  updateTestInformationState("enableDeviceFlags", 1);
}

Save Flow

During report save/update addNewReport() includes enableDeviceFlags inside the payload sent to backend APIs. This persists the Machine Flag configuration for the test.

2. Viewing Machine Flags

A. Report Entry Modal

Machine Flags are displayed inside the Report Entry workflow while reviewing or editing pathology reports.

This is the primary screen where users interact with interfaced report values and validate machine-generated results before approval or submission.

Route

/operation/patients-waiting-list/all-tests/<labUserId>

Component Hierarchy

PatientWiseContainer
    ↓
PatientWiseReportListView
    ↓
ParticularPatientsTestListView
    ↓
PatientReport

File Reference:

src/components/reusable/Modals/Report/index.tsx

Data Fetching Flow

The Machine Flags data is fetched during component initialization. Inside PatientReport:

useEffect(() => {
  fetchData();
}, [selectedReport]);

The fetchData() method internally calls fetchReportsDataAPI() which then calls fetchReportsData()

getReportFormatForTestEntry API

This API is the primary source for Machine Flags data in Report Entry.

It returns:

• Report values
• Report formats
• Historical values
• Calculations
• QC values
• Test-level flags
• Parameter-level flags

API Signature

const getReportFormatForTestEntry = async (
  labReportId: number,
  isSigned: number,
  docLogin: number = 1,
  formatId: number = 0
)

API Response Structure

The API response contains a value: [] array. Each object inside this array represents a single report parameter value.

Machine Flags Data Structure

Test-Level Flags

Sample or report-level Machine Flags are stored in test_flags

Example:

"test_flags": [
  "DUMMY TEST FLAG1",
  "FLAG2"
]

These flags are repeated across report values for easier frontend rendering.

Parameter-Level Flags

Parameter-specific flags are stored in param_flags

Example:

"param_flags": [
  "P1",
  "H~N"
]

Example Parameter Value Object

{
  "index": 4,
  "value": 110.12,
  "device_name": "Alinity",
  "param_flags": ["P1", "H~N"],
  "test_flags": ["DUMMY TEST FLAG1", "FLAG2"],
  "automatedValue": 1
}

Edit Mode Rendering

Machine Flags are rendered while editing reports.

Test Flags Rendering Flow

EditReportView
    ↓
testFlagsRenderer

Parameter Flags Rendering Flow

EditReportView
    ↓
renderReportCell
    ↓
EditReportCell
    ↓
ReportRangeInput
    ↓
TestNameColumn

EditReportView Component

Responsibility

The EditReportView component handles editable pathology report rendering.

It processes:

• Report values
• Historical values
• QC values
• Machine Flags
• Parameter rendering

File Reference

src/components/reusable/Modals/Report/EditReportView/index.tsx

Test Flags Renderer

Test-level Machine Flags are rendered through testFlagsRenderer() These flags are displayed near the report header section.

Examples:

• Hemolyzed
• Clotted Sample
• Recheck Required

Parameter Flags Rendering

Parameter-level flags are rendered beside parameter names or values.

Examples:

• H
• L
• P1
• A++
• Critical

The rendering pipeline flows through reusable report cell components.

Read Mode Rendering

Machine Flags are also rendered in read-only report preview mode.

Test Flags Rendering Flow

ReadReportView
    ↓
testFlagsRenderer

Parameter Flags Rendering Flow

ReadReportView
    ↓
renderPathReport
    ↓
renderTopView

Rendering Architecture Summary

The Report Entry workflow uses:

B. Overview Section

Machine Flags are also displayed in the patient Overview section.

The Overview screen shows all patient reports in a consolidated view.

Component Hierarchy

PatientWiseContainer
    ↓
PatientWiseReportListView
    ↓
ParticularPatientsTestListView
    ↓
PatientWiseAllReports
    ↓
RenderReports

Data Fetching Flow

Inside PatientWiseAllReports component getInitialData() calls getPatientAllReports() This API fetches all report-related data for a patient.

API Response Structure

The API response contains report_result_mapper which stores all report values grouped by labReportId

Machine Flags Storage

Machine Flags are included directly inside each report value object.

Test-Level Flags

Stored in test_flags

Example:

"test_flags": [
  "DUMMY TEST FLAG1",
  "FLAG2"
]

Parameter-Level Flags

Stored in param_flags

Example:

"param_flags": [
  "A++"
]

Example Overview Report Value

{
  "index": 8,
  "value": 220000,
  "param_flags": ["A++"],
  "test_flags": ["DUMMY TEST FLAG1", "FLAG2"]
}

Overview Rendering Architecture

The Overview section reuses the same report rendering pipeline used in Report Entry.

This ensures:

• Shared Machine Flag rendering
• Consistent UI
• Reusable rendering logic

Edit Mode Rendering

Test Flags

EditReportView
    ↓
testFlagsRenderer

Parameter Flags

EditReportView
    ↓
renderReportCell
    ↓
EditReportCell
    ↓
ReportRangeInput
    ↓
TestNameColumn

Read Mode Rendering

Test Flags

ReadReportView
    ↓
testFlagsRenderer

Parameter Flags

ReadReportView
    ↓
renderPathReport
    ↓
renderTopView

C. Device Results Validation

Machine Flags are also displayed inside the Device Results Validation workflow.

This screen helps users validate interfaced device results before release or approval.

Route

/operation/device-results-validation/<deviceId>

Component Hierarchy

DeviceResultsForValidation
    ↓
Results

Data Fetching Flow

Inside Results component getDeviceResults() fetches all device validation result data.

API Flow

Results
    ↓
getDeviceResults()
    ↓
fetchDeviceResultsAPI()

getDeviceResults Responsibility

This method processes:

• Device results
• Related reports
• Patient details
• Report mappings
• Validation state
• Machine Flags

Machine Flags Data

The fetched device result objects contain:

These values originate from MongoDB-backed report values saved during interfacing.

Rendering Architecture

Test Flags

Rendered through groupRowRenderer This renderer displays sample-level flags for grouped report rows.

Parameter Flags

Rendered through parameterNameCellRenderer This renderer displays parameter-level flags beside parameter names.

Shared Machine Flag Architecture

All frontend screens share the same Machine Flag design principles:

Frontend Design Summary

The frontend Machine Flags implementation was designed using reusable rendering pipelines across:

• Report Entry
• Overview Reports
• Device Results Validation
• PDF Preview

This architecture ensures:

• Consistent Machine Flag rendering
• Shared UI behaviour
• Reusable React components
• Unified MongoDB-backed report rendering
• Consistent interfaced result handling