@gen-epix/ui 1.14.4 → 1.15.0

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

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

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

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

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

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

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

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

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