@medplum/react 2.0.4 → 2.0.6

package/dist/cjs/index.cjs

@@ -315,7 +315,7 @@
     }
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var defaultAttributes = {
@@ -331,7 +331,7 @@
     };
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var __defProp = Object.defineProperty;
@@ -394,7 +394,7 @@
     };
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconAdjustmentsHorizontal = createReactComponent(
@@ -414,7 +414,7 @@
     );
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconAlertCircle = createReactComponent("alert-circle", "IconAlertCircle", [
@@ -424,7 +424,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconBleachOff = createReactComponent("bleach-off", "IconBleachOff", [
@@ -439,7 +439,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconBleach = createReactComponent("bleach", "IconBleach", [
@@ -453,7 +453,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconBoxMultiple = createReactComponent("box-multiple", "IconBoxMultiple", [
@@ -474,7 +474,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconBracketsContain = createReactComponent("brackets-contain", "IconBracketsContain", [
@@ -486,7 +486,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconBucketOff = createReactComponent("bucket-off", "IconBucketOff", [
@@ -508,7 +508,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconBucket = createReactComponent("bucket", "IconBucket", [
@@ -523,7 +523,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconCalendar = createReactComponent("calendar", "IconCalendar", [
@@ -542,7 +542,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconCheck = createReactComponent("check", "IconCheck", [
@@ -550,7 +550,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconCheckbox = createReactComponent("checkbox", "IconCheckbox", [
@@ -565,7 +565,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconCircleMinus = createReactComponent("circle-minus", "IconCircleMinus", [
@@ -574,7 +574,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconCirclePlus = createReactComponent("circle-plus", "IconCirclePlus", [
@@ -584,7 +584,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconCloudUpload = createReactComponent("cloud-upload", "IconCloudUpload", [
@@ -600,7 +600,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconColumns = createReactComponent("columns", "IconColumns", [
@@ -615,7 +615,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconCurrencyDollar = createReactComponent("currency-dollar", "IconCurrencyDollar", [
@@ -630,7 +630,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconDots = createReactComponent("dots", "IconDots", [
@@ -640,7 +640,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconEdit = createReactComponent("edit", "IconEdit", [
@@ -662,7 +662,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconEqualNot = createReactComponent("equal-not", "IconEqualNot", [
@@ -672,7 +672,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconEqual = createReactComponent("equal", "IconEqual", [
@@ -681,7 +681,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconFileAlert = createReactComponent("file-alert", "IconFileAlert", [
@@ -698,7 +698,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconFilePlus = createReactComponent("file-plus", "IconFilePlus", [
@@ -715,7 +715,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconFilter = createReactComponent("filter", "IconFilter", [
@@ -729,7 +729,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconListDetails = createReactComponent("list-details", "IconListDetails", [
@@ -754,7 +754,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconMathGreater = createReactComponent("math-greater", "IconMathGreater", [
@@ -762,7 +762,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconMathLower = createReactComponent("math-lower", "IconMathLower", [
@@ -770,7 +770,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconMessage = createReactComponent("message", "IconMessage", [
@@ -786,7 +786,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconPin = createReactComponent("pin", "IconPin", [
@@ -802,7 +802,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconPinnedOff = createReactComponent("pinned-off", "IconPinnedOff", [
@@ -819,7 +819,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconSettings = createReactComponent("settings", "IconSettings", [
@@ -834,7 +834,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconSortAscending = createReactComponent("sort-ascending", "IconSortAscending", [
@@ -846,7 +846,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconSortDescending = createReactComponent("sort-descending", "IconSortDescending", [
@@ -858,21 +858,21 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconSquare = createReactComponent("square", "IconSquare", [
       [
         "path",
         {
-          d: "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z",
+          d: "M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
           key: "svg-0"
         }
       ]
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconTableExport = createReactComponent("table-export", "IconTableExport", [
@@ -886,7 +886,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconTrash = createReactComponent("trash", "IconTrash", [
@@ -901,7 +901,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.4.0 - MIT
+     * @tabler/icons-react v2.6.0 - MIT
      */
 
     var IconX = createReactComponent("x", "IconX", [
@@ -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" }),
@@ -1745,10 +1747,10 @@
             if (typeof to === 'string') {
                 return getStringHref(to);
             }
-            else if ('resourceType' in to) {
+            else if (core.isResource(to)) {
                 return getResourceHref(to);
             }
-            else if ('reference' in to) {
+            else if (core.isReference(to)) {
                 return getReferenceHref(to);
             }
         }
@@ -1942,78 +1944,57 @@
      */
     function useResource(value, setOutcome) {
         const medplum = useMedplum();
-        const referenceRef = React.useRef(undefined);
-        const resourceRef = React.useRef(undefined);
-        // Parse the input value into a reference and resource
-        parseValue(value, referenceRef, resourceRef);
-        // Priority order:
-        // 1. Cached reference
-        // 2. Resource passed in as-is
-        // 3. Undefined
-        const currentResource = getCurrentValue(medplum, referenceRef, resourceRef);
-        // Keep track of the previous resource
-        // This is used to detect when the resource has changed
-        // We need a React "state" variable to trigger a re-render
-        const [prevResource, forceRerender] = React.useState(currentResource);
-        // Subscribe to changes to the passed-in value
+        const [resource, setResource] = React.useState(getInitialResource(medplum, value));
+        const setResourceIfChanged = React.useCallback((r) => {
+            if (!core.deepEquals(r, resource)) {
+                setResource(r);
+            }
+        }, [resource, setResource]);
         React.useEffect(() => {
-            if (referenceRef.current) {
+            setResourceIfChanged(getInitialResource(medplum, value));
+        }, [medplum, value, setResourceIfChanged]);
+        React.useEffect(() => {
+            let subscribed = true;
+            if (core.isReference(value)) {
                 medplum
-                    .readReference(referenceRef.current)
-                    .then((newValue) => {
-                    if (!core.deepEquals(newValue, prevResource)) {
-                        forceRerender(newValue);
+                    .readReference(value)
+                    .then((r) => {
+                    if (subscribed) {
+                        setResourceIfChanged(r);
                     }
                 })
                     .catch((err) => {
-                    if (setOutcome) {
-                        setOutcome(err);
+                    if (subscribed) {
+                        setResourceIfChanged(undefined);
+                        if (setOutcome) {
+                            setOutcome(core.normalizeOperationOutcome(err));
+                        }
                     }
                 });
             }
-        }, [medplum, prevResource, value, setOutcome]);
-        return currentResource;
+            return (() => (subscribed = false));
+        }, [medplum, resource, value, setResourceIfChanged, setOutcome]);
+        return resource;
     }
     /**
-     * Parses the input into a reference and resource.
-     * @param value The input value to parse. Can be either a reference or a resource.
-     * @param referenceRef The output reference.
-     * @param resourceRef The output resource.
+     * Returns the initial resource value based on the input value.
+     * If the input value is a resource, returns the resource.
+     * If the input value is a reference to a resource available in the cache, returns the resource.
+     * Otherwise, returns undefined.
+     * @param medplum The medplum client.
+     * @param value The resource or reference to resource.
+     * @returns An initial resource if available; undefined otherwise.
      */
-    function parseValue(value, referenceRef, resourceRef) {
-        // Reset the reference and resource
-        referenceRef.current = undefined;
-        resourceRef.current = undefined;
-        if (!value) {
-            return;
-        }
-        if ('reference' in value) {
-            // If the input is a reference then we can use it as-is
-            referenceRef.current = value;
-        }
-        else if ('resourceType' in value) {
-            resourceRef.current = value;
-            if ('id' in value) {
-                // If the input is a resource with an ID, then we can still create a reference
-                referenceRef.current = { reference: value.resourceType + '/' + value.id };
+    function getInitialResource(medplum, value) {
+        if (value) {
+            if (core.isResource(value)) {
+                return value;
+            }
+            if (core.isReference(value)) {
+                return medplum.getCachedReference(value);
             }
         }
-    }
-    /**
-     * Returns the best currently available value.
-     * This is ***not*** asynchronous and returns immediately.
-     * It attempts to return the value from the cache, or the resource passed in as-is.
-     * @param medplum The Medplum client.
-     * @param referenceRef The reference.
-     * @param resourceRef The resource.
-     * @returns The currently available value.
-     */
-    function getCurrentValue(medplum, referenceRef, resourceRef) {
-        // Priority order:
-        // 1. Cached reference
-        // 2. Resource passed in as-is
-        // 3. Undefined
-        return (referenceRef.current && medplum.getCachedReference(referenceRef.current)) || resourceRef.current;
+        return undefined;
     }
 
     function ResourceForm(props) {
@@ -2023,7 +2004,7 @@
         const [value, setValue] = React.useState();
         React.useEffect(() => {
             if (defaultValue) {
-                setValue(JSON.parse(JSON.stringify(defaultValue)));
+                setValue(core.deepClone(defaultValue));
                 medplum.requestSchema(defaultValue.resourceType).then(setSchema).catch(console.log);
             }
         }, [medplum, defaultValue]);
@@ -3072,12 +3053,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 +3154,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 +3184,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 +3236,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 +3260,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 +5064,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 +5157,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();
@@ -5853,7 +5884,7 @@
         const { classes, cx } = useStyles$4();
         const resource = props.item;
         const item = props.item;
-        const isResource = 'resourceType' in props.item;
+        const isResource = core.isResource(props.item);
         const isContainer = isResource || item.type === exports.QuestionnaireItemType.group;
         const linkId = item.linkId ?? '[untitled]';
         const editing = props.selectedKey === props.item.id;