@gen-epix/ui 1.15.0 → 1.15.2

package/src/components/epi/EpiCaseTypeInfoDialog/EpiCaseTypeInfoRegions.tsx

@@ -1,87 +0,0 @@
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-} from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { useTranslation } from 'react-i18next';
-import uniq from 'lodash/uniq';
-
-import type { CompleteCaseType } from '../../../api';
-import { EpiDataManager } from '../../../classes/managers/EpiDataManager';
-
-export type EpiCaseTypeInfoRegionsProps = {
-  readonly completeCaseType: CompleteCaseType;
-};
-
-export const EpiCaseTypeInfoRegions = ({ completeCaseType }: EpiCaseTypeInfoRegionsProps) => {
-  const { t } = useTranslation();
-
-  const regionSetIds = uniq(Object.values(completeCaseType.ref_cols).map(refCol => refCol.region_set_id).filter(x => !!x));
-
-  return (
-    <>
-      {regionSetIds.map(regionSetId => {
-        // NOTE: this assumes a complete case type's regions have been loaded before
-        const regions = EpiDataManager.instance.data.regionsByRegionSetId[regionSetId];
-        const sortedRegions = regions.toSorted((a, b) => +a.code - +b.code);
-        return (
-          <Accordion
-            key={regionSetId}
-            slotProps={{ transition: { unmountOnExit: true, timeout: regions.length > 15 ? 0 : undefined } }}
-          >
-            <AccordionSummary
-              aria-controls={`panel-${regionSetId}-content`}
-              expandIcon={<ExpandMoreIcon />}
-              id={`panel-${regionSetId}-header`}
-              sx={{
-                fontWeight: 'bold',
-              }}
-            >
-              {EpiDataManager.instance.data.regionSets[regionSetId].name}
-            </AccordionSummary>
-            <AccordionDetails>
-              <Stack
-                columnGap={1}
-                direction={'row'}
-                flexWrap={'wrap'}
-                rowGap={1}
-              >
-                <Table size={'small'}>
-                  <TableHead>
-                    <TableRow>
-                      <TableCell sx={{ width: '20%', verticalAlign: 'top' }}>
-                        {t`Code`}
-                      </TableCell>
-                      <TableCell sx={{ width: '80%', verticalAlign: 'top' }}>
-                        {t`Name`}
-                      </TableCell>
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {sortedRegions.map(region => (
-                      <TableRow key={region.id}>
-                        <TableCell sx={{ width: '20%', verticalAlign: 'top' }}>
-                          {region.code}
-                        </TableCell>
-                        <TableCell sx={{ width: '80%', verticalAlign: 'top' }}>
-                          {region.name}
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </Stack>
-            </AccordionDetails>
-          </Accordion>
-        );
-      })}
-    </>
-  );
-};

package/src/components/epi/EpiCaseTypeInfoDialog/EpiCaseTypeInfoTrees.tsx

@@ -1,73 +0,0 @@
-import {
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-  Box,
-  useTheme,
-} from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { EpiTreeDescription } from '../EpiTreeDescription';
-import type { CompleteCaseType } from '../../../api';
-import { EpiTreeUtil } from '../../../utils/EpiTreeUtil';
-
-import { EpiCaseTypeInfoColAccessRights } from './EpiCaseTypeInfoColAccessRights';
-
-
-export type EpiCaseTypeInfoTreesProps = {
-  readonly completeCaseType: CompleteCaseType;
-};
-export const EpiCaseTypeInfoTrees = ({ completeCaseType }: EpiCaseTypeInfoTreesProps) => {
-  const treeConfigurations = useMemo(() => EpiTreeUtil.getTreeConfigurations(completeCaseType), [completeCaseType]);
-  const { t } = useTranslation();
-  const theme = useTheme();
-
-  return (
-    <>
-      {treeConfigurations.map(treeConfiguration => (
-        <Accordion
-          key={treeConfiguration.computedId}
-          slotProps={{ transition: { unmountOnExit: true } }}
-        >
-          <AccordionSummary
-            aria-controls={`panel-${treeConfiguration.computedId}-content`}
-            expandIcon={<ExpandMoreIcon />}
-            id={`panel-${treeConfiguration.computedId}-header`}
-            sx={{
-              fontWeight: 'bold',
-            }}
-          >
-            {`${treeConfiguration.geneticDistanceProtocol.name} - ${treeConfiguration.treeAlgorithm.name}`}
-          </AccordionSummary>
-          <AccordionDetails>
-            <Box
-              sx={{
-                '& dl': {
-                  margin: 0,
-                },
-                '& dd': {
-                  marginLeft: theme.spacing(2),
-                },
-              }}
-            >
-              <EpiTreeDescription
-                treeConfiguration={treeConfiguration}
-              />
-              <Box marginY={1}>
-                <strong style={{ fontSize: '1rem' }}>
-                  {t`Access rights`}
-                </strong>
-                <EpiCaseTypeInfoColAccessRights
-                  colId={treeConfiguration.col.id}
-                />
-              </Box>
-
-            </Box>
-          </AccordionDetails>
-        </Accordion>
-      ))}
-    </>
-  );
-};

package/src/components/epi/EpiCaseTypeInfoDialog/EpiCaseTypeInfoValues.tsx

@@ -1,61 +0,0 @@
-import {
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-} from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-
-import type { CompleteCaseType } from '../../../api';
-import { DimType } from '../../../api';
-import { CaseTypeUtil } from '../../../utils/CaseTypeUtil';
-
-import { EpiCaseTypeInfoVariableDetails } from './EpiCaseTypeInfoVariableDetails';
-
-export type EpiCaseTypeInfoValuesProps = {
-  readonly completeCaseType: CompleteCaseType;
-};
-
-export const EpiCaseTypeInfoValues = ({ completeCaseType }: EpiCaseTypeInfoValuesProps) => {
-  return (
-    <>
-      {completeCaseType.ordered_dim_ids.map(x => completeCaseType.dims[x]).filter(dim => {
-        // Filter out dimensions that only include genetic distance columns
-        const refDim = completeCaseType.ref_dims[dim.ref_dim_id];
-        if (refDim.dim_type !== DimType.OTHER) {
-          return true;
-        }
-        const cols = CaseTypeUtil.getCols(completeCaseType, dim.id);
-        const colTypes = cols.map(col => {
-          const refCol = completeCaseType.ref_cols[col.ref_col_id];
-          return refCol.col_type;
-        });
-        return !colTypes.every(colType => colType === 'GENETIC_DISTANCE');
-      }).map(dim => {
-
-        return (
-          <Accordion
-            key={`${dim.id}-${dim.occurrence ?? 0}`}
-            slotProps={{ transition: { unmountOnExit: true } }}
-          >
-            <AccordionSummary
-              aria-controls={`panel-${dim.code}-${dim.occurrence ?? 0}-content`}
-              expandIcon={<ExpandMoreIcon />}
-              id={`panel-${dim.code}-${dim.occurrence ?? 0}-header`}
-              sx={{
-                fontWeight: 'bold',
-              }}
-            >
-              {CaseTypeUtil.getDimLabel(completeCaseType, dim.id)}
-            </AccordionSummary>
-            <AccordionDetails>
-              <EpiCaseTypeInfoVariableDetails
-                dim={dim}
-                completeCaseType={completeCaseType}
-              />
-            </AccordionDetails>
-          </Accordion>
-        );
-      })}
-    </>
-  );
-};

package/src/components/epi/EpiCaseTypeInfoDialog/EpiCaseTypeInfoVariableDetails.tsx

@@ -1,151 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import {
-  Box,
-  Chip,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  Typography,
-} from '@mui/material';
-import isNumber from 'lodash/isNumber';
-
-import type {
-  Dim,
-  CompleteCaseType,
-} from '../../../api';
-import { ColType } from '../../../api';
-import { EpiDataManager } from '../../../classes/managers/EpiDataManager';
-
-import { EpiCaseTypeInfoColAccessRights } from './EpiCaseTypeInfoColAccessRights';
-
-export type EpiCaseTypeInfoVariableDetailsProps = {
-  readonly dim: Dim;
-  readonly completeCaseType: CompleteCaseType;
-};
-
-export const EpiCaseTypeInfoVariableDetails = ({ dim, completeCaseType }: EpiCaseTypeInfoVariableDetailsProps) => {
-  const { t } = useTranslation();
-  const cols = completeCaseType.ordered_col_ids_by_dim[dim.id].map(x => completeCaseType.cols[x]);
-
-  return (
-    <>
-      <Typography
-        component={'p'}
-        marginBottom={2}
-      >
-        {dim.description}
-      </Typography>
-      <Table
-        aria-label={t('Table describing columns inside {{dimensionCode}}', { dimensionCode: dim.code }).toString()}
-        size={'small'}
-      >
-        <TableHead>
-          <TableRow>
-            <TableCell sx={{ width: '15%' }}>
-              {t`Column`}
-            </TableCell>
-            <TableCell sx={{ width: '30%' }}>
-              {t`Description`}
-            </TableCell>
-            <TableCell sx={{ width: '15%' }}>
-              {t`Type`}
-            </TableCell>
-            <TableCell sx={{ width: '20%' }}>
-              {t`Constraints`}
-            </TableCell>
-            <TableCell sx={{ width: '20%' }}>
-              {t`Access rights`}
-            </TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {cols.filter(col => {
-            // filter out columns that are of type GENETIC_DISTANCE
-            const refCol = completeCaseType.ref_cols[col.ref_col_id];
-            return refCol.col_type !== ColType.GENETIC_DISTANCE;
-          }).map(col => {
-            const refCol = completeCaseType.ref_cols[col.ref_col_id];
-            return (
-              <TableRow key={col.id}>
-                <TableCell sx={{ width: '15%', verticalAlign: 'top' }}>
-                  {col.code}
-                </TableCell>
-                <TableCell sx={{ width: '30%', verticalAlign: 'top' }}>
-                  {refCol.description}
-                </TableCell>
-                <TableCell sx={{ width: '15%', verticalAlign: 'top' }}>
-                  {refCol.col_type}
-                </TableCell>
-                <TableCell sx={{ width: '20%', verticalAlign: 'top' }}>
-                  {([
-                    ColType.DECIMAL_0,
-                    ColType.DECIMAL_1,
-                    ColType.DECIMAL_2,
-                    ColType.DECIMAL_3,
-                    ColType.DECIMAL_4,
-                    ColType.DECIMAL_5,
-                    ColType.DECIMAL_6,
-                  ] as ColType[]).includes(refCol.col_type) && (isNumber(col.min_value) || isNumber(col.max_value)) && (
-                    <>
-                      {t('min: {{min}}; max: {{max}}', { min: col.min_value, max: col.max_value })}
-                    </>
-                  )}
-                  {([
-                    ColType.TIME_DAY,
-                    ColType.TIME_MONTH,
-                    ColType.TIME_QUARTER,
-                    ColType.TIME_WEEK,
-                    ColType.TIME_YEAR,
-                  ] as ColType[]).includes(refCol.col_type) && (col.min_datetime || col.max_datetime) && (
-                    <>
-                      {t('from: {{from}}; to: {{to}}', { from: col.min_datetime ?? '-', to: col.max_datetime ?? '-' })}
-                    </>
-                  )}
-                  {refCol.col_type === ColType.TEXT && col.max_length && (
-                    <>
-                      {t('Max length: {{maxLength}}', { maxLength: col.max_length })}
-                    </>
-                  )}
-                  {refCol.col_type === ColType.GEO_REGION && refCol.region_set_id && (
-                    <>
-                      {EpiDataManager.instance.data.regionSets[refCol.region_set_id].name}
-                    </>
-                  )}
-                  {([ColType.NOMINAL, ColType.ORDINAL] as ColType[]).includes(refCol.col_type) && refCol.concept_set_id && EpiDataManager.instance.data.conceptsBySetId[refCol.concept_set_id] && (
-                    <Box
-                      sx={{
-                        maxWidth: '100%',
-                      }}
-                    >
-                      <Stack
-                        columnGap={1}
-                        direction={'row'}
-                        flexWrap={'wrap'}
-                        rowGap={1}
-                      >
-                        {EpiDataManager.instance.data.conceptsBySetId[refCol.concept_set_id].map(concept => (
-                          <Chip
-                            key={concept.id}
-                            label={`${concept.name} (${concept.code})`}
-                          />
-                        ))}
-                      </Stack>
-                    </Box>
-                  )}
-                </TableCell>
-                <TableCell sx={{ width: '20%', verticalAlign: 'top' }}>
-                  <EpiCaseTypeInfoColAccessRights
-                    colId={col.id}
-                  />
-                </TableCell>
-              </TableRow>
-            );
-          })}
-        </TableBody>
-      </Table>
-    </>
-  );
-};

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

@@ -1,10 +0,0 @@
-export * from './EpiCaseTypeInfoAccessRights.tsx';
-export * from './EpiCaseTypeInfoColAccessRights.tsx';
-export * from './EpiCaseTypeInfoData.tsx';
-export * from './EpiCaseTypeInfoDialog.tsx';
-export * from './EpiCaseTypeInfoDialogContent.tsx';
-export * from './EpiCaseTypeInfoDialogWithLoader.tsx';
-export * from './EpiCaseTypeInfoRegions.tsx';
-export * from './EpiCaseTypeInfoTrees.tsx';
-export * from './EpiCaseTypeInfoValues.tsx';
-export * from './EpiCaseTypeInfoVariableDetails.tsx';

package/src/components/epi/EpiCasesAlreadyInCaseSetWarning/EpiCasesAlreadyInCaseSetWarning.tsx

@@ -1,190 +0,0 @@
-import {
-  Alert,
-  AlertTitle,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  useTheme,
-} from '@mui/material';
-import uniq from 'lodash/uniq';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { EpiCaseSummary } from '../EpiCaseSummary';
-import type {
-  Case,
-  TypedUuidSetFilter,
-  CaseSet,
-} from '../../../api';
-import {
-  CaseApi,
-  LogLevel,
-} from '../../../api';
-import { LogManager } from '../../../classes/managers/LogManager';
-import { QUERY_KEY } from '../../../models/query';
-import { QueryUtil } from '../../../utils/QueryUtil';
-import { ResponseHandler } from '../../ui/ResponseHandler';
-import { useQueryMemo } from '../../../hooks/useQueryMemo';
-
-import { EpiCasesAlreadyInCaseSetWarningCaseSetLink } from './EpiCasesAlreadyInCaseSetWarningCaseSetLink';
-
-export type EpiCasesAlreadyInCaseSetWarningProps = {
-  readonly cases: Case[];
-};
-
-export const EpiCasesAlreadyInCaseSetWarning = ({ cases }: EpiCasesAlreadyInCaseSetWarningProps) => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-
-  // Load all case set members for the given cases
-  const caseSetMembersFilter = useMemo<TypedUuidSetFilter>(() => {
-    return {
-      invert: false,
-      key: 'case_id',
-      type: 'UUID_SET',
-      members: cases?.map(row => row.id) ?? [],
-    };
-  }, [cases]);
-  const { isLoading: isCaseSetMembersLoading, error: caseSetMembersError, data: caseSetMembers } = useQueryMemo({
-    queryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_SET_MEMBERS, caseSetMembersFilter),
-    queryFn: async ({ signal }) => {
-      const response = await CaseApi.instance.caseSetMembersPostQuery(caseSetMembersFilter, { signal });
-      return response.data;
-    },
-  });
-
-  // Load all case sets for the given case set members
-  const existingCaseSetsFilter = useMemo<TypedUuidSetFilter>(() => {
-    return {
-      invert: false,
-      key: 'id',
-      type: 'UUID_SET',
-      members: uniq((caseSetMembers ?? []).map(x => x.case_set_id)) ?? [],
-    };
-  }, [caseSetMembers]);
-  const { isLoading: isCaseSetsLoading, error: caseSetsError, data: caseSets } = useQueryMemo({
-    queryKey: QueryUtil.getGenericKey(QUERY_KEY.CASE_SETS, existingCaseSetsFilter),
-    queryFn: async ({ signal }) => {
-      const response = await CaseApi.instance.caseSetsPostQuery(existingCaseSetsFilter, { signal });
-      return response.data;
-    },
-    enabled: existingCaseSetsFilter.members.length > 0,
-  });
-
-  const caseSetsByCase = useMemo(() => {
-    const map = new Map<Case, CaseSet[]>();
-    if (!caseSets || !caseSetMembers) {
-      return map;
-    }
-
-    caseSetMembers?.forEach(member => {
-      const caseItem = cases.find(x => x.id === member.case_id);
-      const caseSetItem = caseSets.find(x => x.id === member.case_set_id);
-      if (!caseItem || !caseSetItem) {
-        LogManager.instance.log([
-          {
-            level: LogLevel.DEBUG,
-            topic: 'MISSING_CASE_OR_CASE_SET',
-            detail: member,
-          },
-        ]);
-        return;
-      }
-      if (!map.has(caseItem)) {
-        map.set(caseItem, []);
-      }
-      map.get(caseItem).push(caseSetItem);
-    });
-    return map;
-  }, [caseSets, caseSetMembers, cases]);
-
-  return (
-    <ResponseHandler
-      shouldHideActionButtons
-      error={caseSetMembersError || caseSetsError}
-      isLoading={isCaseSetMembersLoading || isCaseSetsLoading}
-    >
-      {caseSetsByCase.size > 0 && (
-        <Alert
-          severity={'warning'}
-          slotProps={{
-            message: {
-              sx: {
-                flexGrow: 1,
-              },
-            },
-          }}
-        >
-          <AlertTitle
-            sx={{
-              width: '100%',
-            }}
-          >
-            {t('{{numCases}} selected case(s) are already part of other event(s):', { numCases: caseSetsByCase.size })}
-          </AlertTitle>
-          <Table
-            size={'small'}
-            sx={{
-              width: '100%',
-            }}
-          >
-            <TableHead>
-              <TableRow>
-                <TableCell
-                  sx={{
-                    width: '50%',
-                  }}
-                >
-                  {t`Case`}
-                </TableCell>
-                <TableCell
-                  sx={{
-                    width: '50%',
-                  }}
-                >
-                  {t`Events`}
-                </TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {(Array.from(caseSetsByCase) ?? []).map(([caseItem, caseItemCaseSets]) => {
-                return (
-                  <TableRow key={caseItem.id}>
-                    <TableCell
-                      sx={{
-                        width: '50%',
-                        verticalAlign: 'top',
-                      }}
-                    >
-                      <EpiCaseSummary
-                        epiCase={caseItem}
-                      />
-                    </TableCell>
-                    <TableCell
-                      sx={{
-                        width: '50%',
-                        verticalAlign: 'top',
-                        '& :nth-of-type(2)': {
-                          marginTop: theme.spacing(1),
-                        },
-                      }}
-                    >
-                      {caseItemCaseSets.sort((a, b) => a.name.localeCompare(b.name)).map(caseItemCaseSet => (
-                        <EpiCasesAlreadyInCaseSetWarningCaseSetLink
-                          key={caseItemCaseSet.id}
-                          caseSet={caseItemCaseSet}
-                        />
-                      ))}
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-        </Alert>
-      )}
-    </ResponseHandler>
-  );
-};

package/src/components/epi/EpiCasesAlreadyInCaseSetWarning/EpiCasesAlreadyInCaseSetWarningCaseSetLink.tsx

@@ -1,62 +0,0 @@
-import { Link } from '@mui/material';
-import {
-  useCallback,
-  useRef,
-} from 'react';
-import { t } from 'i18next';
-
-import type { CaseSet } from '../../../api';
-import { RouterManager } from '../../../classes/managers/RouterManager';
-import { useCaseSetCategoryMapQuery } from '../../../dataHooks/useCaseSetCategoriesQuery';
-import { useCaseSetStatusMapQuery } from '../../../dataHooks/useCaseSetStatusesQuery';
-import { CaseSetUtil } from '../../../utils/CaseSetUtil';
-import type { ConfirmationRefMethods } from '../../ui/Confirmation';
-import { Confirmation } from '../../ui/Confirmation';
-import { ResponseHandler } from '../../ui/ResponseHandler';
-import { useArray } from '../../../hooks/useArray';
-
-export type EpiCasesAlreadyInCaseSetWarningCaseSetLinkProps = {
-  readonly caseSet: CaseSet;
-};
-
-export const EpiCasesAlreadyInCaseSetWarningCaseSetLink = ({ caseSet }: EpiCasesAlreadyInCaseSetWarningCaseSetLinkProps) => {
-  const caseSetCategoryMapQuery = useCaseSetCategoryMapQuery();
-  const caseSetStatusMapQuery = useCaseSetStatusMapQuery();
-  const loadables = useArray([caseSetCategoryMapQuery, caseSetStatusMapQuery]);
-  const confirmationRef = useRef<ConfirmationRefMethods>(null);
-
-  const onLinkClick = useCallback(() => {
-    confirmationRef.current?.open();
-  }, []);
-
-  const onConfirm = useCallback(async () => {
-    await RouterManager.instance.router.navigate(CaseSetUtil.createCaseSetLink(caseSet));
-  }, [caseSet]);
-
-
-  return (
-    <ResponseHandler
-      shouldHideActionButtons
-      loadables={loadables}
-    >
-      <Link
-        color={'primary'}
-        href={'#'}
-        sx={{
-          display: 'table',
-        }}
-        onClick={onLinkClick}
-      >
-        {`${caseSet.name} (${caseSetCategoryMapQuery.map.get(caseSet.case_set_category_id)?.name}, ${caseSetStatusMapQuery.map.get(caseSet.case_set_status_id)?.name})`}
-      </Link>
-      <Confirmation
-        ref={confirmationRef}
-        body={t('This will navigate to the "{{caseSetName}}"-event. You will loose your current selection of cases and all applied filters. Do you want to continue?', { caseSetName: caseSet.name })}
-        cancelLabel={t`Cancel`}
-        confirmLabel={t`Continue`}
-        title={t('Do you want to navigate to the "{{caseSetName}}"-event?', { caseSetName: caseSet.name })}
-        onConfirm={onConfirm}
-      />
-    </ResponseHandler>
-  );
-};

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

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