PopulationCalculation.tsx

import { Button, Center, Drawer, Group, Modal, Tooltip } from '@mantine/core';
import { useRecoilValue } from 'recoil';
import { Calculator, CalculatorTypes } from 'fqm-execution';
import { patientTestCaseState } from '../../state/atoms/patientTestCase';
import { measureBundleState } from '../../state/atoms/measureBundle';
import { useState } from 'react';
import { measurementPeriodFormattedState } from '../../state/atoms/measurementPeriod';
import { showNotification } from '@mantine/notifications';
import { IconAlertCircle, IconCircleCheck } from '@tabler/icons';
import { getPatientInfoString, getPatientNameString } from '../../util/fhir/patient';
import { createDataExchangeMeasureReport, createPatientBundle } from '../../util/fhir/resourceCreation';
import PopulationResultTable, { LabeledDetailedResult } from './PopulationResultsTable';
import { DetailedResult } from '../../util/types';
import { useRouter } from 'next/router';
import { trustMetaProfileState } from '../../state/atoms/trustMetaProfile';
import { useDisclosure } from '@mantine/hooks';
import { evaluationState } from '../../state/atoms/evaluation';
import { dataRequirementsLookupByType } from '../../state/selectors/dataRequirementsLookupByType';
import { minimizeTestCaseResources } from '../../util/ValueSetHelper';

