@medplum/react 2.0.4 → 2.0.5

package/dist/cjs/index.cjs

@@ -1441,7 +1441,7 @@
                 remember: formData.remember === 'on',
             })
                 .then(handleAuthResponse)
-                .catch(setOutcome);
+                .catch((err) => setOutcome(core.normalizeOperationOutcome(err)));
         }, [medplum, baseLoginRequest, handleAuthResponse]);
         return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: handleSubmit },
             React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, children),
@@ -1456,10 +1456,12 @@
 
     function ChooseProfileForm(props) {
         const medplum = useMedplum();
+        const [outcome, setOutcome] = React.useState();
         return (React.createElement(core$1.Stack, null,
             React.createElement(core$1.Center, { sx: { flexDirection: 'column' } },
                 React.createElement(Logo, { size: 32 }),
-                React.createElement(core$1.Title, null, "Choose profile")),
+                React.createElement(core$1.Title, { order: 3 }, "Choose profile")),
+            React.createElement(OperationOutcomeAlert, { outcome: outcome }),
             props.memberships.map((membership) => (React.createElement(core$1.UnstyledButton, { key: membership.id, onClick: () => {
                     medplum
                         .post('auth/profile', {
@@ -1467,7 +1469,7 @@
                         profile: membership.id,
                     })
                         .then(props.handleAuthResponse)
-                        .catch(console.log);
+                        .catch((err) => setOutcome(core.normalizeOperationOutcome(err)));
                 } },
                 React.createElement(core$1.Group, null,
                     React.createElement(core$1.Avatar, { radius: "xl" }),
@@ -1944,6 +1946,7 @@
         const medplum = useMedplum();
         const referenceRef = React.useRef(undefined);
         const resourceRef = React.useRef(undefined);
+        const lastRequestedRef = React.useRef(undefined);
         // Parse the input value into a reference and resource
         parseValue(value, referenceRef, resourceRef);
         // Priority order:
@@ -1957,7 +1960,8 @@
         const [prevResource, forceRerender] = React.useState(currentResource);
         // Subscribe to changes to the passed-in value
         React.useEffect(() => {
-            if (referenceRef.current) {
+            if (referenceRef.current && referenceRef.current.reference !== lastRequestedRef.current) {
+                lastRequestedRef.current = referenceRef.current.reference;
                 medplum
                     .readReference(referenceRef.current)
                     .then((newValue) => {
@@ -1967,7 +1971,7 @@
                 })
                     .catch((err) => {
                     if (setOutcome) {
-                        setOutcome(err);
+                        setOutcome(core.normalizeOperationOutcome(err));
                     }
                 });
             }
@@ -3072,12 +3076,19 @@
 
     function ResourceName(props) {
         const { value, link, ...rest } = props;
-        const resource = useResource(value);
-        if (!resource) {
+        const [outcome, setOutcome] = React.useState();
+        const resource = useResource(value, setOutcome);
+        let text;
+        if (outcome && !core.isOk(outcome)) {
+            text = `[${core.normalizeErrorString(outcome)}]`;
+        }
+        else if (resource) {
+            text = core.getDisplayString(resource);
+        }
+        else {
             return null;
         }
-        const text = core.getDisplayString(resource);
-        return link ? (React.createElement(MedplumLink, { to: resource, ...rest }, text)) : (React.createElement(core$1.Text, { component: "span", ...rest }, text));
+        return link ? (React.createElement(MedplumLink, { to: value, ...rest }, text)) : (React.createElement(core$1.Text, { component: "span", ...rest }, text));
     }
 
     function ResourceBadge(props) {
@@ -3166,13 +3177,28 @@
         noteCite: { fontSize: theme.fontSizes.xs, marginBlockStart: 3 },
         noteRoot: { padding: 5 },
     }));
+    DiagnosticReportDisplay.defaultProps = {
+        hideObservationNotes: false,
+        hideSpecimenInfo: false,
+    };
     function DiagnosticReportDisplay(props) {
+        const medplum = useMedplum();
         const diagnosticReport = useResource(props.value);
-        const specimen = useResource(diagnosticReport?.specimen?.[0]);
+        const [specimens, setSpecimens] = React.useState();
+        React.useEffect(() => {
+            if (diagnosticReport?.specimen) {
+                Promise.allSettled(diagnosticReport.specimen.map((ref) => medplum.readReference(ref)))
+                    .then((outcomes) => outcomes
+                    .filter((outcome) => outcome.status === 'fulfilled')
+                    .map((outcome) => outcome.value))
+                    .then(setSpecimens)
+                    .catch(console.error);
+            }
+        }, [medplum, diagnosticReport]);
         if (!diagnosticReport) {
             return null;
         }
-        const specimenNotes = specimen?.note || [];
+        const specimenNotes = specimens?.flatMap((spec) => spec.note || []) || [];
         if (diagnosticReport.presentedForm && diagnosticReport.presentedForm.length > 0) {
             const pf = diagnosticReport.presentedForm[0];
             if (pf.contentType?.startsWith('text/plain') && pf.data) {
@@ -3181,25 +3207,48 @@
         }
         return (React.createElement(core$1.Stack, null,
             React.createElement(core$1.Title, null, "Diagnostic Report"),
-            React.createElement(core$1.Group, { mt: "md", spacing: 30 },
-                diagnosticReport.subject && (React.createElement("div", null,
-                    React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Subject"),
-                    React.createElement(core$1.Text, null,
-                        React.createElement(ResourceBadge, { value: diagnosticReport.subject, link: true })))),
-                diagnosticReport.resultsInterpreter &&
-                    diagnosticReport.resultsInterpreter.map((interpreter) => (React.createElement("div", { key: interpreter.reference },
-                        React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Interpreter"),
-                        React.createElement(core$1.Text, null,
-                            React.createElement(ResourceBadge, { value: interpreter, link: true }))))),
-                diagnosticReport.issued && (React.createElement("div", null,
-                    React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Issued"),
-                    React.createElement(core$1.Text, null, core.formatDateTime(diagnosticReport.issued)))),
-                diagnosticReport.status && (React.createElement("div", null,
-                    React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Status"),
-                    React.createElement(core$1.Text, null, core.capitalize(diagnosticReport.status))))),
+            React.createElement(DiagnosticReportHeader, { value: diagnosticReport }),
+            !props.hideSpecimenInfo && SpecimenInfo(specimens),
             diagnosticReport.result && (React.createElement(ObservationTable, { hideObservationNotes: props.hideObservationNotes, value: diagnosticReport.result })),
             specimenNotes.length > 0 && React.createElement(NoteDisplay, { value: specimenNotes })));
     }
+    function DiagnosticReportHeader({ value }) {
+        return (React.createElement(core$1.Group, { mt: "md", spacing: 30 },
+            value.subject && (React.createElement("div", null,
+                React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Subject"),
+                React.createElement(core$1.Text, null,
+                    React.createElement(ResourceBadge, { value: value.subject, link: true })))),
+            value.resultsInterpreter &&
+                value.resultsInterpreter.map((interpreter) => (React.createElement("div", { key: interpreter.reference },
+                    React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Interpreter"),
+                    React.createElement(core$1.Text, null,
+                        React.createElement(ResourceBadge, { value: interpreter, link: true }))))),
+            value.performer &&
+                value.performer.map((performer) => (React.createElement("div", { key: performer.reference },
+                    React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Performer"),
+                    React.createElement(core$1.Text, null,
+                        React.createElement(ResourceBadge, { value: performer, link: true }))))),
+            value.issued && (React.createElement("div", null,
+                React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Issued"),
+                React.createElement(core$1.Text, null, core.formatDateTime(value.issued)))),
+            value.status && (React.createElement("div", null,
+                React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Status"),
+                React.createElement(core$1.Text, null, core.capitalize(value.status))))));
+    }
+    function SpecimenInfo(specimens) {
+        return (React.createElement(core$1.Stack, { spacing: 'xs' },
+            React.createElement(core$1.Title, { order: 2, size: "h6" }, "Specimens"),
+            React.createElement(core$1.List, { type: "ordered" }, specimens?.map((specimen, index) => (React.createElement(core$1.List.Item, { ml: 'sm', key: `specimen-${specimen.id}-${index}` },
+                React.createElement(core$1.Group, { spacing: 20 },
+                    React.createElement(core$1.Group, { spacing: 5 },
+                        React.createElement(core$1.Text, { fw: 500 }, "Collected:"),
+                        " ",
+                        core.formatDateTime(specimen.collection?.collectedDateTime)),
+                    React.createElement(core$1.Group, { spacing: 5 },
+                        React.createElement(core$1.Text, { fw: 500 }, "Received:"),
+                        " ",
+                        core.formatDateTime(specimen.receivedTime)))))))));
+    }
     function ObservationTable(props) {
         const { classes } = useStyles$9();
         return (React.createElement("table", { className: classes.table },
@@ -3210,8 +3259,9 @@
                     React.createElement("th", null, "Reference Range"),
                     React.createElement("th", null, "Interpretation"),
                     React.createElement("th", null, "Category"),
+                    React.createElement("th", null, "Performer"),
                     React.createElement("th", null, "Status"))),
-            React.createElement("tbody", null, props.value?.map((observation, index) => (React.createElement(ObservationRow, { key: `obs-${index}-${observation.id}`, hideObservationNotes: props.hideObservationNotes, value: observation }))))));
+            React.createElement("tbody", null, props.value?.map((observation, index) => (React.createElement(ObservationRow, { key: `obs-${observation.id}-${index}`, hideObservationNotes: props.hideObservationNotes, value: observation }))))));
     }
     function ObservationRow(props) {
         const { classes, cx } = useStyles$9();
@@ -3233,9 +3283,10 @@
                 React.createElement("td", null, observation.interpretation && observation.interpretation.length > 0 && (React.createElement(CodeableConceptDisplay, { value: observation.interpretation[0] }))),
                 React.createElement("td", null, observation.category && observation.category.length > 0 && (React.createElement("ul", null, observation.category.map((concept, index) => (React.createElement("li", { key: `category-${index}` },
                     React.createElement(CodeableConceptDisplay, { value: concept }))))))),
+                React.createElement("td", null, observation.performer?.map((performer) => (React.createElement(ReferenceDisplay, { key: performer?.reference, value: performer })))),
                 React.createElement("td", null, observation.status && React.createElement(StatusBadge, { status: observation.status }))),
             displayNotes && (React.createElement("tr", null,
-                React.createElement("td", { colSpan: 5 },
+                React.createElement("td", { colSpan: 6 },
                     React.createElement(NoteDisplay, { value: observation.note }))))));
     }
     function ObservationValueDisplay(props) {
@@ -5036,7 +5087,7 @@
                         React.createElement("input", { type: "checkbox", value: "checked", "data-testid": "row-checkbox", "aria-label": `Checkbox for ${resource.id}`, checked: !!state.selected[resource.id], onChange: (e) => handleSingleCheckboxClick(e, resource.id) }))),
                     fields.map((field) => (React.createElement("td", { key: field.name }, renderValue(resource, field))))))))),
             resources?.length === 0 && (React.createElement(Container, null,
-                React.createElement(core$1.Center, null,
+                React.createElement(core$1.Center, { style: { height: 150 } },
                     React.createElement(core$1.Text, { size: "xl", color: "dimmed" }, "No results")))),
             lastResult?.total !== undefined && lastResult.total > 0 && (React.createElement(core$1.Center, { m: "md", p: "md" },
                 React.createElement(core$1.Pagination, { page: getPage(search), total: getTotalPages(search, lastResult.total), onChange: (newPage) => emitSearchChange(setPage(search, newPage)), getItemAriaLabel: (page) => {
@@ -5129,7 +5180,10 @@
         selectedRef.current = selected;
         React.useEffect(() => {
             setOutcome(undefined);
-            medplum.graphql(query).then(setResponse).catch(setOutcome);
+            medplum
+                .graphql(query)
+                .then(setResponse)
+                .catch((err) => setOutcome(core.normalizeOperationOutcome(err)));
         }, [medplum, query]);
         function handleSingleCheckboxClick(e, id) {
             e.stopPropagation();