@gen-epix/ui 1.14.4 → 1.15.0

package/src/components/epi/EpiMap/EpiMap.tsx

@@ -0,0 +1,547 @@
+import {
+  Box,
+  ListItemIcon,
+  ListItemText,
+  MenuItem,
+} from '@mui/material';
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import type { EChartsReactProps } from 'echarts-for-react';
+import EChartsReact from 'echarts-for-react';
+import {
+  TooltipComponent,
+  GeoComponent,
+  LegendComponent,
+} from 'echarts/components';
+import { PieChart } from 'echarts/charts';
+import * as echarts from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import type { ReactElement } from 'react';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type {
+  EChartsOption,
+  PieSeriesOption,
+} from 'echarts';
+import { useTranslation } from 'react-i18next';
+import intersection from 'lodash/intersection';
+import round from 'lodash/round';
+import { useStore } from 'zustand';
+
+import { EpiWidget } from '../EpiWidget';
+import type { EpiContextMenuConfigWithPosition } from '../EpiContextMenu';
+import { EpiContextMenu } from '../EpiContextMenu';
+import { EpiWidgetUnavailable } from '../EpiWidgetUnavailable';
+import type {
+  Col,
+  Region,
+  TypedUuidSetFilter,
+  RegionSetShape,
+} from '../../../api';
+import {
+  DimType,
+  GeoApi,
+} from '../../../api';
+import { ConfigManager } from '../../../classes/managers/ConfigManager';
+import { EpiHighlightingManager } from '../../../classes/managers/EpiHighlightingManager';
+import { useDimensions } from '../../../hooks/useDimensions';
+import { EPI_ZONE } from '../../../models/epi';
+import type { UnwrapArray } from '../../../models/generic';
+import type { MenuItemData } from '../../../models/nestedMenu';
+import { QUERY_KEY } from '../../../models/query';
+import { EpiDashboardStoreContext } from '../../../stores/epiDashboardStore';
+import { CaseTypeUtil } from '../../../utils/CaseTypeUtil';
+import { EpiLineListUtil } from '../../../utils/EpiLineListUtil';
+import { EpiMapUtil } from '../../../utils/EpiMapUtil';
+import { QueryUtil } from '../../../utils/QueryUtil';
+import { EpiEventBusManager } from '../../../classes/managers/EpiEventBusManager';
+import { DownloadUtil } from '../../../utils/DownloadUtil';
+import { useQueryMemo } from '../../../hooks/useQueryMemo';
+import { EpiDataManager } from '../../../classes/managers/EpiDataManager';
+
+echarts.use([GeoComponent, TooltipComponent, LegendComponent, CanvasRenderer, PieChart]);
+
+type GeoJSON = { features: unknown[] };
+
+type LspPieSeriesOptionEventData = {
+  lspData?: {
+    caseIds: string[];
+    regionId: string;
+  };
+};
+type LspPieSeriesOptionData = Array<UnwrapArray<PieSeriesOption['data']> & LspPieSeriesOptionEventData>;
+type LspEchartsEvent = {
+  data: LspPieSeriesOptionEventData;
+  event: {
+    event: MouseEvent;
+  };
+};
+
+export const EpiMap = () => {
+  const { t } = useTranslation();
+  const [col, setCol] = useState<Col>(null);
+  const [epiContextMenuConfig, setEpiContextMenuConfig] = useState<EpiContextMenuConfigWithPosition | null>(null);
+  const [hasRenderedOnce, setHasRenderedOnce] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const chartRef = useRef<EChartsReact>(null);
+  const { dimensions: { width, height } } = useDimensions(containerRef);
+  const highlightingManager = useMemo(() => EpiHighlightingManager.instance, []);
+
+  const epiDashboardStore = useContext(EpiDashboardStoreContext);
+  const stratification = useStore(epiDashboardStore, (state) => state.stratification);
+  const isDataLoading = useStore(epiDashboardStore, (state) => state.isDataLoading);
+  const sortedData = useStore(epiDashboardStore, (state) => state.sortedData);
+  const updateEpiMapWidgetData = useStore(epiDashboardStore, (state) => state.updateEpiMapWidgetData);
+  const epiMapWidgetData = useStore(epiDashboardStore, (state) => state.epiMapWidgetData);
+  const setFilterValue = useStore(epiDashboardStore, (state) => state.setFilterValue);
+  const completeCaseType = useStore(epiDashboardStore, (state) => state.completeCaseType);
+
+  const [focussedRegion, setFocussedRegion] = useState<Region>();
+  const geoDims = useMemo(() => CaseTypeUtil.getDims(completeCaseType, [DimType.GEO]), [completeCaseType]);
+  const regionSetShapesFilter = useMemo<TypedUuidSetFilter>(() => {
+    return {
+      invert: false,
+      key: 'region_set_id',
+      type: 'UUID_SET',
+      members: EpiDataManager.instance.getRegionSetIds(completeCaseType),
+    };
+  }, [completeCaseType]);
+
+  const { isLoading: isRegionSetShapesLoading, error: regionSetShapesError, data: regionSetShapes } = useQueryMemo({
+    queryKey: QueryUtil.getGenericKey(QUERY_KEY.REGION_SET_SHAPES, regionSetShapesFilter),
+    queryFn: async ({ signal }) => {
+      return (await GeoApi.instance.regionSetShapesPostQuery(regionSetShapesFilter, { signal })).data;
+    },
+    select: (shapes) => Object.fromEntries(shapes.map(regionSetShape => [regionSetShape.region_set_id, regionSetShape])),
+    retry: false,
+  });
+
+  useEffect(() => {
+    if (col) {
+      return;
+    }
+    if (!geoDims.length) {
+      throw Error('Epi map can not be shown');
+    }
+    let preferredCol: Col;
+    if (epiMapWidgetData.columnId) {
+      preferredCol = CaseTypeUtil.getCols(completeCaseType).find(c => c.id === epiMapWidgetData.columnId);
+    } else {
+      preferredCol = CaseTypeUtil.getPreferredGEOCol(CaseTypeUtil.getCols(completeCaseType, geoDims[0].id));
+    }
+    setCol(preferredCol);
+  }, [col, completeCaseType, epiMapWidgetData.columnId, geoDims]);
+
+  const regions = useMemo(() => {
+    if (!col) {
+      return [];
+    }
+    const regionSetId = completeCaseType.ref_cols[col.ref_col_id].region_set_id;
+    return EpiDataManager.instance.data.regionsByRegionSetId[regionSetId];
+  }, [col, completeCaseType.ref_cols]);
+
+  const lineListCaseCount = useMemo(() => {
+    return EpiLineListUtil.getCaseCount(sortedData);
+  }, [sortedData]);
+
+  const onEpiContextMenuClose = useCallback(() => {
+    setEpiContextMenuConfig(null);
+    setFocussedRegion(null);
+  }, []);
+
+  const isLoading = isRegionSetShapesLoading || isDataLoading;
+  const error = regionSetShapesError;
+
+  const regionSetShape = useMemo<RegionSetShape>(() => {
+    if (!col || !regionSetShapes) {
+      return null;
+    }
+    const regionSetId = completeCaseType.ref_cols[col.ref_col_id].region_set_id;
+    return regionSetShapes[regionSetId];
+  }, [col, completeCaseType.ref_cols, regionSetShapes]);
+
+  const numZones = useMemo(() => {
+    if (!regionSetShape) {
+      return 0;
+    }
+    try {
+      return (JSON.parse(regionSetShape.geo_json) as GeoJSON).features.length;
+    } catch {
+      return 0;
+    }
+  }, [regionSetShape]);
+
+  const maxPieChartArea = useMemo(() => {
+    if (!width || !height || !numZones) {
+      return 0;
+    }
+    const smallestDimension = Math.min(width, height);
+    const mapArea = smallestDimension ** 2;
+    const zoneArea = mapArea / numZones;
+    const zoneDimension = Math.sqrt(zoneArea);
+    const normalizedZoneDimension = zoneDimension / 4;
+    const zonePieArea = ((normalizedZoneDimension / 2) ** 2) * Math.PI;
+
+    return zonePieArea;
+  }, [height, numZones, width]);
+
+  const lineListRegionStatistics = useMemo(() => EpiMapUtil.getRegionStatistics(sortedData, col?.id, regions), [col?.id, sortedData, regions]);
+  const getPieChartRadius = useCallback((numCases: number): number => {
+    return EpiMapUtil.getPieChartRadius(numCases, maxPieChartArea, lineListRegionStatistics);
+  }, [lineListRegionStatistics, maxPieChartArea]);
+
+  const { series, epiMapCaseCount } = useMemo<{ series: PieSeriesOption[]; epiMapCaseCount: number }>(() => {
+    if (!col || !regions) {
+      return {
+        epiMapCaseCount: undefined,
+        series: [],
+      };
+    }
+
+    const pieSeriesOptions: PieSeriesOption[] = [];
+
+    const { statisticsPerRegion, numCases: totalNumCases } = EpiMapUtil.getRegionStatistics(sortedData, col.id, regions);
+
+    const pieChartOptionsBase: Partial<PieSeriesOption> = {
+      type: 'pie',
+      label: {
+        show: false,
+        silent: true,
+      },
+      labelLine: {
+        show: true,
+        smooth: true,
+      },
+      animation: false,
+      coordinateSystem: 'geo',
+    };
+
+    Object.entries(statisticsPerRegion).forEach(([regionId, regionData]) => {
+      const data: LspPieSeriesOptionData = [];
+
+      if (!stratification) {
+        const caseIds = regionData.rows.map(row => row.id);
+        if (caseIds.length === 0) {
+          return;
+        }
+        data.push({
+          name: 'num-cases',
+          value: regionData.numCases,
+          lspData: {
+            caseIds,
+            regionId,
+          },
+          emphasis: {
+            focus: 'self',
+          },
+          label: {
+            formatter: () => regionData.region.name,
+          },
+        });
+      } else {
+        stratification.legendaItems.forEach(legendaItem => {
+          const rows = regionData.rows.filter(row => legendaItem.caseIds.includes(row.id));
+          const caseIds = rows.map(row => row.id);
+          const numCases = EpiLineListUtil.getCaseCount(rows);
+          data.push({
+            name: legendaItem.rowValue.full,
+            value: numCases,
+            lspData: {
+              caseIds,
+              regionId,
+            },
+            emphasis: {
+              focus: 'self',
+            },
+            label: {
+              formatter: () => regionData.region.name,
+            },
+          });
+        });
+      }
+
+      pieSeriesOptions.push({
+        ...pieChartOptionsBase,
+        tooltip: {
+          formatter: (callbackParams) => {
+            const d = (callbackParams as { data: { name: string; value: number } }).data;
+            if (stratification) {
+              return `${regionData.region.name} - ${d.name} (n=${d.value}, ${Math.round(d.value / regionData.numCases * 100)}%)`;
+            }
+            return `${regionData.region.name} (n=${regionData.numCases}, ${Math.round(regionData.numCases / totalNumCases * 100)}%)`;
+          },
+        },
+        radius: getPieChartRadius(regionData.numCases),
+        center: [regionData.region.center_lon, regionData.region.center_lat],
+        data,
+      });
+    });
+
+    return {
+      series: pieSeriesOptions,
+      epiMapCaseCount: totalNumCases,
+    };
+  }, [col, getPieChartRadius, sortedData, regions, stratification]);
+
+  const getOptions = useCallback(() => {
+    if (!regionSetShape) {
+      return;
+    }
+
+    echarts.registerMap(regionSetShape.id, regionSetShape.geo_json);
+    return {
+      geo: {
+        map: regionSetShape.id,
+        // !FIXME: calculate according to: https://github.com/apache/echarts/issues/10253
+        aspectScale: 0.68,
+        scaleLimit: {
+          max: 5,
+          min: 1,
+        },
+        roam: true,
+        itemStyle: {
+          areaColor: '#e7e8ea',
+        },
+        label: {
+          show: false,
+          silent: true,
+        },
+        emphasis: {
+          disabled: true,
+        },
+        silent: true,
+        zoom: 1,
+      },
+      tooltip: {},
+      legend: {
+        show: false,
+      },
+      series: series as unknown,
+      color: ConfigManager.instance.config.epi.STRATIFICATION_COLORS,
+    } satisfies EChartsOption;
+  }, [regionSetShape, series]);
+
+  const events = useMemo<EChartsReactProps['onEvents']>(() => {
+    return {
+      finished: !hasRenderedOnce ? () => {
+        const dom = chartRef?.current?.getEchartsInstance()?.getDom();
+        dom?.setAttribute('aria-label', t('Figure of a map showing the geographical distribution of cases per region ({{label}})', { label: col?.label ?? '' }));
+        dom?.setAttribute('role', 'img');
+        setHasRenderedOnce(true);
+      } : undefined,
+      mouseover: (event: unknown) => {
+        try {
+          highlightingManager.highlight({
+            caseIds: (event as LspEchartsEvent).data.lspData.caseIds,
+            origin: EPI_ZONE.MAP,
+          });
+        } catch (_error) {
+          // ignore
+        }
+      },
+      mouseout: () => {
+        highlightingManager.highlight({
+          caseIds: [],
+          origin: EPI_ZONE.MAP,
+        });
+      },
+      mouseup: (event: unknown) => {
+        const mouseEvent = (event as LspEchartsEvent)?.event?.event;
+        const eventCaseIds = (event as LspEchartsEvent).data.lspData.caseIds;
+        const region = regions.find(r => r.id === (event as LspEchartsEvent).data.lspData.regionId);
+        setEpiContextMenuConfig({
+          caseIds: eventCaseIds,
+          position: {
+            left: (event as { event: { event: MouseEvent } }).event.event.clientX,
+            top: (event as { event: { event: MouseEvent } }).event.event.clientY,
+          },
+          mouseEvent,
+        });
+        setFocussedRegion(region);
+      },
+    };
+  }, [col?.label, hasRenderedOnce, highlightingManager, regions, t]);
+
+  useEffect(() => {
+    const unsubscribe = highlightingManager.subscribe((highlighting) => {
+      const foundSerieIndexes: number[] = [];
+      const foundDataIndexes: number[] = [];
+      series.forEach((serie, serieIndex) => {
+        serie.data.forEach((dataArray, dataIndex) => {
+          const caseIds = (dataArray as LspPieSeriesOptionEventData).lspData.caseIds;
+          if (intersection(caseIds, highlighting.caseIds).length) {
+            if (!foundSerieIndexes.includes(serieIndex)) {
+              foundSerieIndexes.push(serieIndex);
+            }
+            foundDataIndexes.push(dataIndex);
+          }
+        });
+      });
+      if (!chartRef?.current) {
+        return;
+      }
+
+      if (highlighting.caseIds.length) {
+        chartRef.current.getEchartsInstance()?.dispatchAction({
+          type: 'highlight',
+          seriesIndex: foundSerieIndexes,
+          dataIndex: foundDataIndexes,
+        });
+      } else {
+        chartRef.current.getEchartsInstance()?.dispatchAction({
+          type: 'downplay',
+        });
+      }
+    });
+
+    // use highlighting imperatively
+    return () => {
+      unsubscribe();
+    };
+  }, [chartRef, highlightingManager, series]);
+
+  const titleMenu = useMemo<MenuItemData>(() => {
+    const menu: MenuItemData = {
+      label: col?.label ? t('Map: {{label}}', { label: col.label }) : t`Map`,
+      tooltip: col ? completeCaseType.ref_cols[col.ref_col_id].description : undefined,
+      disabled: !geoDims?.length,
+      items: [],
+    };
+
+    completeCaseType.ordered_dim_ids.map(x => completeCaseType.dims[x]).filter(dim => {
+      const refDim = completeCaseType.ref_dims[dim.ref_dim_id];
+      return refDim.dim_type === DimType.GEO;
+    }).forEach((dim) => {
+      if (menu.items.length) {
+        menu.items.at(-1).divider = true;
+      }
+      completeCaseType.ordered_col_ids_by_dim[dim.id].map(id => completeCaseType.cols[id]).forEach((c) => {
+        menu.items.push({
+          label: c.label,
+          tooltip: c.description,
+          active: c.id === c?.id,
+          callback: () => {
+            updateEpiMapWidgetData({ columnId: c.id });
+            setCol(c);
+          },
+        });
+      });
+    });
+
+    return menu;
+  }, [col, completeCaseType, geoDims.length, t, updateEpiMapWidgetData]);
+
+  const missingCasesCount = epiMapCaseCount !== undefined ? lineListCaseCount - epiMapCaseCount : 0;
+  const missingCasesPercentage = missingCasesCount > 0 ? round(missingCasesCount / lineListCaseCount * 100, 1) : 0;
+  const shouldShowLoading = isLoading && !error;
+  const shouldShowMap = !!col && (regionSetShape?.geo_json && regionSetShape?.geo_json !== 'null') && series.length > 0;
+
+  const onShowOnlySelectedRegionMenuItemClick = useCallback(async (onMenuClose: () => void) => {
+    await setFilterValue(col.id, [focussedRegion.id]);
+    onMenuClose();
+  }, [col?.id, focussedRegion, setFilterValue]);
+
+  const getEpiContextMenuExtraItems = useCallback((onMenuClose: () => void): ReactElement => {
+    if (!col || !focussedRegion?.name) {
+      return null;
+    }
+    return (
+      <MenuItem
+        divider
+        // eslint-disable-next-line react/jsx-no-bind
+        onClick={async () => await onShowOnlySelectedRegionMenuItemClick(onMenuClose)}
+      >
+        <ListItemIcon>
+          <FilterAltIcon fontSize={'small'} />
+        </ListItemIcon>
+        <ListItemText>
+          {t('Filter (show only {{regionName}})', { regionName: focussedRegion?.name ?? '-' })}
+        </ListItemText>
+      </MenuItem>
+    );
+  }, [col, focussedRegion, onShowOnlySelectedRegionMenuItemClick, t]);
+
+  useEffect(() => {
+    const emitDownloadOptions = () => {
+      EpiEventBusManager.instance.emit('onDownloadOptionsChanged', {
+        zone: EPI_ZONE.MAP,
+        disabled: !shouldShowMap,
+        zoneLabel: t`Map`,
+        items: [
+          {
+            label: t`Save as PNG`,
+            callback: () => DownloadUtil.downloadEchartsImage(t`Incidence map`, chartRef.current.getEchartsInstance(), 'png', completeCaseType, t),
+          },
+          {
+            label: t`Save as JPEG`,
+            callback: () => DownloadUtil.downloadEchartsImage(t`Incidence map`, chartRef.current.getEchartsInstance(), 'jpeg', completeCaseType, t),
+          },
+        ],
+      });
+    };
+
+
+    emitDownloadOptions();
+    const remove = EpiEventBusManager.instance.addEventListener('onDownloadOptionsRequested', emitDownloadOptions);
+
+    return () => {
+      EpiEventBusManager.instance.emit('onDownloadOptionsChanged', {
+        zone: EPI_ZONE.MAP,
+        items: null,
+        zoneLabel: t`Map`,
+      });
+      remove();
+    };
+  }, [completeCaseType, shouldShowMap, t]);
+
+  return (
+    <EpiWidget
+      expandDisabled={!shouldShowMap}
+      isLoading={shouldShowLoading}
+      title={titleMenu}
+      warningMessage={shouldShowMap && epiMapCaseCount > 0 && missingCasesCount > 0 ? t('Missing cases: {{missingCasesCount}} ({{missingCasesPercentage}}%)', { missingCasesCount, missingCasesPercentage }) : undefined}
+      zone={EPI_ZONE.MAP}
+    >
+      <Box
+        ref={containerRef}
+        sx={{
+          position: 'relative',
+          height: '100%',
+        }}
+      >
+        {!shouldShowLoading && !shouldShowMap && (
+          <Box sx={{ position: 'absolute' }}>
+            <EpiWidgetUnavailable
+              epiZone={EPI_ZONE.MAP}
+              widgetName={t`map`}
+            />
+          </Box>
+        )}
+        {shouldShowMap && (
+          <EChartsReact
+            ref={chartRef}
+            notMerge
+            echarts={echarts}
+            option={getOptions()}
+            style={{
+              width: '100%',
+              height: '100%',
+              position: 'absolute',
+            }}
+            onEvents={events}
+          />
+        )}
+        <EpiContextMenu
+          config={epiContextMenuConfig}
+          getExtraItems={getEpiContextMenuExtraItems}
+          onMenuClose={onEpiContextMenuClose}
+        />
+      </Box>
+    </EpiWidget>
+  );
+};

package/src/components/epi/EpiMap/index.ts

@@ -0,0 +1 @@
+export * from './EpiMap';