export default function PopulationCalculation() {
  const router = useRouter();

  const currentPatients = useRecoilValue(patientTestCaseState);
  const measureBundle = useRecoilValue(measureBundleState);
  const measurementPeriodFormatted = useRecoilValue(measurementPeriodFormattedState);
  const { evaluationServiceUrl, evaluationMeasureId } = useRecoilValue(evaluationState);
  const drLookupByType = useRecoilValue(dataRequirementsLookupByType);
  const [detailedResults, setDetailedResults] = useState<LabeledDetailedResult[]>([]);
  const [drawerOpened, setDrawerOpened] = useState(false);
  const [opened, { open, close }] = useDisclosure(false);
  const [enableTableButton, setEnableTableButton] = useState(false);
  const [enableClauseCoverageButton, setEnableClauseCoverageButton] = useState(false);
  const [enableEvaluateButton, setEnableEvaluateButton] = useState(false);
  const [clauseCoverageHTML, setClauseCoverageHTML] = useState<string | null>(null);
  const [clauseUncoverageHTML, setClauseUncoverageHTML] = useState<string | null>(null);
  const trustMetaProfile = useRecoilValue(trustMetaProfileState);

  /**
   * Creates object that maps patient ids to their name/DOB info strings.
   * @returns { Object } mapping of patient ids to patient info labels
   */
  const createPatientLabels = () => {
    const patientLabels: Record<string, string> = {};
    Object.keys(currentPatients).forEach(id => {
      patientLabels[id] = getPatientInfoString(currentPatients[id].patient);
    });
    return patientLabels;
  };

  /**
   * POSTS patient data in conformance with https://build.fhir.org/ig/HL7/davinci-deqm/OperationDefinition-submit-data.html
   * without using Measure/$deqm-submit-data endpoint
   * Each transaction bundle should contain DEQM Data Exchange MeasureReports with data-of-interest
   * and should be for a single subject (will do a separate POST for each patient)
   * @returns { string|undefined[] } the evaluation service ids for POSTed patients (may be different than sent IDs or undefined if send was unsuccessful)
   */
  const submitDataToEvaluationService = async (): Promise<(string | undefined)[]> => {
    // collect data and POST to evaluation service (TODO: should be $submit-data when available)

    const measure = measureBundle.content?.entry?.find(e => e.resource?.resourceType === 'Measure')
      ?.resource as fhir4.Measure;

    const postedIds: Promise<string | undefined>[] = Object.keys(currentPatients).map(async id => {
      const bundle = createPatientBundle(
        currentPatients[id].patient,
        minimizeTestCaseResources(currentPatients[id], measureBundle.content, drLookupByType),
        currentPatients[id].fullUrl,
        createDataExchangeMeasureReport(measure, measurementPeriodFormatted as fhir4.Period, id)
      );
      const response = await fetch(`${evaluationServiceUrl}/`, {
        method: 'POST',
        body: JSON.stringify(bundle),
        headers: { 'Content-Type': 'application/json+fhir' }
      });
      const responseBody: fhir4.Bundle | fhir4.OperationOutcome = await response.json();
      if (responseBody.resourceType === 'OperationOutcome') {
        showNotification({
          icon: <IconAlertCircle />,
          title: 'Patient data submission failed',
          message: `Submitting data for Patient: ${getPatientNameString(
            currentPatients[id].patient
          )} failed with details: "${responseBody.issue[0].details?.text ?? response.status}"`,
          color: 'red'
        });
        return;
      }

      // should return transaction response bundles from which we can pull the posted patient id
      return responseBody.entry
        ?.find(e => e.response?.location?.includes('Patient/'))
        ?.response?.location?.split('Patient/')[1];
    });

    return Promise.all(postedIds);
  };

  /**
   * Wrapper function that calls submitDataToEvaluationService() and resolves patient data for future evaluation
   */
  const submitData = () => {
    submitDataToEvaluationService()
      .then(postedIds => {
        const resolvedIds = postedIds?.filter(id => id !== undefined);
        if (resolvedIds.length > 0) {
          showNotification({
            icon: <IconCircleCheck />,
            title: 'Successfully sent data',
            message: `Successfully sent data for ${resolvedIds.length} patients for measure ${evaluationMeasureId}`, //TODO: update to canonical, currently using evaluationMeasureId here whereas it will be used for $submit-data in the future
            color: 'green'
          });
          // TODO: use resolvedIds to populate evaluate modal
          setEnableEvaluateButton(true);
        } else {
          showNotification({
            icon: <IconAlertCircle />,
            title: 'No patient information',
            message: 'No patient information was successfully POSTed to the Evaluation Service',
            color: 'red'
          });
        }
      })
      .catch(e => {
        if (e instanceof Error) {
          showNotification({
            icon: <IconAlertCircle />,
            title: 'Data Submission Error',
            message: e.message,
            color: 'red'
          });
        }
      });
  };

  /**
   * Uses fqm-execution library to perform calculation on all patients and return their
   * detailed results.
   * @returns { Array | void } array of detailed results (if measure bundle is provided)
   */
  const calculateDetailedResults = async (): Promise<DetailedResult[] | void> => {
    // specify options for calculation
    const options: CalculatorTypes.CalculationOptions = {
      calculateHTML: false,
      calculateSDEs: true,
      calculateClauseCoverage: true,
      calculateClauseUncoverage: true,
      reportType: 'individual',
      measurementPeriodStart: measurementPeriodFormatted?.start,
      measurementPeriodEnd: measurementPeriodFormatted?.end,
      trustMetaProfile: trustMetaProfile
    };

    // get all patient bundles as array to feed into fqm-execution
    const patientBundles: fhir4.Bundle[] = [];
    Object.keys(currentPatients).forEach(id => {
      const bundle = createPatientBundle(currentPatients[id].patient, currentPatients[id].resources);
      patientBundles.push(bundle);
    });

    if (measureBundle.content) {
      const { results, groupClauseCoverageHTML, groupClauseUncoverageHTML } = await Calculator.calculate(
        measureBundle.content,
        patientBundles,
        options
      );
      if (groupClauseCoverageHTML) {
        setClauseCoverageHTML(JSON.stringify(groupClauseCoverageHTML));
      }
      if (groupClauseUncoverageHTML) {
        setClauseUncoverageHTML(JSON.stringify(groupClauseUncoverageHTML));
      }
      return results;
    } else return;
  };

  /**
   * Wrapper function that calls calculateDetailedResults() and creates the LabeledDetailedResult that will be used to render
   * the population results. Catches errors in fqm-execution that result from calculateDetailedResults().
   */
  const runCalculation = () => {
    calculateDetailedResults()
      .then(detailedResults => {
        if (detailedResults) {
          const patientLabels = createPatientLabels();
          const labeledDetailedResults: LabeledDetailedResult[] = [];
          detailedResults.forEach(dr => {
            const patientId = dr.patientId;
            labeledDetailedResults.push({
              label: patientId ? patientLabels[patientId] : '',
              detailedResult: dr as DetailedResult
            });
          });
          setDetailedResults(labeledDetailedResults);
          setDrawerOpened(true);
          setEnableTableButton(true);
          setEnableClauseCoverageButton(true);
        }
      })
      .catch(e => {
        if (e instanceof Error) {
          showNotification({
            icon: <IconAlertCircle />,
            title: 'Calculation Error',
            message: e.message,
            color: 'red'
          });
        }
      });
  };

  return (
    <>
      {Object.keys(currentPatients).length > 0 && measureBundle.content && (
        <Center>
          <Group position="center">
            <Button
              data-testid="calculate-all-button"
              aria-label="Calculate Population Results"
              styles={{ root: { marginTop: 20 } }}
              onClick={() => runCalculation()}
              variant="outline"
            >
              &nbsp;Calculate Population Results
            </Button>
            <Tooltip
              label="Disabled until calculation results are available"
              openDelay={1000}
              disabled={enableTableButton ? true : false}
            >
              <Button
                data-testid="show-table-button"
                aria-label="Show Table"
                styles={{ root: { marginTop: 20 } }}
                disabled={!enableTableButton}
                onClick={() => setDrawerOpened(true)}
                variant="outline"
              >
                &nbsp;Show Table
              </Button>
            </Tooltip>
            <Tooltip
              label="Disabled until calculation results are available"
              openDelay={1000}
              disabled={enableClauseCoverageButton}
            >
              <Button
                data-testid="show-coverage-button"
                aria-label="Show Clause Coverage"
                styles={{ root: { marginTop: 20 } }}
                disabled={!enableClauseCoverageButton}
                variant="outline"
                onClick={() => {
                  if (measureBundle.content) {
                    router.push(
                      {
                        pathname: `/${measureBundle.content.id}/coverage`,
                        query: {
                          clauseCoverageHTML,
                          clauseUncoverageHTML
                        }
                      },
                      `/${measureBundle.content.id}/coverage`
                    );
                  }
                }}
              >
                &nbsp;Show Clause Coverage
              </Button>
            </Tooltip>
            <Button
              data-testid="submit-data-button"
              aria-label="Submit Data"
              styles={{ root: { marginTop: 20 } }}
              onClick={() => submitData()}
              variant="outline"
            >
              &nbsp;Submit Data
            </Button>
            <Tooltip
              label="Disabled until data submission has succeeeded"
              openDelay={1000}
              disabled={enableEvaluateButton}
            >
              <Button
                data-testid="evaluate-button"
                aria-label="Evaluate"
                styles={{ root: { marginTop: 20 } }}
                disabled={!enableEvaluateButton}
                onClick={open}
                variant="outline"
              >
                &nbsp;Evaluate
              </Button>
            </Tooltip>
          </Group>
          {detailedResults.length > 0 && (
            <>
              <Drawer
                opened={drawerOpened}
                onClose={() => setDrawerOpened(false)}
                position="bottom"
                padding="md"
                overlayProps={{
                  opacity: 0.3
                }}
                lockScroll={false}
                size="lg"
                styles={{
                  body: {
                    height: '100%'
                  }
                }}
              >
                <h2>Population Results</h2>
                <div
                  data-testid="results-table"
                  style={{
                    height: '100%',
                    overflow: 'scroll'
                  }}
                >
                  <PopulationResultTable results={detailedResults} />
                </div>
              </Drawer>
            </>
          )}
          <Modal centered size="xl" withCloseButton={true} opened={opened} onClose={close} title="Evaluate">
            TODO: Evaluate Modal
          </Modal>
        </Center>
      )}
    </>
  );
}