(chore) : IIT risk score clean up (#502)

* Cleaned community pharmacy, using actual current risk score from endpoint * Cleaned iit risk score pannel * Plotting only latest risk score if any removing static plot * removed unnecesary patient uuid on memo hook dependancy array
palladiumkenya · Dec 3, 2024 · a8c398a · a8c398a
1 parent 53a2fa7
commit a8c398a
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 55 deletions.
diff --git a/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts b/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts
@@ -8,9 +8,9 @@ const usePatientIITScore = (patientUuid: string) => {
   const url = `${restBaseUrl}/keml/patientiitscore?patientUuid=${patientUuid}`;
   const { data, error, isLoading } = useSWR<FetchResponse<IITRiskScore>>(url, openmrsFetch);
 
-  const riskScore = useMemo(() => data?.data ?? patientRiskScore.at(-1), [patientUuid]);
+  const riskScore = useMemo(() => data?.data, [data]);
   return {
-    isLoading: false,
+    isLoading,
     error,
     riskScore,
   };

diff --git a/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score-plot.tsx b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score-plot.tsx
@@ -1,18 +1,19 @@
 import { LineChart, LineChartOptions, ScaleTypes } from '@carbon/charts-react';
 import '@carbon/charts/styles.css';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
 import React from 'react';
-import styles from './iit-risk-score.scss';
 import usePatientIITScore from '../hooks/usePatientIITScore';
-import { CardHeader } from '@openmrs/esm-patient-common-lib';
+import styles from './iit-risk-score.scss';
 import { patientRiskScore } from './risk-score.mock';
-import { formatDate, parseDate } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
 
 interface CarePanelRiskScorePlotProps {
   patientUuid: string;
 }
 
 const CarePanelRiskScorePlot: React.FC<CarePanelRiskScorePlotProps> = ({ patientUuid }) => {
   const { isLoading, error, riskScore } = usePatientIITScore(patientUuid);
+  const { t } = useTranslation();
   const options: LineChartOptions = {
     title: 'KenyaHMIS ML Model',
     legend: { enabled: false },
@@ -46,18 +47,26 @@ const CarePanelRiskScorePlot: React.FC<CarePanelRiskScorePlotProps> = ({ patient
   };
 
   return (
-    <div className={styles['risk-score-card']}>
-      <span className={styles.sectionHeader}>IIT Risk Score Trend</span>
+    <div className={styles.riskScoreCard}>
+      <span className={styles.sectionHeader}>{t('iitRiskScoreTrend', 'IIT Risk Score Trend')}</span>
       <center>
-        <strong>Latest risk score: </strong>
-        {`${riskScore.riskScore}%`}
+        <strong>{t('latestRiskScore', 'Latest risk score')}: </strong>
+        {`${riskScore?.riskScore} (${riskScore?.description})`}
       </center>
       <div style={{ padding: '1rem' }}>
         <LineChart
-          data={patientRiskScore.map((risk) => ({
-            ...risk,
-            evaluationDate: formatDate(parseDate(risk.evaluationDate)),
-          }))}
+          data={
+            riskScore?.riskScore && !riskScore?.riskScore.includes('-')
+              ? [
+                  {
+                    evaluationDate: riskScore.evaluationDate,
+                    riskScore: Number(riskScore?.riskScore?.split('%')[0]?.trim()),
+                    description: riskScore?.description,
+                    riskFactors: riskScore?.riskFactors,
+                  },
+                ]
+              : []
+          }
           options={options}
         />
       </div>

diff --git a/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.component.tsx b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.component.tsx
@@ -15,23 +15,23 @@ const CarePanellIITRiskScore: React.FC<CarePanellIITRiskScoreProps> = ({ patient
 
   if (isLoading) {
     return (
-      <div className={styles['risk-score-card']}>
+      <div className={styles.riskScoreCard}>
         <Row style={{ display: 'flex' }}>
-          <Column lg={4} md={4} sm={4} className={styles['risk-score-card__item']}>
+          <Column lg={4} md={4} sm={4} className={styles.riskScoreCardItem}>
             <SkeletonText />
             <SkeletonText />
           </Column>
-          <Column lg={4} md={4} sm={4} className={styles['risk-score-card__item']}>
+          <Column lg={4} md={4} sm={4} className={styles.riskScoreCardItem}>
             <SkeletonText />
             <SkeletonText />
           </Column>
         </Row>
         <Row style={{ display: 'flex' }}>
-          <Column lg={4} md={4} sm={4} className={styles['risk-score-card__item']}>
+          <Column lg={4} md={4} sm={4} className={styles.riskScoreCardItem}>
             <SkeletonText />
             <SkeletonText />
           </Column>
-          <Column lg={12} md={12} sm={12} className={styles['risk-score-card__item']}>
+          <Column lg={12} md={12} sm={12} className={styles.riskScoreCardItem}>
             <SkeletonText />
             <SkeletonText />
           </Column>
@@ -40,29 +40,29 @@ const CarePanellIITRiskScore: React.FC<CarePanellIITRiskScoreProps> = ({ patient
     );
   }
 
-  // if (error) {
-  //   return <ErrorState error={error} headerTitle={t('iitRiscScore', 'IIT Risk Score')} />;
-  // }
+  if (error) {
+    return <ErrorState error={error} headerTitle={t('iitRiscScore', 'IIT Risk Score')} />;
+  }
   return (
-    <div className={styles['risk-score-card']}>
-      <span className={styles.sectionHeader}>IIT Risk Score</span>
+    <div className={styles.riskScoreCard}>
+      <span className={styles.sectionHeader}>{t('iitRiskscore', 'IIT Risk Score')}</span>
       <Row style={{ display: 'flex' }}>
-        <Column lg={4} md={4} sm={4} className={styles['risk-score-card__item']}>
-          <strong>Risk Score:</strong>
-          <p>{`${riskScore?.riskScore ?? 0}%`}</p>
+        <Column lg={4} md={4} sm={4} className={styles.riskScoreCardItem}>
+          <strong>{t('riskScore', 'Risk Score')}:</strong>
+          <p>{`${riskScore?.riskScore ?? 0}`}</p>
         </Column>
-        <Column lg={4} md={4} sm={4} className={styles['risk-score-card__item']}>
-          <strong>Evaluation Date:</strong>
+        <Column lg={4} md={4} sm={4} className={styles.riskScoreCardItem}>
+          <strong>{t('evaluationDate', 'Evaluation Date')}:</strong>
           <p>{formatDate(parseDate(riskScore?.evaluationDate))}</p>
         </Column>
       </Row>
       <Row style={{ display: 'flex' }}>
-        <Column lg={4} md={4} sm={4} className={styles['risk-score-card__item']}>
-          <strong>Description:</strong>
+        <Column lg={4} md={4} sm={4} className={styles.riskScoreCardItem}>
+          <strong>{t('description', 'Description')}:</strong>
           <p>{riskScore?.description}</p>
         </Column>
-        <Column lg={12} md={12} sm={12} className={styles['risk-score-card__item']}>
-          <strong>Risk Factors:</strong>
+        <Column lg={12} md={12} sm={12} className={styles.riskScoreCardItem}>
+          <strong>{t('riskFactors', 'Risk Factors')}:</strong>
           <p>{riskScore?.riskFactors}</p>
         </Column>
       </Row>

diff --git a/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.scss b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.scss
@@ -1,25 +1,24 @@
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/spacing';
+@use '@carbon/type';
+@use '@carbon/layout';
 @use '@carbon/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
 
-.risk-score-card {
+.riskScoreCard {
   width: 100%;
-  border: 0.15rem solid $grey-2;
-  margin-bottom: spacing.$spacing-08;
+  border: 0.15rem solid colors.$gray-20;
+  margin-bottom: layout.$spacing-08;
 }
 
-.risk-score-card__item {
+.riskScoreCardItem {
   flex: 1;
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
 }
 
 .sectionHeader {
   @include type.type-style('heading-02');
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: spacing.$spacing-05;
+  margin: layout.$spacing-05;
   row-gap: 1.5rem;
   position: relative;
 

diff --git a/packages/esm-care-panel-app/src/machine-learning/machine-learning.component.tsx b/packages/esm-care-panel-app/src/machine-learning/machine-learning.component.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import styles from './machine-learning.scss';
-import CarePanellIITRiskScore from '../iit-risk-score/iit-risk-score.component';
-import CarePanelRiskScorePlot from '../iit-risk-score/iit-risk-score-plot';
-import usePatientHIVStatus from '../hooks/usePatientHIVStatus';
 import { ErrorState } from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
 import { EmptyState } from '@openmrs/esm-patient-common-lib';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import usePatientHIVStatus from '../hooks/usePatientHIVStatus';
+import CarePanelRiskScorePlot from '../iit-risk-score/iit-risk-score-plot';
+import CarePanellIITRiskScore from '../iit-risk-score/iit-risk-score.component';
+import styles from './machine-learning.scss';
 
 interface CarePanelMachineLearningProps {
   patientUuid: string;
@@ -19,8 +19,10 @@ const CarePanelMachineLearning: React.FC<CarePanelMachineLearningProps> = ({ pat
     return <ErrorState error={error} headerTitle={header} />;
   }
   return (
-    <div className={styles['machine-learning']}>
-      {!isPositive && <EmptyState headerTitle={header} displayText="machine learning predictions" />}
+    <div className={styles.machineLearning}>
+      {!isPositive && (
+        <EmptyState headerTitle={header} displayText={t('mlPredictions', 'machine learning predictions')} />
+      )}
       {isPositive && <CarePanellIITRiskScore patientUuid={patientUuid} />}
       {isPositive && <CarePanelRiskScorePlot patientUuid={patientUuid} />}
     </div>

diff --git a/packages/esm-care-panel-app/src/machine-learning/machine-learning.scss b/packages/esm-care-panel-app/src/machine-learning/machine-learning.scss
@@ -1,11 +1,9 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/type';
 @use '@carbon/layout';
-@import '~@openmrs/esm-styleguide/src/vars';
 
-.machine-learning {
+.machineLearning {
   padding: 8px;
-  gap: spacing.$spacing-08;
+  gap: layout.$spacing-08;
 }
 
 .sectionHeader {
@@ -17,7 +15,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: spacing.$spacing-05;
+  margin: layout.$spacing-05;
   row-gap: 1.5rem;
   position: relative;
 

diff --git a/packages/esm-care-panel-app/translations/en.json b/packages/esm-care-panel-app/translations/en.json
@@ -38,6 +38,7 @@
   "deathDate": "Death date",
   "deleteRegimen": "Delete Regimen",
   "deleteRegimenModalConfirmationText": "Are you sure you want to delete regimen?",
+  "description": "Description",
   "discard": "Discard",
   "discontinue": "Discontinue",
   "diseaseClassification": "Disease classification",
@@ -52,13 +53,16 @@
   "errorPatientSummary": "Error loading patient summary",
   "errorProgramSummary": "Error loading HIV summary",
   "errorRegimenHistory": "Error loading regimen history",
+  "evaluationDate": "Evaluation Date",
   "facilityTransferredFrom": "Facility transferred from",
   "familyProtection": "FP method",
   "firstCD4": "First CD4",
   "gender": "Gender",
   "height": "Height",
   "heiOutcome": "HEI Outcome",
   "hivStatus": "HIV Status",
+  "iitRiscScore": "IIT Risk Score",
+  "iitRiskscore": "IIT Risk Score",
   "initialRegimen": "Initial regimen",
   "initialRegimenDate": "Initial regimen date",
   "ioHistory": " OI history",
@@ -71,6 +75,7 @@
   "maritalStatus": "Marital status",
   "mflCode": "MFL code",
   "milestonesAttained": "Milestones Attained",
+  "mlPredictions": "machine learning predictions",
   "mostRecentCD4": "Most recent CD4",
   "mostRecentVL": "Most recent VL",
   "nationalUniquePatientIdentifier": "National unique patient identifier",
@@ -103,6 +108,8 @@
   "reportDate": "Report date",
   "respiratoryRate": "Respiratory rate",
   "restartRegimen": "Restart",
+  "riskFactors": "Risk Factors",
+  "riskScore": "Risk Score",
   "save": "Save",
   "selectReason": "Select Reason",
   "selectRegimen": "Select Regimen",