Open event in new tab and fix 717 performance in even tracker page

EyeSeeTea · Oct 9, 2024 · 135d7ea · 135d7ea
1 parent 26869d7
commit 135d7ea
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 44 deletions.
diff --git a/src/data/repositories/PerformanceOverviewD2Repository.ts b/src/data/repositories/PerformanceOverviewD2Repository.ts
@@ -26,6 +26,7 @@ import {
 } from "../../domain/entities/disease-outbreak-event/PerformanceOverviewMetrics";
 import { AlertSynchronizationData } from "../../domain/entities/alert/AlertData";
 import { OrgUnit } from "../../domain/entities/OrgUnit";
+import { Id } from "../../domain/entities/Ref";
 
 const formatDate = (date: Date): string => {
     const year = date.getFullYear();
@@ -246,16 +247,37 @@ export class PerformanceOverviewD2Repository implements PerformanceOverviewRepos
         });
     }
 
-    getEventTracker717Performance(): FutureData<PerformanceMetrics717[]> {
+    getEventTracker717Performance(diseaseOutbreakEventId: Id): FutureData<PerformanceMetrics717[]> {
         return apiToFuture(
-            this.api.analytics.get({
-                dimension: [`dx:${EVENT_TRACKER_717_IDS.map(({ id }) => id).join(";")}`],
+            this.api.analytics.getEnrollmentsQuery({
+                programId: RTSL_ZEBRA_PROGRAM_ID,
+                dimension: [...EVENT_TRACKER_717_IDS.map(({ id }) => id)],
                 startDate: DEFAULT_START_DATE,
                 endDate: DEFAULT_END_DATE,
-                includeMetadataDetails: true,
             })
-        ).map(res => {
-            return this.mapIndicatorsTo717PerformanceMetrics(res.rows, EVENT_TRACKER_717_IDS);
+        ).flatMap(response => {
+            const filteredRow = filterAnalyticsEnrollmentDataByDiseaseOutbreakEvent(
+                diseaseOutbreakEventId,
+                response.rows,
+                response.headers
+            );
+
+            if (!filteredRow)
+                return Future.error(new Error("No data found for event tracker 7-1-7 performance"));
+
+            const mappedIndicatorsToRows: string[][] = EVENT_TRACKER_717_IDS.map(({ id }) => {
+                return [
+                    id,
+                    filteredRow[response.headers.findIndex(header => header.name === id)] || "",
+                ];
+            });
+
+            return Future.success(
+                this.mapIndicatorsTo717PerformanceMetrics(
+                    mappedIndicatorsToRows,
+                    EVENT_TRACKER_717_IDS
+                )
+            );
         });
     }
 
@@ -314,3 +336,14 @@ export class PerformanceOverviewD2Repository implements PerformanceOverviewRepos
         }, {} as Partial<PerformanceOverviewMetrics>);
     }
 }
+
+function filterAnalyticsEnrollmentDataByDiseaseOutbreakEvent(
+    diseaseOutbreakEventId: Id,
+    rows: string[][],
+    headers: { name: string; column: string }[]
+): string[] | undefined {
+    return rows.filter(row => {
+        const teiId = row[headers.findIndex(header => header.name === "tei")];
+        return teiId === diseaseOutbreakEventId;
+    })[0];
+}
diff --git a/src/data/repositories/test/PerformanceOverviewTestRepository.ts b/src/data/repositories/test/PerformanceOverviewTestRepository.ts
@@ -1,10 +1,13 @@
 import { PerformanceMetrics717 } from "../../../domain/entities/disease-outbreak-event/PerformanceOverviewMetrics";
 import { Future } from "../../../domain/entities/generic/Future";
