FHIRPath Editor

A React component library for editing and evaluating FHIRPath expressions with real-time feedback.

Online Demo

Try the interactive demo at https://healthsamurai.github.io/fhirpath-editor/

Installation

npm install fhirpath-editor
# or
yarn add fhirpath-editor

Usage

The library provides an Editor component for working with FHIRPath expressions:

Uncontrolled Component (with defaultValue)

import { Editor } from "fhirpath-editor";
import r4 from "fhirpath/fhir-context/r4";

function MyFhirPathEditor() {
  // FHIRPath expression to evaluate
  const defaultExpr = "(1 + 2) * 3";
  const handleChange = (newValue) =>
    console.log("Expression changed:", newValue);

  // Simple FHIR resource to evaluate FHIRPath against
  const data = {
    resourceType: "Patient",
    id: "example",
    name: [
      {
        family: "Smith",
        given: ["John"],
      },
    ],
    birthDate: "1970-01-01",
  };

  const fhirSchema = []; // Replace with actual schema data

  return (
    <Editor
      defaultValue={defaultExpr}
      onChange={handleChange}
      data={data}
      schema={fhirSchema}
      model={r4}
    />
  );
}

Controlled Component (with value)

import { Editor } from "fhirpath-editor";
import r4 from "fhirpath/fhir-context/r4";
import { useState } from "react";

function MyFhirPathEditor() {
  // FHIRPath expression state
  const [expression, setExpression] = useState("(1 + 2) * 3");

  // Simple FHIR resource to evaluate FHIRPath against
  const data = {
    resourceType: "Patient",
    id: "example",
    name: [
      {
        family: "Smith",
        given: ["John"],
      },
    ],
    birthDate: "1970-01-01",
  };

  const fhirSchema = []; // Replace with actual schema data

  return (
    <Editor
      value={expression}
      onChange={setExpression}
      data={data}
      schema={fhirSchema}
      model={r4}
    />
  );
}

Props

| Prop | Type | Required | Description | | -------------- | ----------------------- | -------- | ----------------------------------------------- | | value | string | No | Current FHIRPath expression (controlled mode) | | defaultValue | string | No | Initial FHIRPath expression (uncontrolled mode) | | onChange | (value: string) => void | No | Callback for expression changes | | data | any | Yes | The context data to evaluate FHIRPath against | | variables | Record<string, any> | No | External bindings available to expressions | | schema | FhirSchema[] | Yes | FHIR schema definitions for validation | | model | Model | Yes | FHIR version model data | | debug | boolean | No | Enable debug mode |

Component Modes

The Editor component supports both controlled and uncontrolled modes:

• Controlled Mode: Provide the value prop and handle changes with onChange.
• Uncontrolled Mode: Provide only the defaultValue prop (initial value) and optionally handle changes with onChange.

Note: Do not provide both value and defaultValue at the same time. If both are provided, defaultValue will be ignored and a warning will be logged to the console.

Features

• Low-code environment for developing and testing FHIRPath expressions
• Interactive visual editor with instant feedback
• Real-time evaluation against FHIR resources
• Support for external variable bindings
• Schema-based validation with autocomplete suggestions
• Syntax highlighting and error detection
• Reduces development time for complex FHIRPath queries

Todo

• [x] Support $total special variable
• [x] Support type evaluation of aggregate call
• [ ] Support dynamic index access
• [ ] Support unit token