feat(anni): add warning level

hpi-dhc · Jul 5, 2022 · bb79d6b · bb79d6b
1 parent 2be255a
commit bb79d6b
Show file tree

Hide file tree

Showing 7 changed files with 153 additions and 7 deletions.
diff --git a/annotation-interface/common/server-types.ts b/annotation-interface/common/server-types.ts
@@ -1,4 +1,5 @@
-export type WarningLevel = 'ok' | 'warning' | 'danger';
+export const warningLevelValues = ['ok', 'warning', 'danger'] as const;
+export type WarningLevel = typeof warningLevelValues[number];
 
 export type ServerGuidelineOverview = {
     id: number;

diff --git a/annotation-interface/components/annotations/BrickAnnotations.tsx b/annotation-interface/components/annotations/BrickAnnotations.tsx
@@ -78,5 +78,3 @@ export const MedAnnotation = (
 export const GuidelineAnnotation = (
     props: Props<ServerGuideline, IGuidelineAnnotation<string, string>>,
 ) => <BrickAnnotation {...props} apiEndpoint="guidelines" />;
-
-// TODO: warning level annotation
diff --git a/annotation-interface/components/annotations/WarningLevelAnnotation.tsx b/annotation-interface/components/annotations/WarningLevelAnnotation.tsx
@@ -0,0 +1,120 @@
+import {
+    CheckCircleIcon,
+    ExclamationIcon,
+    TrashIcon,
+    UploadIcon,
+    XCircleIcon,
+    XIcon,
+} from '@heroicons/react/solid';
+import axios from 'axios';
+import { useEffect, useRef, useState } from 'react';
+
+import {
+    ServerGuideline,
+    WarningLevel,
+    warningLevelValues,
+} from '../../common/server-types';
+import { IGuidelineAnnotation } from '../../database/models/GuidelineAnnotation';
+import WithIcon from '../common/WithIcon';
+import AbstractAnnotation, {
+    AbstractAnnotationRef,
+    AnnotationMissing,
+} from './AbstractAnnotation';
+
+type Props = {
+    refetch: () => void;
+    displayContext: string;
+    serverData: ServerGuideline | undefined;
+    annotation: IGuidelineAnnotation<string, string> | null | undefined;
+};
+
+const iconForLevel: Map<WarningLevel, typeof CheckCircleIcon> = new Map([
+    ['ok', CheckCircleIcon],
+    ['warning', ExclamationIcon],
+    ['danger', XCircleIcon],
+]);
+
+const WarningLevelAnnotation = ({
+    refetch,
+    displayContext,
+    serverData,
+    annotation,
+}: Props) => {
+    const annotationRef = useRef<null | AbstractAnnotationRef>(null);
+    const [selection, setSelection] = useState<WarningLevel | null>(null);
+    useEffect(
+        () => setSelection(annotation?.warningLevel ?? null),
+        [annotation],
+    );
+
+    const save = async () => {
+        if (!serverData) return;
+        const patch = {
+            annotation: { warningLevel: selection },
+            serverData: { warningLevel: selection },
+        };
+        await axios.patch(
+            `/api/annotations/guidelines/${serverData.id}`,
+            patch,
+        );
+        done();
+    };
+    const done = () => {
+        annotationRef.current?.hideOverlay();
+        refetch();
+    };
+
+    return (
+        <AbstractAnnotation
+            serverValue={serverData?.warningLevel}
+            hasChanges={serverData?.warningLevel !== selection}
+            displayContext={displayContext}
+            displayName="warning level"
+            ref={annotationRef}
+        >
+            {!selection && <AnnotationMissing />}
+            <div className="border border-opacity-40 border-white py-6 px-2 my-4 flex justify-evenly">
+                {warningLevelValues.map((level, index) => (
+                    <WithIcon
+                        key={index}
+                        icon={iconForLevel.get(level)!}
+                        as="button"
+                        onClick={() => setSelection(level)}
+                        className={`py-2 px-4 rounded-full border border-white bg-black ${
+                            level === selection
+                                ? 'border-opacity-40 bg-opacity-50'
+                                : 'border-opacity-0 bg-opacity-0'
+                        }`}
+                    >
+                        {level[0].toUpperCase() + level.slice(1)}
+                    </WithIcon>
+                ))}
+            </div>
+            <div className="flex justify-between py-2">
+                <WithIcon as="button" icon={XIcon} onClick={done}>
+                    Cancel
+                </WithIcon>
+                <div className="flex space-x-4">
+                    <WithIcon
+                        as="button"
+                        icon={TrashIcon}
+                        reverse
+                        onClick={() => setSelection(null)}
+                    >
+                        Clear
+                    </WithIcon>
+                    <WithIcon
+                        as="button"
+                        icon={UploadIcon}
+                        reverse
+                        onClick={save}
+                    >
+                        Save
+                    </WithIcon>
+                </div>
+            </div>
+        </AbstractAnnotation>
+    );
+};
+
+export default WarningLevelAnnotation;
diff --git a/annotation-interface/database/models/GuidelineAnnotation.ts b/annotation-interface/database/models/GuidelineAnnotation.ts
@@ -1,6 +1,10 @@
 import mongoose, { Types } from 'mongoose';
 
-import { ServerGuidelineOverview } from '../../common/server-types';
+import {
+    ServerGuidelineOverview,
+    WarningLevel,
+    warningLevelValues,
+} from '../../common/server-types';
 import { MongooseId, OptionalId } from '../helpers/types';
 import AbstractAnnotation, {
     annotationBrickValidators,
@@ -15,6 +19,7 @@ export interface IGuidelineAnnotation<
     geneResult: string;
     recommendation?: BrickIdT[] | undefined;
     implication?: BrickIdT[] | undefined;
+    warningLevel?: WarningLevel | null;
 }
 
 interface GuidelineAnnotationModel
@@ -42,12 +47,17 @@ const guidelineAnnotationSchema = new mongoose.Schema<
         default: undefined,
         validate: annotationBrickValidators('Implication'),
     },
+    warningLevel: {
+        type: String,
+        enum: warningLevelValues,
+        default: undefined,
+    },
 });
 
 guidelineAnnotationSchema.pre<
     IGuidelineAnnotation<Types.ObjectId, Types.ObjectId>
 >('validate', function (next) {
-    if (!this.recommendation && !this.implication)
+    if (!this.recommendation && !this.implication && !this.warningLevel)
         next(new Error('At least one category needs to be defined'));
     next();
 });

