SAGE-283-allergy-reaction

.vscode/launch.json

@@ -4,11 +4,17 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
+        {
+            "command": "npm run dev",
+            "name": "npm run dev",
+            "request": "launch",
+            "type": "node-terminal"
+        },
         {
             "type": "firefox",
             "request": "launch",
             "reAttach": true,
-            "name": "Launch localhost",
+            "name": "ffLaunch",
             "url": "http://localhost:8083",
             "pathMappings": [
                 {
@@ -17,5 +23,12 @@
                 }
             ]
         }
-    ]
+    ],
+    "compounds": [
+        {
+          "name": "Debug",
+          "configurations": ["npm run dev", "ffLaunch"],
+          "stopAll": true
+        }
+      ]
 }

friendly-names.json

@@ -93,7 +93,7 @@
             },
             {
               "SELF": {
-                "FHIR": "productReference", "FRIENDLY": "Medication Code: "}
+                "FHIR": "productCodeableConcept", "FRIENDLY": "Medication Code: "}
             },
             {
               "SELF": {

package.json

@@ -31,6 +31,7 @@
     "@types/fhir": "0.0.34",
     "@types/jest": "^27.0.2",
     "@types/jquery": "^3.5.8",
+    "@types/lodash": "^4.14.180",
     "@types/react": "^16.14.0",
     "@types/react-dates": "^21.8.3",
     "@types/react-dom": "^16.9.14",

src/helpers/schema-utils.ts

@@ -57,7 +57,7 @@ export type SageNewResource = {
 
 // type fhirTypeValues = "decimal" | "boolean" | "xhtml" | "base64Binary" | "code" | "uri" | "canonical";
 
-type ProfileDefs = {
+export type ProfileDefs = {
 	'__meta': {
 		baseDefinition: string,
 		id: string,

src/simplified/cardEditor.tsx

@@ -1,10 +1,6 @@
-import * as cql from "cql-execution";
-import { Library, Dosage, PlanDefinition, PlanDefinitionActionCondition } from "fhir/r4";
-import { ExtractTypeOfFN } from "freezer-js";
+import { Library, Dosage, PlanDefinition, PlanDefinitionActionCondition, CodeableConcept } from "fhir/r4";
 import React, { ElementType, useEffect, useState } from "react";
 import { Button, Col, Form, InputGroup, Modal, Row } from 'react-bootstrap';
-import hypertensionLibraryJson from "../../public/samples/hypertension-library.json";
-import * as SageUtils from "../helpers/sage-utils";
 import * as SchemaUtils from "../helpers/schema-utils";
 import State, { SageNodeInitializedFreezerNode } from "../state";
 import { OuterCardForm, textBoxProps, cardLayout, displayBoxProps } from "./outerCardForm";
@@ -14,11 +10,9 @@ import { buildEditableStateFromCondition, WizardState } from "./cql-wizard/wizar
 import { generateCqlFromConditions, makeCQLtoELMRequest } from "./cql-wizard/cql-generator";
 import { buildFredId } from "../helpers/bundle-utils";
 import { fhirToFriendly } from '../simplified/nameHelpers';
+import CodeableConceptEditor, { CodeableConceptEditorProps } from "./codeableConceptEditor";
 
 
-
-const hypertensionLibrary: Library = hypertensionLibraryJson as Library;
-
 interface ExpressionOptionDict {
     [expression: string]: ExpressionOption // The key is exactly what's written in the Condition's "expression" element
 }
@@ -50,6 +44,7 @@ export interface ICardForm {
     textBoxFields: Map<string, textBoxProps>;
     displayBoxFields: Map<string, displayBoxProps>;
     dropdownFields: Map<string, string[]>;
+    codeableConceptFields: Map<string, Partial<CodeableConceptEditorProps>>;
     resourceFields: string[];
     cardFieldLayout: cardLayout;
     pageOne: React.FunctionComponent<pageOneProps> | React.ComponentClass<pageOneProps>;
@@ -72,6 +67,42 @@ const simpleCardField = (fieldName: string, actNode: SageNodeInitializedFreezerN
     return [fieldName, fieldContents, setField, fieldSaveHandler]
 }
 
+/**
+ * CodeableConcept as defined here https://www.hl7.org/fhir/datatypes.html#CodeableConcept
+ * @param fieldName Name of element in `actNode` that is of type CodeableConcept
+ * @param parentNode Node of parent element to `fieldName`
+ * @returns \{ Name of field, Contents of field, (function) Set contents of field, (function) Save contents back into the SAGE node \}
+ */
+const codeableConceptCardField = (fieldName: string, parentNode: SageNodeInitializedFreezerNode) => {
+    const fieldNode = SchemaUtils.getChildOfNodePath(parentNode, [fieldName]);
+
+    // Normally dangerous
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [codeableConcept, setCodeableConcept] = useState<CodeableConcept>(() => {
+        if (fieldNode) {
+            // Initialize with existing value
+            return SchemaUtils.toFhir(fieldNode, false)
+        }
+        return {}
+    });
+
+    function codeableConceptSaveHandler(name: string, contents: any, act: any, plan: any) {
+        if (fieldNode) {
+            State.emit("load_json_into", fieldNode, codeableConcept);
+        }
+        else {
+            State.emit("load_json_into", parentNode, {
+                [fieldName]: codeableConcept
+            });
+        }
+    }
+    return {
+        fieldName,
+        codeableConcept,
+        setCodeableConcept,
+        codeableConceptSaveHandler
+    };
+}
 
 const createTextBoxElement = (fieldKey: string, friendlyFieldName: string, textProps: textBoxProps, fieldHandlers: any[][], node: SageNodeInitializedFreezerNode): JSX.Element => {
     const [fieldName, fieldContents, setField, fieldSaveHandler] = simpleCardField(fieldKey, node);
@@ -145,6 +176,21 @@ const createDropdownElement = (fieldKey: string, fieldFriendlyName: string, fiel
     );
 }
 
+const createCodeableConceptElement = (fieldKey: string, fieldFriendlyName: string, codeableConceptEditorPropsOverrides: Partial<CodeableConceptEditorProps>, fieldHandlers: any[][], node: SageNodeInitializedFreezerNode): JSX.Element => {
+    const { fieldName, codeableConcept, setCodeableConcept, codeableConceptSaveHandler } = codeableConceptCardField(fieldKey, node);
+    fieldHandlers.push([fieldName, codeableConcept, setCodeableConcept, codeableConceptSaveHandler]);
+    return (
+        <Form.Group key={fieldName + "-fromGroup"} as={Col} controlId={fieldKey}>
+            <Row className="page1-row-element">
+                <Form.Label key={fieldName + "-label"}>{fieldFriendlyName}</Form.Label>
+                <Col key={fieldName + "-col"} className = 'page1-input-fields'>
+                    <CodeableConceptEditor {...codeableConceptEditorPropsOverrides} curCodeableConcept={codeableConcept} setCurCodeableConcept={setCodeableConcept} />
+                </Col>
+            </Row>
+        </Form.Group>
+    );
+}
+
 const createDisplayElement = ( displayProps: displayBoxProps,friendlyFields: any,fieldHandlers: any, i: number): JSX.Element => {
     let friendly;
     for (let j = 0; j < friendlyFields.length; j++) {
@@ -201,11 +247,20 @@ const createDropdownElementList = (innerCardForm: ICardForm, friendlyFields: Fri
         })
 }
 
+const createCodeableConceptElementList = (innerCardForm: ICardForm, friendlyFields: FriendlyResourceFormElement[], fieldHandlers: any, node: SageNodeInitializedFreezerNode): JSX.Element[] => {
+    return friendlyFields
+        .filter(ff => innerCardForm.codeableConceptFields.has(ff.SELF.FHIR))
+        .map(ff => {
+            return createCodeableConceptElement(ff.SELF.FHIR, ff.SELF.FRIENDLY, innerCardForm.codeableConceptFields.get(ff.SELF.FHIR) ?? {}, fieldHandlers, node)
+        })
+}
+
 const fieldElementListForType = (innerCardForm: ICardForm, friendlyFields: FriendlyResourceFormElement[], fieldHandlers: any, node: SageNodeInitializedFreezerNode): JSX.Element[] => {
     const flattenFriendlyFields = allFormElems(friendlyFields);
     return [
         ...createTextBoxElementList(innerCardForm, flattenFriendlyFields, fieldHandlers, node),
-        ...createDropdownElementList(innerCardForm, flattenFriendlyFields, fieldHandlers, node)
+        ...createDropdownElementList(innerCardForm, flattenFriendlyFields, fieldHandlers, node),
+        ...createCodeableConceptElementList(innerCardForm, flattenFriendlyFields, fieldHandlers, node),
     ]
 }
 

src/simplified/codeableConceptEditor.tsx

@@ -0,0 +1,49 @@
+import AsyncSelect from "react-select/async";
+import { SageCoding } from "./cql-wizard/wizardLogic";
+import * as Bioportal from './cql-wizard/bioportal';
+import _ from "lodash"
+import { CodeableConcept, Coding } from "fhir/r4";
+
+function loadCodes(inputValue: string, callback: (results: SageCoding[]) => void) {
+    Bioportal.searchForText(inputValue).then(v => callback(v));
+}
+const debouncedLoadCodes = _.debounce(loadCodes, 500)
+
+export interface CodeableConceptEditorProps {
+    curCodeableConcept: CodeableConcept,
+    setCurCodeableConcept: (newCodeableConcept: CodeableConcept) => void,
+    codeFilter?: string,
+}
+
+const CodeableConceptEditor: React.FC<CodeableConceptEditorProps> = (props: CodeableConceptEditorProps) => {
+    const selectedCode: Coding | undefined = props.curCodeableConcept.coding?.[0];
+    function createCodeableConceptFromCode(code: Coding | null): CodeableConcept {
+        return {
+            coding: code ? [code] : undefined
+        }
+    }
+
+    return (
+        <div>
+            <AsyncSelect<Coding>
+                loadOptions={debouncedLoadCodes}
+                value={selectedCode}
+                noOptionsMessage={input => input.inputValue !== "" ? `No code found for ${input.inputValue}` : `Please enter a code or the name of a code`}
+                isClearable={true}
+                onChange={newCode => props.setCurCodeableConcept(createCodeableConceptFromCode(newCode))}
+                formatOptionLabel={code => {
+                    return (
+                        <div>
+                            <b>{code.display ?? "Unknown Code Name"}</b>
+                            <br />
+                            {code.code} <i>{(code.system && Bioportal.systemUrlToOntology[code.system]) ?? code.system}</i>
+                        </div>
+                    )
+                }}
+                isOptionSelected={option => option.code === selectedCode?.code && option.system === selectedCode?.system && option.version === selectedCode?._version}
+            />
+        </div>
+    )
+}
+
+export default CodeableConceptEditor;

src/simplified/cql-wizard/bioportal.ts

@@ -2,6 +2,7 @@ import axios from "axios";
 import State from "../../state";
 import { SageCoding } from "./wizardLogic";
 
+// These ontology names are from Bioportal
 export const ontologyToSystemAndVersion: {[key: string]: {system: string, version: string} | undefined} = {
     'SNOMEDCT': {
         system: "http://snomed.info/sct",
@@ -29,6 +30,10 @@ export const ontologyToSystemAndVersion: {[key: string]: {system: string, versio
     },
 };
 
+// Map urls back to their name on Bioportal
+export const systemUrlToOntology: {[systemUrl: string]: string | undefined} = {};
+Object.entries(ontologyToSystemAndVersion).forEach(v => v[1] ? (systemUrlToOntology[v[1].system] = v[0]) : null)
+
 /**
  * Search Bioportal for codes matching the query
  * @param text Text to search for

src/simplified/cql-wizard/cql-generator.ts

@@ -148,6 +148,9 @@ export async function generateCqlFromConditions(conditionStates: EditableStateFo
 
                     case "unknown":
                         return null;
+
+                    default:
+                        return null;
                 }
             }
             const clauses = conditionState.curWizState.filters.flatMap(filter => {