@openmrs/esm-report-builder 0.1.1-pre.101

package/src/components/indicators/diagnosis-filters-form.component.tsx

@@ -0,0 +1,101 @@
+/*
+import React from 'react';
+import { Select, SelectItem, TextInput } from '@carbon/react';
+
+import ConceptSearchMultiSelect, { SelectedConcept } from './concept-search-multiselect.component';
+import type { DiagnosisBaseConfig } from './types/indicator-types';
+
+type Props = {
+    value: DiagnosisBaseConfig;
+    onChange: (next: DiagnosisBaseConfig) => void;
+};
+
+export default function DiagnosisFiltersForm({ value, onChange }: Props) {
+    const onChangeConcepts = (selected: SelectedConcept[]) => {
+        // Use a for-loop to avoid any surprises and to keep behavior explicit.
+        const conceptIds: number[] = [];
+        const conceptUuids: string[] = [];
+        const conceptLabels: string[] = [];
+        const icd10Codes: string[] = [];
+        const icd11Codes: string[] = [];
+
+        for (const x of selected ?? []) {
+            // IDs (warehouse join)
+            const idNum = Number((x as any)?.id);
+            if (Number.isFinite(idNum) && idNum > 0) {
+                conceptIds.push(idNum);
+            }
+
+            // Labels / uuids
+            if (x?.uuid) conceptUuids.push(x.uuid);
+            if (x?.display) conceptLabels.push(x.display);
+
+            // Optional metadata
+            if (x?.icd10Code) icd10Codes.push(x.icd10Code);
+            if (x?.icd11Code) icd11Codes.push(x.icd11Code);
+        }
+
+        onChange({
+            ...value,
+            // ✅ self-contained selection (survives search reset)
+            selectedConcepts: selected ?? [],
+
+            // ✅ derived fields used by SQL builder + UI
+            conceptIds,
+            conceptUuids,
+            conceptLabels,
+            icd10Codes,
+            icd11Codes,
+        });
+    };
+
+    return (
+        <>
+            <div style={{ fontWeight: 600 }}>Diagnosis filters</div>
+
+            <ConceptSearchMultiSelect
+                id="diag-concepts"
+                labelText="Diagnosis concept(s)"
+                helperText="Search OpenMRS concepts and add one or more. ICD codes are shown to help you choose."
+                // ✅ Pass the full self-contained objects
+                value={value.selectedConcepts ?? []}
+                onChange={onChangeConcepts}
+            />
+
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem', marginTop: '0.75rem' }}>
+                <Select
+                    id="diag-certainty"
+                    labelText="Certainty"
+                    value={value.certainty}
+                    onChange={(e) =>
+                        onChange({
+                            ...value,
+                            certainty: (e.target as HTMLSelectElement).value as DiagnosisBaseConfig['certainty'],
+                        })
+                    }
+                >
+                    <SelectItem value="PROVISIONAL" text="PROVISIONAL" />
+                    <SelectItem value="CONFIRMED" text="CONFIRMED" />
+                </Select>
+            </div>
+
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem', marginTop: '0.75rem' }}>
+                <TextInput
+                    id="diag-ranks"
+                    labelText="Diagnosis ranks (CSV)"
+                    helperText="Example: 1,2"
+                    value={value.dxRanksCsv}
+                    onChange={(e) => onChange({ ...value, dxRanksCsv: (e.target as HTMLInputElement).value })}
+                />
+
+                <TextInput
+                    id="diag-derived-ids"
+                    labelText="Derived diagnosis_coded IDs"
+                    helperText="Uses concept.id (perfect warehouse join)."
+                    value={value.conceptIds?.length ? value.conceptIds.join(',') : ''}
+                    readOnly
+                />
+            </div>
+        </>
+    );
+}*/