+import { Id } from "../../../domain/entities/Ref";
 import { PerformanceOverviewRepository } from "../../../domain/repositories/PerformanceOverviewRepository";
 import { FutureData } from "../../api-futures";
 
 export class PerformanceOverviewTestRepository implements PerformanceOverviewRepository {
-    getEventTracker717Performance(): FutureData<PerformanceMetrics717[]> {
+    getEventTracker717Performance(
+        _diseaseOutbreakEventId: Id
+    ): FutureData<PerformanceMetrics717[]> {
         return Future.success([]);
     }
     getTotalCardCounts(): FutureData<any> {

diff --git a/src/domain/repositories/PerformanceOverviewRepository.ts b/src/domain/repositories/PerformanceOverviewRepository.ts
@@ -5,6 +5,7 @@ import {
     PerformanceOverviewMetrics,
     PerformanceMetrics717,
 } from "../entities/disease-outbreak-event/PerformanceOverviewMetrics";
+import { Id } from "../entities/Ref";
 
 export interface PerformanceOverviewRepository {
     getPerformanceOverviewMetrics(
@@ -17,5 +18,5 @@ export interface PerformanceOverviewRepository {
         dateRangeFilter?: string[]
     ): FutureData<TotalCardCounts[]>;
     getDashboard717Performance(): FutureData<PerformanceMetrics717[]>;
-    getEventTracker717Performance(): FutureData<PerformanceMetrics717[]>;
+    getEventTracker717Performance(diseaseOutbreakEventId: Id): FutureData<PerformanceMetrics717[]>;
 }
diff --git a/src/domain/usecases/Get717PerformanceUseCase.ts b/src/domain/usecases/Get717PerformanceUseCase.ts
@@ -1,5 +1,6 @@
 import { FutureData } from "../../data/api-futures";
 import { PerformanceMetrics717 } from "../entities/disease-outbreak-event/PerformanceOverviewMetrics";
+import { Id } from "../entities/Ref";
 import { PerformanceOverviewRepository } from "../repositories/PerformanceOverviewRepository";
 
 export class Get717PerformanceUseCase {
@@ -9,9 +10,14 @@ export class Get717PerformanceUseCase {
         }
     ) {}
 
-    public execute(type: "dashboard" | "event_tracker"): FutureData<PerformanceMetrics717[]> {
-        if (type === "event_tracker") {
-            return this.options.performanceOverviewRepository.getEventTracker717Performance();
+    public execute(
+        type: "dashboard" | "event_tracker",
+        diseaseOutbreakEventId: Id | undefined
+    ): FutureData<PerformanceMetrics717[]> {
+        if (type === "event_tracker" && diseaseOutbreakEventId) {
+            return this.options.performanceOverviewRepository.getEventTracker717Performance(
+                diseaseOutbreakEventId
+            );
         } else if (type === "dashboard") {
             return this.options.performanceOverviewRepository.getDashboard717Performance();
         } else throw new Error(`Unknown 717 type: ${type} `);

diff --git a/src/webapp/components/table/statistic-table/StatisticTable.tsx b/src/webapp/components/table/statistic-table/StatisticTable.tsx
@@ -19,9 +19,10 @@ import { ColoredCell } from "./ColoredCell";
 import { CalculationRow } from "./CalculationRow";
 import { Order } from "../../../pages/dashboard/usePerformanceOverview";
 import { Option } from "../../utils/option";
-import { Id } from "../../../../domain/entities/Ref";
 import { Maybe } from "../../../../utils/ts-utils";
 import { PerformanceOverviewMetrics } from "../../../../domain/entities/disease-outbreak-event/PerformanceOverviewMetrics";
+import { Link } from "react-router-dom";
+import { RouteName, useRoutes } from "../../../hooks/useRoutes";
 
 export type TableColumn = {
     value: string;
@@ -53,7 +54,6 @@ export type StatisticTableProps = {
     filters: FiltersConfig[];
     order: Maybe<Order>;
     setOrder: Dispatch<SetStateAction<Maybe<Order>>>;
-    goToEvent: (id: Maybe<Id>) => void;
 };
 
 export const StatisticTable: React.FC<StatisticTableProps> = React.memo(
@@ -65,8 +65,9 @@ export const StatisticTable: React.FC<StatisticTableProps> = React.memo(
         filters: filtersConfig,
         order,
         setOrder,
-        goToEvent,
     }) => {
+        const { generatePath } = useRoutes();
+
         const calculateColumns = [...editRiskAssessmentColumns, ...Object.keys(columnRules)];
 
         const { searchTerm, setSearchTerm, filters, setFilters, filteredRows, filterOptions } =
@@ -151,11 +152,21 @@ export const StatisticTable: React.FC<StatisticTableProps> = React.memo(
                                             />
                                         ) : (
                                             <StyledTableCell
-                                                onClick={() => goToEvent(row.id)}
                                                 key={`${rowIndex}-${column.value}`}
                                                 $link={columnIndex === 0}
                                             >
-                                                {row[column.value] || ""}
+                                                {row.id ? (
+                                                    <StyledLink
+                                                        to={generatePath(RouteName.EVENT_TRACKER, {
+                                                            id: row.id,
+                                                        })}
+                                                        $link={columnIndex === 0}
+                                                    >
+                                                        {row[column.value]}
+                                                    </StyledLink>
+                                                ) : (
+                                                    row[column.value]
+                                                )}
                                             </StyledTableCell>
                                         )
                                     )}
@@ -218,6 +229,15 @@ const StyledTableCell = styled(TableCell)<{ $link?: boolean }>`
     font-weight: ${props => (props.$link ? "600" : "initial")};
 `;
 
+const StyledLink = styled(Link)<{ $link?: boolean }>`
+    text-decoration: ${props => (props.$link ? "underline" : "none")};
+    cursor: ${props => (props.$link ? "pointer" : "initial")};
+    font-weight: ${props => (props.$link ? "600" : "initial")};
+    color: ${props => props.theme.palette.text.primary};
+    width: 100%;
+    height: 100%;
+`;
+
 const Container = styled.div`
     display: flex;
     justify-content: space-between;

diff --git a/src/webapp/hooks/useRoutes.ts b/src/webapp/hooks/useRoutes.ts
@@ -1,6 +1,6 @@
 import React from "react";
 import { join } from "string-ts";
-import { generatePath, useHistory } from "react-router-dom";
+import { generatePath as generatePathRRD, useHistory } from "react-router-dom";
 
 import { FormType } from "../pages/form-page/FormPage";
 
@@ -43,16 +43,29 @@ type RouteParams = {
     [RouteName.DASHBOARD]: undefined;
 };
 
-export function useRoutes() {
+type State = {
+    goTo: <T extends RouteName>(route: T, params?: RouteParams[T]) => void;
+    generatePath: <T extends RouteName>(route: T, params?: RouteParams[T]) => string;
+};
+
+export function useRoutes(): State {
     const history = useHistory();
 
     const goTo = React.useCallback(
         <T extends RouteName>(route: T, params?: RouteParams[T]) => {
-            const path = generatePath(routes[route], params as any);
+            const path = generatePathRRD(routes[route], params as any);
             history.push(path);
         },
         [history]
     );
 
-    return { goTo };
+    const generatePath = React.useCallback(
+        <T extends RouteName>(route: T, params?: RouteParams[T]) => {
+            const path = generatePathRRD(routes[route], params as any);
+            return path;
+        },
+        []
+    );
+
+    return { goTo, generatePath };
 }
diff --git a/src/webapp/pages/dashboard/DashboardPage.tsx b/src/webapp/pages/dashboard/DashboardPage.tsx
@@ -9,10 +9,7 @@ import { useCardCounts } from "./useCardCounts";
 import { StatsCard } from "../../components/stats-card/StatsCard";
 import styled from "styled-components";
 import { MultipleSelector } from "../../components/selector/MultipleSelector";
-import { Id } from "../../../domain/entities/Ref";
-import { Maybe } from "../../../utils/ts-utils";
 import { useCurrentEventTracker } from "../../contexts/current-event-tracker-context";
-import { RouteName, useRoutes } from "../../hooks/useRoutes";
 import { useAlertsActiveVerifiedFilters } from "./useAlertsActiveVerifiedFilters";
 import { MapSection } from "../../components/map/MapSection";
 import { Selector } from "../../components/selector/Selector";
@@ -49,7 +46,6 @@ export const DashboardPage: React.FC = React.memo(() => {
         dateRangeFilter.value
     );
 
-    const { goTo } = useRoutes();
     const { resetCurrentEventTracker: resetCurrentEventTrackerId } = useCurrentEventTracker();
     const { lastAnalyticsRuntime } = useLastAnalyticsRuntime();
 
@@ -58,11 +54,6 @@ export const DashboardPage: React.FC = React.memo(() => {
         resetCurrentEventTrackerId();
     });
 
-    const goToEvent = (id: Maybe<Id>) => {
-        if (!id) return;
-        goTo(RouteName.EVENT_TRACKER, { id });
-    };
-
     return performanceOverviewLoading || _717CardsLoading || cardCountsLoading ? (
         <Loader />
     ) : (
@@ -158,7 +149,6 @@ export const DashboardPage: React.FC = React.memo(() => {
                         setOrder={setOrder}
                         columnRules={columnRules}
                         editRiskAssessmentColumns={editRiskAssessmentColumns}
-                        goToEvent={goToEvent}
                     />
                 </StatisticTableWrapper>
             </Section>

diff --git a/src/webapp/pages/dashboard/use717Performance.ts b/src/webapp/pages/dashboard/use717Performance.ts
@@ -3,6 +3,7 @@ import { useAppContext } from "../../contexts/app-context";
 import _ from "../../../domain/entities/generic/Collection";
 import { StatsCardProps } from "../../components/stats-card/StatsCard";
 import { PerformanceMetrics717 } from "../../../domain/entities/disease-outbreak-event/PerformanceOverviewMetrics";
+import { Id } from "../../../domain/entities/Ref";
 
 type CardColors = StatsCardProps["color"];
 
@@ -19,7 +20,10 @@ export type PerformanceMetric717State = {
 
 export type Order = { name: string; direction: "asc" | "desc" };
 
-export function use717Performance(type: "dashboard" | "event_tracker"): PerformanceMetric717State {
+export function use717Performance(
+    type: "dashboard" | "event_tracker",
+    diseaseOutbreakEventId?: Id
+): PerformanceMetric717State {
     const { compositionRoot } = useAppContext();
 
     const [performanceMetrics717, setPerformanceMetrics717] = useState<PerformanceMetric717[]>([]);
@@ -68,17 +72,24 @@ export function use717Performance(type: "dashboard" | "event_tracker"): Performa
 
     useEffect(() => {
         setIsLoading(true);
-        compositionRoot.performanceOverview.get717Performance.execute(type).run(
-            performanceMetrics717 => {
-                setPerformanceMetrics717(transformData(performanceMetrics717));
-                setIsLoading(false);
-            },
-            error => {
-                console.error({ error });
-                setIsLoading(false);
-            }
-        );
-    }, [compositionRoot.performanceOverview.get717Performance, transformData, type]);
+        compositionRoot.performanceOverview.get717Performance
+            .execute(type, diseaseOutbreakEventId)
+            .run(
+                performanceMetrics717 => {
+                    setPerformanceMetrics717(transformData(performanceMetrics717));
+                    setIsLoading(false);
+                },
+                error => {
+                    console.error({ error });
+                    setIsLoading(false);
+                }
+            );
+    }, [
+        compositionRoot.performanceOverview.get717Performance,
+        diseaseOutbreakEventId,
+        transformData,
+        type,
+    ]);
 
     return {
         performanceMetrics717,

diff --git a/src/webapp/pages/event-tracker/EventTrackerPage.tsx b/src/webapp/pages/event-tracker/EventTrackerPage.tsx
@@ -56,8 +56,11 @@ export const EventTrackerPage: React.FC = React.memo(() => {
             formType: "risk-assessment-summary",
         });
     }, [goTo]);
-    const { performanceMetrics717, isLoading: _717CardsLoading } =
-        use717Performance("event_tracker");
+
+    const { performanceMetrics717, isLoading: _717CardsLoading } = use717Performance(
+        "event_tracker",
+        id
+    );
 
     useEffect(() => {
         if (eventTrackerDetails) changeCurrentEventTrackerId(eventTrackerDetails);