diff --git a/annotation-interface/pages/annotations/guidelines/[id].tsx b/annotation-interface/pages/annotations/guidelines/[id].tsx
@@ -14,6 +14,7 @@ import {
 } from '../../../common/server-types';
 import { GuidelineAnnotation } from '../../../components/annotations/BrickAnnotations';
 import CpicGuidelineBox from '../../../components/annotations/CpicGuidelineBox';
+import WarningLevelAnnotation from '../../../components/annotations/WarningLevelAnnotation';
 import PageHeading from '../../../components/common/PageHeading';
 import dbConnect from '../../../database/helpers/connect';
 import {
@@ -66,6 +67,12 @@ const GuidelineDetail = ({
                     serverData={guideline}
                     category="recommendation"
                 />
+                <WarningLevelAnnotation
+                    refetch={refetch}
+                    annotation={annotation}
+                    serverData={guideline}
+                    displayContext={displayContext}
+                />
             </div>
         </>
     );

diff --git a/annotation-interface/pages/api/annotations/guidelines/[id].ts b/annotation-interface/pages/api/annotations/guidelines/[id].ts
@@ -58,7 +58,12 @@ const api: NextApiHandler = async (req, res) => {
                 { id: serverGuideline.id, ...serverPatch },
             ]);
 
-            if (!annotation && (patch.implication || patch.recommendation)) {
+            if (
+                !annotation &&
+                (patch.implication ||
+                    patch.recommendation ||
+                    patch.warningLevel)
+            ) {
                 annotation = {
                     medicationRxCUI: serverGuideline.medication.rxcui,
                     medicationName: serverGuideline.medication.name,
@@ -69,7 +74,11 @@ const api: NextApiHandler = async (req, res) => {
                 await GuidelineAnnotation!.create(annotation);
             } else if (annotation) {
                 annotation = { ...annotation, ...patch };
-                if (annotation.implication || annotation.recommendation) {
+                if (
+                    annotation.implication ||
+                    annotation.recommendation ||
+                    patch.warningLevel
+                ) {
                     await GuidelineAnnotation!
                         .findByIdAndUpdate(annotation._id!, annotation, {
                             runValidators: true,

diff --git a/annotation-interface/pages/api/annotations/sync.ts b/annotation-interface/pages/api/annotations/sync.ts
@@ -95,6 +95,7 @@ const api: NextApiHandler = async (req, res) =>
                             resolver,
                             annotation.recommendation,
                         ),
+                        warningLevel: annotation.warningLevel,
                     };
                 })
                 .filter((patch) => patch);