package/src/components/indicators/disaggregation-panel.component.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Checkbox } from '@carbon/react';
+
+export type DisaggregationState = {
+    gender: { enabled: boolean; male: boolean; female: boolean };
+    ageGroups: { enabled: boolean; g0_4: boolean; g5_14: boolean; g15_24: boolean; g25plus: boolean };
+};
+
+type Props = {
+    value: DisaggregationState;
+    onChange: (next: DisaggregationState) => void;
+};
+
+function readChecked(arg1: any, arg2?: any): boolean {
+    // Carbon Checkbox `onChange` differs by version:
+    // - sometimes (checked, id, event)
+    // - sometimes (event, { checked, id })
+    if (typeof arg1 === 'boolean') return arg1;
+    if (arg2 && typeof arg2.checked === 'boolean') return arg2.checked;
+    return Boolean(arg1?.target?.checked);
+}
+
+const DisaggregationPanel: React.FC<Props> = ({ value, onChange }) => {
+    const set = (patch: Partial<DisaggregationState>) => onChange({ ...value, ...patch });
+
+    return (
+        <div style={{ border: '1px solid var(--cds-border-subtle, #e0e0e0)', borderRadius: 8, padding: '0.75rem' }}>
+            <div style={{ fontWeight: 600, marginBottom: '0.5rem' }}>Disaggregation</div>
+
+            <Checkbox
+                id="gender-enabled"
+                labelText="Gender"
+                checked={value.gender.enabled}
+                onChange={(a, b) => set({ gender: { ...value.gender, enabled: readChecked(a, b) } })}
+            />
+            <div style={{ display: 'flex', gap: '1rem', paddingLeft: '1.5rem', marginBottom: '0.75rem' }}>
+                <Checkbox
+                    id="male"
+                    labelText="Male"
+                    disabled={!value.gender.enabled}
+                    checked={value.gender.male}
+                    onChange={(a, b) => set({ gender: { ...value.gender, male: readChecked(a, b) } })}
+                />
+                <Checkbox
+                    id="female"
+                    labelText="Female"
+                    disabled={!value.gender.enabled}
+                    checked={value.gender.female}
+                    onChange={(a, b) => set({ gender: { ...value.gender, female: readChecked(a, b) } })}
+                />
+            </div>
+
+            <Checkbox
+                id="age-enabled"
+                labelText="Age Groups"
+                checked={value.ageGroups.enabled}
+                onChange={(a, b) => set({ ageGroups: { ...value.ageGroups, enabled: readChecked(a, b) } })}
+            />
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem', paddingLeft: '1.5rem' }}>
+                <Checkbox
+                    id="g0_4"
+                    labelText="0-4"
+                    disabled={!value.ageGroups.enabled}
+                    checked={value.ageGroups.g0_4}
+                    onChange={(a, b) => set({ ageGroups: { ...value.ageGroups, g0_4: readChecked(a, b) } })}
+                />
+                <Checkbox
+                    id="g5_14"
+                    labelText="5-14"
+                    disabled={!value.ageGroups.enabled}
+                    checked={value.ageGroups.g5_14}
+                    onChange={(a, b) => set({ ageGroups: { ...value.ageGroups, g5_14: readChecked(a, b) } })}
+                />
+                <Checkbox
+                    id="g15_24"
+                    labelText="15-24"
+                    disabled={!value.ageGroups.enabled}
+                    checked={value.ageGroups.g15_24}
+                    onChange={(a, b) => set({ ageGroups: { ...value.ageGroups, g15_24: readChecked(a, b) } })}
+                />
+                <Checkbox
+                    id="g25plus"
+                    labelText="25+"
+                    disabled={!value.ageGroups.enabled}
+                    checked={value.ageGroups.g25plus}
+                    onChange={(a, b) => set({ ageGroups: { ...value.ageGroups, g25plus: readChecked(a, b) } })}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default DisaggregationPanel;

package/src/components/indicators/handler/concept-search-multiselect.component.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { ComboBox, InlineLoading, Tag } from '@carbon/react';
+
+import { useConceptSearch } from '../../../resources/concepts/useConceptSearch';
+import type { ConceptSummary } from '../../../resources/concepts/concept-types';
+
+export type SelectedConcept = {
+    id: number;
+    uuid: string;
+    display: string;
+
+    icd10Code?: string;
+    icd11Code?: string;
+
+    conceptClass?: string;
+    datatype?: string;
+};
+
+type Props = {
+    id: string;
+    labelText: string;
+    helperText?: string;
+
+    /** FULL selected objects (self-contained). */
+    value: SelectedConcept[];
+
+    /** emits FULL selections */
+    onChange: (next: SelectedConcept[]) => void;
+};
+
+function extractCodeFromMappingDisplay(mappingDisplay: string, systemPrefix: string) {
+    const raw = (mappingDisplay ?? '').trim();
+    const prefix = `${systemPrefix}:`;
+    if (!raw.startsWith(prefix)) return undefined;
+
+    const remainder = raw.slice(prefix.length).trim();
+    if (!remainder) return undefined;
+
+    const token = remainder.split(' ')[0]?.split('(')[0]?.trim();
+    return token || undefined;
+}
+
+function getIcd10And11(concept: ConceptSummary) {
+    const mappings = concept.mappings ?? [];
+    let icd10: string | undefined;
+    let icd11: string | undefined;
+
+    for (const m of mappings) {
+        const disp = m?.display ?? '';
+        if (!icd10) icd10 = extractCodeFromMappingDisplay(disp, 'ICD-10-WHO');
+        if (!icd11) icd11 = extractCodeFromMappingDisplay(disp, 'ICD-11-WHO');
+        if (icd10 && icd11) break;
+    }
+
+    return { icd10Code: icd10, icd11Code: icd11 };
+}
+
+export function toSelectedConcept(c: ConceptSummary): SelectedConcept {
+    const { icd10Code, icd11Code } = getIcd10And11(c);
+
+    return {
+        id: Number(c.id) || 0,
+        uuid: c.uuid,
+        display: c.display,
+        icd10Code,
+        icd11Code,
+        conceptClass: c.conceptClass?.name,
+        datatype: c.datatype?.name,
+    };
+}
+
+function itemToString(c: ConceptSummary | null) {
+    if (!c) return '';
+    const { icd10Code, icd11Code } = getIcd10And11(c);
+
+    const bits: string[] = [];
+    if (icd10Code) bits.push(`ICD-10:${icd10Code}`);
+    if (icd11Code) bits.push(`ICD-11:${icd11Code}`);
+    if (c.conceptClass?.name) bits.push(c.conceptClass.name);
+
+    return bits.length ? `${c.display} • ${bits.join(' • ')}` : c.display;
+}
+
+export default function ConceptSearchMultiSelect({ id, labelText, helperText, value, onChange }: Props) {
+    const [query, setQuery] = React.useState('');
+    const { loading, results, error } = useConceptSearch(query);
+
+    const addSelected = React.useCallback(
+        (picked: ConceptSummary | null) => {
+            if (!picked) return;
+
+            const pickedSelected = toSelectedConcept(picked);
+
+            const next = new Map<string, SelectedConcept>();
+            for (const x of value ?? []) next.set(x.uuid, x);
+            next.set(pickedSelected.uuid, pickedSelected);
+
+            onChange(Array.from(next.values()));
+        },
+        [onChange, value],
+    );
+
+    const removeSelectedUuid = React.useCallback(
+        (uuid: string) => {
+            onChange((value ?? []).filter((x) => x.uuid !== uuid));
+        },
+        [onChange, value],
+    );
+
+    return (
+        <div>
+            <div style={{ marginBottom: '0.5rem', fontWeight: 600 }}>{labelText}</div>
+            {helperText ? (
+                <div style={{ fontSize: '0.875rem', opacity: 0.8, marginBottom: '0.75rem' }}>{helperText}</div>
+            ) : null}
+
+            <ComboBox
+                id={`${id}-search`}
+                titleText="Search concepts"
+                items={results ?? []}
+                itemToString={itemToString}
+                placeholder="Type to search concepts…"
+                onInputChange={(text) => setQuery(String(text ?? ''))}
+                onChange={(e: any) => addSelected(e?.selectedItem ?? null)}
+            />
+
+            <div style={{ marginTop: '0.5rem' }}>
+                {loading ? <InlineLoading description="Searching…" /> : null}
+                {!loading && error ? (
+                    <div style={{ fontSize: '0.875rem', color: 'var(--cds-text-error, #da1e28)' }}>{error}</div>
+                ) : null}
+            </div>
+
+            {value?.length ? (
+                <div style={{ marginTop: '0.75rem', display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+                    {value.map((x) => (
+                        <Tag
+                            key={x.uuid}
+                            type="gray"
+                            filter
+                            onClose={() => removeSelectedUuid(x.uuid)}
+                            title={x.icd10Code || x.icd11Code ? `${x.display}` : x.display}
+                        >
+                            {x.display}
+                            {x.icd10Code ? ` • ICD-10:${x.icd10Code}` : ''}
+                            {x.icd11Code ? ` • ICD-11:${x.icd11Code}` : ''}
+                        </Tag>
+                    ))}
+                </div>
+            ) : null}
+        </div>
+    );
+}

package/src/components/indicators/handler/question-answer-concept-search.component.tsx

@@ -0,0 +1,336 @@
+import React from 'react';
+import { ComboBox, InlineLoading, Tag } from '@carbon/react';
+
+import { useConceptSearch } from '../../../resources/concepts/useConceptSearch';
+import type { ConceptSummary } from '../../../resources/concepts/concept-types';
+import { getConceptAnswers } from '../../../resources/concepts/concepts.resource';
+
+import type { SelectedConcept } from './concept-search-multiselect.component';
+
+type Value = {
+    questions: SelectedConcept[]; // ✅ multi
+    answers: SelectedConcept[];
+};
+
+type Props = {
+    id: string;
+    labelText: string;
+    helperText?: string;
+
+    questionsLabelText?: string;
+    answersLabelText?: string;
+
+    value: Value;
+    onChange: (next: Value) => void;
+};
+
+function extractCodeFromMappingDisplay(mappingDisplay: string, systemPrefix: string) {
+    const raw = (mappingDisplay ?? '').trim();
+    const prefix = `${systemPrefix}:`;
+    if (!raw.startsWith(prefix)) return undefined;
+
+    const remainder = raw.slice(prefix.length).trim();
+    if (!remainder) return undefined;
+
+    const token = remainder.split(' ')[0]?.split('(')[0]?.trim();
+    return token || undefined;
+}
+
+function getIcd10And11(concept: ConceptSummary) {
+    const mappings = concept.mappings ?? [];
+    let icd10: string | undefined;
+    let icd11: string | undefined;
+
+    for (const m of mappings) {
+        const disp = m?.display ?? '';
+        if (!icd10) icd10 = extractCodeFromMappingDisplay(disp, 'ICD-10-WHO');
+        if (!icd11) icd11 = extractCodeFromMappingDisplay(disp, 'ICD-11-WHO');
+        if (icd10 && icd11) break;
+    }
+
+    return { icd10Code: icd10, icd11Code: icd11 };
+}
+
+function toSelectedConcept(c: ConceptSummary): SelectedConcept {
+    const { icd10Code, icd11Code } = getIcd10And11(c);
+
+    return {
+        id: Number(c.id) || 0,
+        uuid: c.uuid,
+        display: c.display,
+        icd10Code,
+        icd11Code,
+        conceptClass: c.conceptClass?.name,
+        datatype: c.datatype?.name,
+    };
+}
+
+function itemToString(c: ConceptSummary | null) {
+    if (!c) return '';
+    const { icd10Code, icd11Code } = getIcd10And11(c);
+
+    const bits: string[] = [];
+    if (icd10Code) bits.push(`ICD-10:${icd10Code}`);
+    if (icd11Code) bits.push(`ICD-11:${icd11Code}`);
+    if (c.conceptClass?.name) bits.push(c.conceptClass.name);
+
+    return bits.length ? `${c.display} • ${bits.join(' • ')}` : c.display;
+}
+
+function selectedToString(c: SelectedConcept | null) {
+    if (!c) return '';
+    const bits: string[] = [];
+    if (c.icd10Code) bits.push(`ICD-10:${c.icd10Code}`);
+    if (c.icd11Code) bits.push(`ICD-11:${c.icd11Code}`);
+    if (c.conceptClass) bits.push(c.conceptClass);
+    return bits.length ? `${c.display} • ${bits.join(' • ')}` : c.display;
+}
+
+export default function QuestionAnswerConceptSearch({
+                                                        id,
+                                                        labelText,
+                                                        helperText,
+                                                        questionsLabelText = 'Question concept(s)',
+                                                        answersLabelText = 'Expected answers',
+                                                        value,
+                                                        onChange,
+                                                    }: Props) {
+    // Question search
+    const [qQuery, setQQuery] = React.useState('');
+    const { loading: qLoading, results: qResults, error: qError } = useConceptSearch(qQuery);
+
+    // Answers derived from selected questions
+    const [answersOptions, setAnswersOptions] = React.useState<SelectedConcept[]>([]);
+    const [aLoading, setALoading] = React.useState(false);
+    const [aError, setAError] = React.useState<string | null>(null);
+
+    // Used only to clear ComboBox input after picking an answer
+    const [answerComboKey, setAnswerComboKey] = React.useState(0);
+    const [questionComboKey, setQuestionComboKey] = React.useState(0);
+
+    const selectedQuestions = React.useMemo(() => value.questions ?? [], [value.questions]);
+    const selectedAnswers = React.useMemo(() => value.answers ?? [], [value.answers]);
+
+    const mergeUniqueByUuid = React.useCallback((xs: SelectedConcept[]) => {
+        const m = new Map<string, SelectedConcept>();
+        for (const x of xs ?? []) {
+            if (x?.uuid) m.set(x.uuid, x);
+        }
+        return Array.from(m.values());
+    }, []);
+
+    const loadAnswersForQuestions = React.useCallback(
+        async (questionUuids: string[], signal?: AbortSignal) => {
+            setALoading(true);
+            setAError(null);
+            setAnswersOptions([]);
+
+            try {
+                const uniqQ = Array.from(new Set(questionUuids.filter(Boolean)));
+                if (!uniqQ.length) {
+                    setAnswersOptions([]);
+                    setAError(null);
+                    return;
+                }
+
+                // fetch answers per question, then union
+                const answerLists = await Promise.all(
+                    uniqQ.map(async (qUuid) => {
+                        try {
+                            const answers = await getConceptAnswers(qUuid, signal);
+                            return (answers ?? []).map(toSelectedConcept).filter((x) => Boolean(x.uuid));
+                        } catch {
+                            return [];
+                        }
+                    }),
+                );
+
+                const merged = mergeUniqueByUuid(answerLists.flat());
+
+                if (!merged.length) {
+                    setAError('Selected question(s) have no configured answers. Please choose a different question.');
+                    setAnswersOptions([]);
+                    return;
+                }
+
+                setAnswersOptions(merged);
+
+                // keep currently selected answers only if still valid
+                const allowed = new Set(merged.map((x) => x.uuid));
+                const filtered = (selectedAnswers ?? []).filter((a) => a?.uuid && allowed.has(a.uuid));
+                if (filtered.length !== (selectedAnswers?.length ?? 0)) {
+                    onChange({ questions: selectedQuestions, answers: filtered });
+                }
+            } finally {
+                setALoading(false);
+            }
+        },
+        [mergeUniqueByUuid, onChange, selectedAnswers, selectedQuestions],
+    );
+
+    // whenever questions change, reload and union answers
+    React.useEffect(() => {
+        const uuids = (selectedQuestions ?? []).map((q) => q.uuid).filter(Boolean);
+        if (!uuids.length) {
+            setAnswersOptions([]);
+            setAError(null);
+            setALoading(false);
+            return;
+        }
+
+        const ac = new AbortController();
+        loadAnswersForQuestions(uuids, ac.signal);
+        return () => ac.abort();
+    }, [loadAnswersForQuestions, selectedQuestions]);
+
+    const addQuestion = (picked: ConceptSummary | null) => {
+        if (!picked) return;
+
+        const nextQ = toSelectedConcept(picked);
+        const next = mergeUniqueByUuid([...(selectedQuestions ?? []), nextQ]);
+
+        onChange({ questions: next, answers: selectedAnswers });
+
+        // reset question combobox input
+        setQuestionComboKey((k) => k + 1);
+    };
+
+    const removeQuestionUuid = (uuid: string) => {
+        const nextQ = (selectedQuestions ?? []).filter((q) => q.uuid !== uuid);
+        onChange({ questions: nextQ, answers: selectedAnswers });
+    };
+
+    const clearAllQuestions = () => {
+        onChange({ questions: [], answers: [] });
+        setAnswersOptions([]);
+        setAError(null);
+        setALoading(false);
+    };
+
+    const addAnswer = (picked: SelectedConcept | null) => {
+        if (!picked) return;
+
+        const next = mergeUniqueByUuid([...(selectedAnswers ?? []), picked]);
+        onChange({ questions: selectedQuestions, answers: next });
+
+        // reset answer combobox input
+        setAnswerComboKey((k) => k + 1);
+    };
+
+    const removeAnswerUuid = (uuid: string) => {
+        onChange({ questions: selectedQuestions, answers: (selectedAnswers ?? []).filter((x) => x.uuid !== uuid) });
+    };
+
+    const canPickAnswers = (selectedQuestions?.length ?? 0) > 0 && !aLoading && !aError;
+
+    return (
+        <div>
+            <div style={{ marginBottom: '0.5rem', fontWeight: 600 }}>{labelText}</div>
+            {helperText ? (
+                <div style={{ fontSize: '0.875rem', opacity: 0.8, marginBottom: '0.75rem' }}>{helperText}</div>
+            ) : null}
+
+            {/* Questions */}
+            <div style={{ marginBottom: '1rem' }}>
+                <div style={{ marginBottom: '0.5rem', fontWeight: 600 }}>{questionsLabelText}</div>
+
+                <ComboBox
+                    key={questionComboKey}
+                    id={`${id}-questions`}
+                    titleText="Search question concept"
+                    items={qResults ?? []}
+                    itemToString={itemToString}
+                    placeholder="Type to search question…"
+                    onInputChange={(text) => setQQuery(String(text ?? ''))}
+                    onChange={(e: any) => addQuestion(e?.selectedItem ?? null)}
+                />
+
+                <div style={{ marginTop: '0.5rem' }}>
+                    {qLoading ? <InlineLoading description="Searching…" /> : null}
+                    {!qLoading && qError ? (
+                        <div style={{ fontSize: '0.875rem', color: 'var(--cds-text-error, #da1e28)' }}>{qError}</div>
+                    ) : null}
+                </div>
+
+                {selectedQuestions?.length ? (
+                    <div style={{ marginTop: '0.75rem', display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+                        {selectedQuestions.map((q) => (
+                            <Tag
+                                key={q.uuid}
+                                type="gray"
+                                filter
+                                onClose={() => removeQuestionUuid(q.uuid)}
+                                title={selectedToString(q)}
+                            >
+                                {q.display}
+                                {q.icd10Code ? ` • ICD-10:${q.icd10Code}` : ''}
+                                {q.icd11Code ? ` • ICD-11:${q.icd11Code}` : ''}
+                            </Tag>
+                        ))}
+
+                        <Tag type="red" filter onClose={clearAllQuestions} title="Clear all questions">
+                            Clear all
+                        </Tag>
+                    </div>
+                ) : null}
+            </div>
+
+            {/* Answers */}
+            <div>
+                <div style={{ marginBottom: '0.5rem', fontWeight: 600 }}>{answersLabelText}</div>
+
+                {(selectedQuestions?.length ?? 0) > 0 ? (
+                    <div style={{ fontSize: '0.875rem', opacity: 0.8, marginBottom: '0.75rem' }}>
+                        Pick answer concept(s) for selected question(s).
+                    </div>
+                ) : (
+                    <div style={{ fontSize: '0.875rem', opacity: 0.8, marginBottom: '0.75rem' }}>
+                        Select at least one question first to load allowed answers.
+                    </div>
+                )}
+
+                {aLoading ? <InlineLoading description="Loading answers…" /> : null}
+                {!aLoading && aError ? (
+                    <div
+                        style={{
+                            fontSize: '0.875rem',
+                            color: 'var(--cds-text-error, #da1e28)',
+                            marginBottom: '0.75rem',
+                        }}
+                    >
+                        {aError}
+                    </div>
+                ) : null}
+
+                <ComboBox
+                    key={answerComboKey}
+                    id={`${id}-answers`}
+                    titleText="Select answer"
+                    items={answersOptions}
+                    itemToString={(x) => selectedToString(x)}
+                    disabled={!canPickAnswers}
+                    placeholder={canPickAnswers ? 'Type to filter answers…' : 'Answers disabled'}
+                    onChange={(e: any) => addAnswer(e?.selectedItem ?? null)}
+                />
+
+                {selectedAnswers?.length ? (
+                    <div style={{ marginTop: '0.75rem', display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+                        {selectedAnswers.map((x) => (
+                            <Tag
+                                key={x.uuid}
+                                type="gray"
+                                filter
+                                onClose={() => removeAnswerUuid(x.uuid)}
+                                title={selectedToString(x)}
+                            >
+                                {x.display}
+                                {x.icd10Code ? ` • ICD-10:${x.icd10Code}` : ''}
+                                {x.icd11Code ? ` • ICD-11:${x.icd11Code}` : ''}
+                            </Tag>
+                        ))}
+                    </div>
+                ) : null}
+            </div>
+        </div>
+    );
+}