@gen-epix/ui 1.15.1 → 1.15.2

package/src/components/epi/EpiCurve/EpiCurve.tsx

@@ -1,525 +0,0 @@
-import {
-  Box,
-  ListItemIcon,
-  ListItemText,
-  MenuItem,
-} from '@mui/material';
-import * as echarts from 'echarts/core';
-import {
-  DataZoomComponent,
-  GridComponent,
-  TooltipComponent,
-} from 'echarts/components';
-import { BarChart } from 'echarts/charts';
-import { CanvasRenderer } from 'echarts/renderers';
-import type { EChartsReactProps } from 'echarts-for-react';
-import EChartsReact from 'echarts-for-react';
-import type { ReactElement } from 'react';
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import intersection from 'lodash/intersection';
-import isString from 'lodash/isString';
-import round from 'lodash/round';
-import sum from 'lodash/sum';
-import type {
-  BarSeriesOption,
-  EChartsOption,
-} from 'echarts';
-import { useTranslation } from 'react-i18next';
-import { useStore } from 'zustand';
-import FilterAltIcon from '@mui/icons-material/FilterAlt';
-import {
-  endOfISOWeek,
-  endOfQuarter,
-  endOfYear,
-  lastDayOfMonth,
-  parse,
-  startOfISOWeek,
-  startOfMonth,
-  startOfQuarter,
-  startOfYear,
-} from 'date-fns';
-
-import type { Col } from '../../../api';
-import { DimType } from '../../../api';
-import { ConfigManager } from '../../../classes/managers/ConfigManager';
-import { EpiHighlightingManager } from '../../../classes/managers/EpiHighlightingManager';
-import { EPI_ZONE } from '../../../models/epi';
-import type { MenuItemData } from '../../../models/nestedMenu';
-import { EpiDashboardStoreContext } from '../../../stores/epiDashboardStore';
-import { CaseTypeUtil } from '../../../utils/CaseTypeUtil';
-import { EpiCurveUtil } from '../../../utils/EpiCurveUtil';
-import type { EpiContextMenuConfigWithPosition } from '../EpiContextMenu';
-import { EpiContextMenu } from '../EpiContextMenu';
-import { EpiWidget } from '../EpiWidget';
-import { EpiWidgetUnavailable } from '../EpiWidgetUnavailable';
-import { DATE_FORMAT } from '../../../data/date';
-import { EpiEventBusManager } from '../../../classes/managers/EpiEventBusManager';
-import { DownloadUtil } from '../../../utils/DownloadUtil';
-import { EpiLineListUtil } from '../../../utils/EpiLineListUtil';
-
-echarts.use([TooltipComponent, GridComponent, DataZoomComponent, BarChart, CanvasRenderer]);
-
-type LspEchartsEvent = {
-  data: [unknown, unknown, string];
-  event: {
-    event: MouseEvent;
-  };
-};
-
-export const EpiCurve = () => {
-  const { t } = useTranslation();
-  const [epiContextMenuConfig, setEpiContextMenuConfig] = useState<EpiContextMenuConfigWithPosition | null>(null);
-  const [hasRenderedOnce, setHasRenderedOnce] = useState(false);
-  const highlightingManager = useMemo(() => EpiHighlightingManager.instance, []);
-  const chartRef = useRef<EChartsReact>(null);
-
-  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 completeCaseType = useStore(epiDashboardStore, (state) => state.completeCaseType);
-  const updateEpiCurveWidgetData = useStore(epiDashboardStore, (state) => state.updateEpiCurveWidgetData);
-  const epiCurveWidgetData = useStore(epiDashboardStore, (state) => state.epiCurveWidgetData);
-  const setFilterValue = useStore(epiDashboardStore, (state) => state.setFilterValue);
-  const filterDimensions = useStore(epiDashboardStore, (state) => state.filterDimensions);
-  const timeDims = useMemo(() => CaseTypeUtil.getDims(completeCaseType, [DimType.TIME]), [completeCaseType]);
-  const [focussedDate, setFocussedDate] = useState<string>(null);
-  const [col, setCol] = useState<Col>(null);
-
-  const onEpiContextMenuClose = useCallback(() => {
-    setEpiContextMenuConfig(null);
-    setFocussedDate(null);
-  }, []);
-
-  const lineListCaseCount = useMemo(() => {
-    return EpiLineListUtil.getCaseCount(sortedData);
-  }, [sortedData]);
-
-  const titleMenu = useMemo<MenuItemData>(() => {
-    let label: string;
-    if (col) {
-      label = t('Epi curve: {{label}}', { label: col.label });
-    } else {
-      label = t`Epi curve`;
-    }
-
-    const menu: MenuItemData = {
-      label,
-      tooltip: col ? completeCaseType.ref_cols[col.ref_col_id].description : undefined,
-      disabled: !timeDims.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.TIME;
-    }).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: () => {
-            updateEpiCurveWidgetData({ columnId: c.id });
-            setCol(c);
-          },
-        });
-      });
-    });
-
-    return menu;
-  }, [col, completeCaseType, t, timeDims.length, updateEpiCurveWidgetData]);
-
-  useEffect(() => {
-    if (col) {
-      return;
-    }
-    if (!timeDims.length) {
-      throw Error('Epi curve can not be shown');
-    }
-    if (epiCurveWidgetData.columnId) {
-      setCol(CaseTypeUtil.getCols(completeCaseType).find(c => c.id === epiCurveWidgetData.columnId));
-    } else if (sortedData.length) {
-      setCol(EpiCurveUtil.getPreferredTimeColumn(
-        completeCaseType,
-        sortedData,
-        CaseTypeUtil.getCols(completeCaseType, completeCaseType.case_date_dim_id),
-      ));
-    }
-  }, [col, completeCaseType, epiCurveWidgetData.columnId, timeDims, sortedData]);
-
-  const items = useMemo(() => {
-    if (!col) {
-      return [];
-    }
-    return EpiCurveUtil.getSortedItems(completeCaseType, sortedData, [col]);
-  }, [col, sortedData, completeCaseType]);
-
-  const epiCurveCaseCount = useMemo(() => {
-    return items.reduce((prev, current) => {
-      return prev + current.value;
-    }, 0) ?? 0;
-  }, [items]);
-
-  const getXAxisLabel = useCallback((value: Date): string => {
-    if (!col) {
-      return null;
-    }
-
-    return EpiCurveUtil.getXAxisLabel(completeCaseType.ref_cols[col.ref_col_id].col_type, value);
-  }, [col, completeCaseType.ref_cols]);
-
-  const xAxisIntervals = useMemo<Date[]>(() => {
-    if (!col) {
-      return [];
-    }
-    return EpiCurveUtil.getXAxisIntervals(completeCaseType.ref_cols[col.ref_col_id].col_type, items);
-  }, [col, completeCaseType.ref_cols, items]);
-
-  const serieData = useMemo<{ series: BarSeriesOption[]; max: number }>(() => {
-    if (!items) {
-      return {
-        series: null,
-        max: null,
-      };
-    }
-
-    let max = 0;
-    const barSerieOptionsBase: BarSeriesOption = {
-      type: 'bar',
-      emphasis: {
-        focus: 'self',
-      },
-      stack: 'total',
-    };
-    const barSeries: BarSeriesOption[] = [];
-    if (!stratification) {
-      barSeries.push({
-        ...barSerieOptionsBase,
-        color: ConfigManager.instance.config.epi.STRATIFICATION_COLORS[0],
-        data: [],
-        name: '',
-      });
-    } else {
-      stratification.legendaItems.forEach(legendaItem => {
-        barSeries.push({
-          ...barSerieOptionsBase,
-          color: legendaItem.color,
-          data: [],
-          name: legendaItem.rowValue.full,
-        });
-      });
-    }
-
-    xAxisIntervals.forEach((interval, intervalIndex) => {
-      const itemsWithinInterval = EpiCurveUtil.getItemsWithinInterval(items, xAxisIntervals, intervalIndex);
-      const xAxisLabel = getXAxisLabel(interval);
-      const intervalTotal = sum(itemsWithinInterval.map(item => item.value));
-
-      if (intervalTotal > max) {
-        max = intervalTotal;
-      }
-
-      if (!stratification) {
-        barSeries[0].data.push([
-          xAxisLabel,
-          intervalTotal,
-          JSON.stringify(itemsWithinInterval.map(item => item.row.id)),
-        ]);
-      } else {
-        barSeries.forEach(barSerie => {
-          const filteredItems = itemsWithinInterval.filter(item => stratification.caseIdColors[item.row.id] === barSerie.color);
-          barSerie.data.push([
-            xAxisLabel,
-            sum(itemsWithinInterval.filter(item => stratification.caseIdColors[item.row.id] === barSerie.color).map(item => item.value)),
-            JSON.stringify(filteredItems.map(item => item.row.id)),
-          ]);
-        });
-      }
-    });
-
-    return {
-      series: barSeries,
-      max,
-    };
-  }, [stratification, xAxisIntervals, items, getXAxisLabel]);
-
-  const events = useMemo<EChartsReactProps['onEvents']>(() => {
-    return {
-      finished: !hasRenderedOnce ? () => {
-        const dom = chartRef?.current?.getEchartsInstance()?.getDom();
-        dom?.setAttribute('aria-label', t('Epidemiological curve showing the number of cases over time ({{label}})', { label: col?.label ?? '' }));
-        dom?.setAttribute('role', 'img');
-        setHasRenderedOnce(true);
-      } : undefined,
-      mouseover: (event: unknown) => {
-        highlightingManager.highlight({
-          caseIds: JSON.parse((event as LspEchartsEvent).data[2]) as string[],
-          origin: EPI_ZONE.EPI_CURVE,
-        });
-      },
-      mouseout: () => {
-        highlightingManager.highlight({
-          caseIds: [],
-          origin: EPI_ZONE.EPI_CURVE,
-        });
-      },
-      mouseup: (event: unknown) => {
-        setFocussedDate((event as { name: string }).name);
-        const mouseEvent = (event as { event: { event: MouseEvent } })?.event?.event;
-        const caseIds = JSON.parse((event as LspEchartsEvent).data[2]) as string[];
-        setEpiContextMenuConfig({
-          caseIds,
-          position: {
-            left: (event as { event: { event: MouseEvent } }).event.event.clientX,
-            top: (event as { event: { event: MouseEvent } }).event.event.clientY,
-          },
-          mouseEvent,
-        });
-      },
-
-    };
-  }, [col?.label, hasRenderedOnce, highlightingManager, t]);
-
-  useEffect(() => {
-    const unsubscribe = highlightingManager.subscribe((highlighting) => {
-      const instance = chartRef.current?.getEchartsInstance();
-      if (highlighting.origin === EPI_ZONE.EPI_CURVE || !instance) {
-        return;
-      }
-      const foundSerieIndexes: number[] = [];
-      const foundDataIndexes: number[] = [];
-      serieData.series.forEach((serie, serieIndex) => {
-        serie.data.forEach((dataArray, dataIndex) => {
-          const caseIds = JSON.parse((dataArray as [unknown, unknown, string])[2]) as string[];
-          if (intersection(caseIds, highlighting.caseIds).length) {
-            if (!foundSerieIndexes.includes(serieIndex)) {
-              foundSerieIndexes.push(serieIndex);
-            }
-            foundDataIndexes.push(dataIndex);
-          }
-        });
-      });
-      if (!chartRef?.current) {
-        return;
-      }
-      if (highlighting.caseIds.length) {
-        instance.dispatchAction({
-          type: 'highlight',
-          seriesIndex: foundSerieIndexes,
-          dataIndex: foundDataIndexes,
-        });
-      } else {
-        instance.dispatchAction({
-          type: 'downplay',
-        });
-      }
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, [chartRef, highlightingManager, serieData.series]);
-
-  const getOptions = useCallback(() => {
-    return {
-      grid: {
-        bottom: 64,
-        left: 48,
-        right: 8,
-        top: 16,
-      },
-      tooltip: {
-        show: true,
-        triggerOn: 'mousemove',
-        trigger: 'item',
-        formatter: (params) => {
-          const typedParams = params as { name: string; value: number[]; seriesName: string };
-
-          if (stratification) {
-            return `${typedParams.name} - ${typedParams.seriesName} (n=${typedParams.value[1]})`;
-          }
-          return `${typedParams.name} (n=${typedParams.value[1]})`;
-        },
-      },
-      xAxis: {
-        type: 'category',
-        data: xAxisIntervals.map(x => getXAxisLabel(x)),
-        axisTick: {
-          show: true,
-          alignWithLabel: true,
-        },
-        axisLabel: {
-          rotate: 45,
-          height: 100,
-        },
-      },
-      yAxis: {
-        type: 'value',
-        minInterval: 1,
-        min: 0,
-        max: serieData.max,
-      },
-      series: serieData.series,
-      color: ConfigManager.instance.config.epi.STRATIFICATION_COLORS,
-    } satisfies EChartsOption;
-  }, [serieData, xAxisIntervals, getXAxisLabel, stratification]);
-
-  const onShowOnlySelectedDateMenuItemClick = useCallback(async (onMenuClose: () => void) => {
-    if (!isString(focussedDate) || !col?.id) {
-      onMenuClose();
-      return;
-    }
-    const dateDimension = filterDimensions.find(filterDimension => filterDimension.filterIds.includes(col.id));
-    const dateColumnId = dateDimension.preferredFilterId;
-
-    let fromDate: Date;
-    let toDate: Date;
-
-    if (focussedDate.match(/^\d{4}$/)) {
-      const date = parse(focussedDate, DATE_FORMAT.YEAR, new Date());
-      fromDate = startOfYear(date);
-      toDate = endOfYear(date);
-      // year
-    } else if (focussedDate.match(/^\d{4}-\d{2}$/)) {
-      // month
-      const date = parse(focussedDate, DATE_FORMAT.YEAR_MONTH, new Date());
-      fromDate = startOfMonth(date);
-      toDate = lastDayOfMonth(date);
-    } else if (focussedDate.match(/^\d{4}-\d{2}-\d{2}$/)) {
-      // full date
-      const date = parse(focussedDate, DATE_FORMAT.DATE, new Date());
-      fromDate = date;
-      toDate = date;
-    } else if (focussedDate.match(/^\d{4}-W\d{2}$/)) {
-      // week
-      const date = parse(focussedDate, DATE_FORMAT.YEAR_WEEK, new Date(), {
-        useAdditionalWeekYearTokens: true,
-      });
-      fromDate = startOfISOWeek(date);
-      toDate = endOfISOWeek(date);
-    } else if (focussedDate.match(/^\d{4}-Q\d$/)) {
-      // quarter
-      const date = parse(focussedDate, DATE_FORMAT.YEAR_QUARTER, new Date());
-      fromDate = startOfQuarter(date);
-      toDate = endOfQuarter(date);
-    }
-
-    if (fromDate && toDate) {
-      await setFilterValue(dateColumnId, [fromDate, toDate]);
-    }
-
-    onMenuClose();
-  }, [focussedDate, col?.id, filterDimensions, setFilterValue]);
-
-  const getEpiContextMenuExtraItems = useCallback((onMenuClose: () => void): ReactElement => {
-    if (!focussedDate) {
-      return null;
-    }
-    return (
-      <MenuItem
-        divider
-        // eslint-disable-next-line react/jsx-no-bind
-        onClick={async () => await onShowOnlySelectedDateMenuItemClick(onMenuClose)}
-      >
-        <ListItemIcon>
-          <FilterAltIcon fontSize={'small'} />
-        </ListItemIcon>
-        <ListItemText>
-          {t('Filter (show only {{date}})', { date: focussedDate })}
-        </ListItemText>
-      </MenuItem>
-    );
-  }, [focussedDate, onShowOnlySelectedDateMenuItemClick, t]);
-
-  const missingCasesCount = lineListCaseCount - epiCurveCaseCount;
-  const missingCasesPercentage = missingCasesCount > 0 ? round(missingCasesCount / lineListCaseCount * 100, 1) : 0;
-  const shouldShowEpiCurve = epiCurveCaseCount > 0 && timeDims.length > 0;
-
-
-  useEffect(() => {
-    const emitDownloadOptions = () => {
-      EpiEventBusManager.instance.emit('onDownloadOptionsChanged', {
-        zone: EPI_ZONE.EPI_CURVE,
-        disabled: !shouldShowEpiCurve,
-        zoneLabel: t`Epi curve`,
-        items: [
-          {
-            label: t`Save as PNG`,
-            callback: () => DownloadUtil.downloadEchartsImage(t`Epi curve`, chartRef.current.getEchartsInstance(), 'png', completeCaseType, t),
-          },
-          {
-            label: t`Save as JPEG`,
-            callback: () => DownloadUtil.downloadEchartsImage(t`Epi curve`, chartRef.current.getEchartsInstance(), 'jpeg', completeCaseType, t),
-          },
-        ],
-      });
-    };
-    emitDownloadOptions();
-    const remove = EpiEventBusManager.instance.addEventListener('onDownloadOptionsRequested', emitDownloadOptions);
-
-    return () => {
-      EpiEventBusManager.instance.emit('onDownloadOptionsChanged', {
-        zone: EPI_ZONE.EPI_CURVE,
-        zoneLabel: t`Epi curve`,
-        items: null,
-      });
-      remove();
-    };
-  }, [completeCaseType, shouldShowEpiCurve, t]);
-
-  return (
-    <EpiWidget
-      expandDisabled={!shouldShowEpiCurve}
-      isLoading={isDataLoading}
-      title={titleMenu}
-      warningMessage={shouldShowEpiCurve && epiCurveCaseCount > 0 && missingCasesCount > 0 ? t('Missing cases: {{missingCasesCount}} ({{missingCasesPercentage}}%)', { missingCasesCount, missingCasesPercentage }) : undefined}
-      zone={EPI_ZONE.EPI_CURVE}
-    >
-      {!shouldShowEpiCurve && (
-        <EpiWidgetUnavailable
-          epiZone={EPI_ZONE.EPI_CURVE}
-          widgetName={t`epi curve`}
-        />
-      )}
-      {shouldShowEpiCurve && (
-        <Box
-          sx={{
-            height: '100%',
-            position: 'relative',
-          }}
-        >
-          {items?.length > 0 && (
-            <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/EpiCurve/index.ts

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

package/src/components/epi/EpiCustomTabPanel/EpiCustomTabPanel.tsx

@@ -1,27 +0,0 @@
-import { Box } from '@mui/material';
-import type { PropsWithChildren } from 'react';
-
-export type EpiCustomTabPanelProps = PropsWithChildren<{
-  readonly index: number;
-  readonly value: number;
-}>;
-
-export const EpiCustomTabPanel = (props: EpiCustomTabPanelProps) => {
-  const { children, value, index, ...other } = props;
-
-  return (
-    <div
-      aria-labelledby={`simple-tab-${index}`}
-      hidden={value !== index}
-      id={`simple-tabpanel-${index}`}
-      role={'tabpanel'}
-      {...other}
-    >
-      {value === index && (
-        <Box sx={{ p: 3 }}>
-          {children}
-        </Box>
-      )}
-    </div>
-  );
-};

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

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