@gen-epix/ui 1.15.0 → 1.15.2

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

@@ -1,547 +0,0 @@
-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

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