@gen-epix/ui 1.15.1 → 1.15.2

package/src/components/epi/EpiCaseSummary/EpiCaseSummary.tsx

@@ -1,141 +0,0 @@
-import {
-  Fragment,
-  useCallback,
-  useContext,
-  useMemo,
-} from 'react';
-import { useStore } from 'zustand';
-import { useShallow } from 'zustand/shallow';
-import {
-  Box,
-  IconButton,
-  Tooltip,
-} from '@mui/material';
-import AddIcon from '@mui/icons-material/Add';
-import RemoveIcon from '@mui/icons-material/Remove';
-import { useTranslation } from 'react-i18next';
-
-import type { Case } from '../../../api';
-import type { TableColumnCaseType } from '../../../models/table';
-import { EpiDashboardStoreContext } from '../../../stores/epiDashboardStore';
-import { useTableStoreContext } from '../../../stores/tableStore';
-import { CaseUtil } from '../../../utils/CaseUtil';
-
-export type EpiCaseSummaryProps = {
-  readonly epiCase: Case;
-};
-
-export const EpiCaseSummary = ({ epiCase }: EpiCaseSummaryProps) => {
-  const { t } = useTranslation();
-  const epiDashboardStore = useContext(EpiDashboardStoreContext);
-  const tableStore = useTableStoreContext<Case>();
-  const completeCaseType = useStore(epiDashboardStore, (state) => state.completeCaseType);
-  const numVisibleAttributesInSummary = useStore(epiDashboardStore, (state) => state.numVisibleAttributesInSummary);
-  const setNumVisibleAttributesInSummary = useStore(epiDashboardStore, (state) => state.setNumVisibleAttributesInSummary);
-  const tableColumns = useStore(tableStore, useShallow((state) => state.columns));
-  const columnSettings = useStore(tableStore, useShallow((state) => state.columnSettings));
-  const visibleColumnIds = useStore(tableStore, useShallow((state) => state.columnSettings.filter(c => c.isVisible).map(c => c.id)));
-
-  const visibleCaseTypeTableColumns = useMemo(() => columnSettings.map(x => tableColumns.find(c => c.id === x.id)).filter(c => c.type === 'caseType' && visibleColumnIds.includes(c.id)) as TableColumnCaseType<Case>[], [columnSettings, tableColumns, visibleColumnIds]);
-
-  const visibleAttributes = useMemo(() => {
-    return visibleCaseTypeTableColumns.slice(0, numVisibleAttributesInSummary);
-  }, [visibleCaseTypeTableColumns, numVisibleAttributesInSummary]);
-
-  const onRemoveAttributeClick = useCallback(() => {
-    if (numVisibleAttributesInSummary <= 1) {
-      return;
-    }
-    if (numVisibleAttributesInSummary > visibleCaseTypeTableColumns.length) {
-      setNumVisibleAttributesInSummary(visibleCaseTypeTableColumns.length);
-    }
-    if (numVisibleAttributesInSummary > 1) {
-      setNumVisibleAttributesInSummary(numVisibleAttributesInSummary - 1);
-    }
-  }, [numVisibleAttributesInSummary, setNumVisibleAttributesInSummary, visibleCaseTypeTableColumns.length]);
-
-  const onAddAttributeClick = useCallback(() => {
-    setNumVisibleAttributesInSummary(Math.min(visibleCaseTypeTableColumns.length, numVisibleAttributesInSummary + 1));
-  }, [numVisibleAttributesInSummary, setNumVisibleAttributesInSummary, visibleCaseTypeTableColumns.length]);
-
-  return (
-    <Box>
-      <Box
-        component={'dl'}
-        sx={{
-          clear: 'both',
-          margin: 0,
-          '& dt': {
-            fontWeight: 'bold',
-            display: 'inline-block',
-            float: 'left',
-            clear: 'left',
-            margin: 0,
-            '&:after': {
-              content: '":"',
-            },
-          },
-          '& dd': {
-            display: 'inline-block',
-            float: 'left',
-            margin: 0,
-            marginLeft: 0.5,
-          },
-        }}
-      >
-        {visibleAttributes.map(tableColumn => {
-          try {
-            const value = CaseUtil.getRowValue(epiCase.content, tableColumn.col, completeCaseType);
-            return (
-              <Fragment key={tableColumn.id}>
-                <dt>
-                  {tableColumn.headerName}
-                </dt>
-                <dd>
-                  {value.short}
-                </dd>
-              </Fragment>
-            );
-          } catch {
-            return null;
-          }
-        })}
-      </Box>
-      <Box
-        sx={{
-          clear: 'both',
-          float: 'right',
-        }}
-      >
-        <Tooltip
-          arrow
-          title={t`Show one less attribute`}
-        >
-          <IconButton
-            aria-label={t`Show one less attribute`}
-            color={'primary'}
-            disabled={numVisibleAttributesInSummary <= 1}
-            size={'small'}
-            onClick={onRemoveAttributeClick}
-          >
-            <RemoveIcon fontSize={'inherit'} />
-          </IconButton>
-        </Tooltip>
-        <Tooltip
-          arrow
-          title={t`Show one more attribute`}
-        >
-          <IconButton
-            aria-label={t`Show one more attribute`}
-            color={'primary'}
-            disabled={numVisibleAttributesInSummary >= visibleCaseTypeTableColumns.length - 1}
-            size={'small'}
-            onClick={onAddAttributeClick}
-          >
-            <AddIcon fontSize={'inherit'} />
-          </IconButton>
-        </Tooltip>
-      </Box>
-    </Box>
-  );
-};

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

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

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

@@ -1,91 +0,0 @@
-import { useMemo } from 'react';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import {
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-  TableHead,
-  Table,
-  TableBody,
-  TableCell,
-  TableRow,
-} from '@mui/material';
-import { t } from 'i18next';
-
-import type { CompleteCaseType } from '../../../api';
-import { useCaseTypeAbacContext } from '../../../context/caseTypeAbac';
-import { CaseTypeUtil } from '../../../utils/CaseTypeUtil';
-
-export type EpiCaseTypeInfoAccessRightsProps = {
-  readonly completeCaseType: CompleteCaseType;
-};
-
-export const EpiCaseTypeInfoAccessRights = ({ completeCaseType }: EpiCaseTypeInfoAccessRightsProps) => {
-  const cols = useMemo(() => CaseTypeUtil.getCols(completeCaseType), [completeCaseType]);
-  const caseTypeAbacContext = useCaseTypeAbacContext();
-
-  return (
-    <>
-      {(caseTypeAbacContext.caseTypeAccessAbacs ?? []).map(caseTypeAccessAbac => {
-        const dataCollection = caseTypeAbacContext.userDataCollectionsMap.get(caseTypeAccessAbac.data_collection_id);
-        return (
-          <Accordion
-            key={`${dataCollection.id}`}
-            slotProps={{ transition: { unmountOnExit: true } }}
-          >
-            <AccordionSummary
-              aria-controls={`panel-${dataCollection.id}`}
-              expandIcon={<ExpandMoreIcon />}
-              id={`panel-${dataCollection.id}-header`}
-              sx={{
-                fontWeight: 'bold',
-              }}
-            >
-              {dataCollection.name}
-            </AccordionSummary>
-            <AccordionDetails>
-              <Table size={'small'}>
-                <TableHead>
-                  <TableRow>
-                    <TableCell sx={{ width: '20%', verticalAlign: 'top' }}>
-                      {t`Column`}
-                    </TableCell>
-                    <TableCell sx={{ width: '20%', verticalAlign: 'top' }}>
-                      {t`Read`}
-                    </TableCell>
-                    <TableCell sx={{ width: '20%', verticalAlign: 'top' }}>
-                      {t`Write`}
-                    </TableCell>
-                    <TableCell sx={{ width: '40%' }} />
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {cols.map(col => {
-                    return (
-                      <TableRow key={col.id}>
-                        <TableCell sx={{ width: '20%', verticalAlign: 'top' }}>
-                          {col.label}
-                        </TableCell>
-                        <TableCell
-                          sx={{ width: '20%', verticalAlign: 'top' }}
-                        >
-                          { caseTypeAccessAbac.read_col_ids.includes(col.id) ? t`Yes` : t`No`}
-                        </TableCell>
-                        <TableCell
-                          sx={{ width: '20%', verticalAlign: 'top' }}
-                        >
-                          { caseTypeAccessAbac.write_col_ids.includes(col.id) ? t`Yes` : t`No`}
-                        </TableCell>
-                        <TableCell sx={{ width: '40%' }} />
-                      </TableRow>
-                    );
-                  })}
-                </TableBody>
-              </Table>
-            </AccordionDetails>
-          </Accordion>
-        );
-      })}
-    </>
-  );
-};

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

@@ -1,118 +0,0 @@
-import type { ReactNode } from 'react';
-import {
-  Fragment,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react';
-import {
-  Box,
-  Button,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-
-import { useCaseTypeAbacContext } from '../../../context/caseTypeAbac';
-
-export type EpiCaseTypeInfoColAccessRightsProps = {
-  readonly colId: string;
-};
-
-type DataCollectionAccess = {
-  readonly dataCollectionId: string;
-  readonly dataCollectionName: string;
-  readonly hasWriteAccess: boolean;
-  readonly hasReadAccess: boolean;
-};
-
-const MAX_ITEMS = 5;
-
-export const EpiCaseTypeInfoColAccessRights = ({ colId }: EpiCaseTypeInfoColAccessRightsProps) => {
-  const { t } = useTranslation();
-  const caseTypeAbacContext = useCaseTypeAbacContext();
-  const [shouldShowMore, setShouldShowMore] = useState(false);
-
-  const onShowMoreButtonClick = useCallback(() => {
-    setShouldShowMore(true);
-  }, []);
-
-  const dataCollectionAccesses = useMemo<DataCollectionAccess[]>(() => {
-    const x: DataCollectionAccess[] = [];
-    caseTypeAbacContext.caseTypeAccessAbacs.forEach(caseTypeAccessAbac => {
-      const dataCollection = caseTypeAbacContext.userDataCollectionsMap.get(caseTypeAccessAbac.data_collection_id);
-      const hasWriteAccess = caseTypeAccessAbac.write_col_ids.includes(colId);
-      const hasReadAccess = caseTypeAccessAbac.read_col_ids.includes(colId);
-      if (hasWriteAccess || hasReadAccess) {
-        x.push({
-          dataCollectionId: dataCollection.id,
-          dataCollectionName: dataCollection.name,
-          hasWriteAccess,
-          hasReadAccess,
-        });
-      }
-    });
-    return x;
-  }, [caseTypeAbacContext.caseTypeAccessAbacs, caseTypeAbacContext.userDataCollectionsMap, colId]);
-
-  const canRead = caseTypeAbacContext.effectiveColumnAccessRights.get(colId)?.read;
-  const canWrite = caseTypeAbacContext.effectiveColumnAccessRights.get(colId)?.write;
-  let effectiveRightLabel;
-  if (canRead && canWrite) {
-    effectiveRightLabel = t`read/write`;
-  } else if (canRead) {
-    effectiveRightLabel = t`read`;
-  } else if (canWrite) {
-    effectiveRightLabel = t`write`;
-  } else {
-    effectiveRightLabel = t`no access`;
-  }
-
-  return (
-    <Box>
-      <Box marginBottom={1}>
-        <Box>
-          {t('Effective rights: {{effectiveRightLabel}}', { effectiveRightLabel })}
-        </Box>
-      </Box>
-      <Box>
-        {dataCollectionAccesses.slice(0, shouldShowMore ? undefined : MAX_ITEMS).map(dataCollectionAccess => {
-          let element: ReactNode;
-          if (dataCollectionAccess.hasWriteAccess && dataCollectionAccess.hasReadAccess) {
-            element = (
-              <>
-                {t('{{dataCollectionName}}: read/write', { dataCollectionName: dataCollectionAccess.dataCollectionName })}
-              </>
-            );
-          } else if (dataCollectionAccess.hasWriteAccess) {
-            element = (
-              <>
-                {t('{{dataCollectionName}}: write', { dataCollectionName: dataCollectionAccess.dataCollectionName })}
-              </>
-            );
-          } else if (dataCollectionAccess.hasReadAccess) {
-            element = (
-              <>
-                {t('{{dataCollectionName}}: read', { dataCollectionName: dataCollectionAccess.dataCollectionName })}
-              </>
-            );
-          }
-          return (
-            <Fragment key={dataCollectionAccess.dataCollectionId}>
-              <Box>
-                {element}
-              </Box>
-            </Fragment>
-          );
-        })}
-        {dataCollectionAccesses.length > MAX_ITEMS && !shouldShowMore && (
-          <Button
-            size={'small'}
-            variant={'text'}
-            onClick={onShowMoreButtonClick}
-          >
-            {t('Show more')}
-          </Button>
-        )}
-      </Box>
-    </Box>
-  );
-};

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

@@ -1,38 +0,0 @@
-import {
-  Typography,
-  Box,
-} from '@mui/material';
-import { t } from 'i18next';
-
-export type EpiCaseTypeInfoDataProps = {
-  readonly name: string;
-  readonly title: string;
-};
-
-export const EpiCaseTypeInfoData = ({ name, title }: EpiCaseTypeInfoDataProps) => {
-  return (
-    <Box marginY={2}>
-      <Typography
-        component={'h4'}
-        variant={'h4'}
-      >
-        {title}
-      </Typography>
-      <Typography
-        component={'p'}
-        variant={'body1'}
-      >
-        {name && (
-          <>
-            {name}
-          </>
-        )}
-        {!name && (
-          <>
-            {t`Not applicable`}
-          </>
-        )}
-      </Typography>
-    </Box>
-  );
-};

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

@@ -1,39 +0,0 @@
-import type { ReactElement } from 'react';
-
-import type {
-  WithDialogRenderProps,
-  WithDialogRefMethods,
-} from '../../../hoc/withDialog';
-import { withDialog } from '../../../hoc/withDialog';
-
-import { EpiCaseTypeInfoDialogContent } from './EpiCaseTypeInfoDialogContent';
-
-
-export interface EpiCaseTypeInfoDialogOpenProps {
-  //
-}
-
-export interface EpiCaseTypeInfoDialogProps extends WithDialogRenderProps<EpiCaseTypeInfoDialogOpenProps> {
-  //
-}
-
-export type EpiCaseTypeInfoDialogRefMethods = WithDialogRefMethods<EpiCaseTypeInfoDialogProps, EpiCaseTypeInfoDialogOpenProps>;
-
-export const EpiCaseTypeInfoDialog = withDialog<EpiCaseTypeInfoDialogProps, EpiCaseTypeInfoDialogOpenProps>((
-  {
-    onTitleChange,
-    onPermalinkChange,
-  }: EpiCaseTypeInfoDialogProps,
-): ReactElement => {
-  return (
-    <EpiCaseTypeInfoDialogContent
-      onPermalinkChange={onPermalinkChange}
-      onTitleChange={onTitleChange}
-    />
-  );
-}, {
-  testId: 'EpiCaseTypeInfoDialog',
-  titleVariant: 'h2',
-  fullWidth: true,
-  maxWidth: 'xl',
-});

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

@@ -1,169 +0,0 @@
-import {
-  Box,
-  Typography,
-  useTheme,
-} from '@mui/material';
-import {
-  useContext,
-  useCallback,
-  useEffect,
-  useMemo,
-} from 'react';
-import { useTranslation } from 'react-i18next';
-import { useStore } from 'zustand';
-
-import type { CaseTypeAbacContext } from '../../../context/caseTypeAbac';
-import { CaseTypeAbacContextProvider } from '../../../context/caseTypeAbac';
-import {
-  useDataCollectionsMapQuery,
-  useDataCollectionsQuery,
-} from '../../../dataHooks/useDataCollectionsQuery';
-import { useDiseasesMapQuery } from '../../../dataHooks/useDiseasesQuery';
-import { useEtiologicalAgentsMapQuery } from '../../../dataHooks/useEtiologicalAgentsQuery';
-import { EpiDashboardStoreContext } from '../../../stores/epiDashboardStore';
-import { ResponseHandler } from '../../ui/ResponseHandler';
-import { useArray } from '../../../hooks/useArray';
-import type { WithDialogRenderProps } from '../../../hoc/withDialog';
-import { CaseTypeUtil } from '../../../utils/CaseTypeUtil';
-import { RichTextEditorContent } from '../../form/fields/RichTextEditor';
-
-import { EpiCaseTypeInfoValues } from './EpiCaseTypeInfoValues';
-import { EpiCaseTypeInfoTrees } from './EpiCaseTypeInfoTrees';
-import { EpiCaseTypeInfoRegions } from './EpiCaseTypeInfoRegions';
-import { EpiCaseTypeInfoData } from './EpiCaseTypeInfoData';
-import { EpiCaseTypeInfoAccessRights } from './EpiCaseTypeInfoAccessRights';
-
-export type EpiCaseTypeInfoDialogContentProps = Pick<WithDialogRenderProps, 'onTitleChange' | 'onPermalinkChange'>;
-
-export const EpiCaseTypeInfoDialogContent = ({ onTitleChange, onPermalinkChange }: EpiCaseTypeInfoDialogContentProps) => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const diseasesMapQuery = useDiseasesMapQuery();
-  const etiologicalAgentsMapQuery = useEtiologicalAgentsMapQuery();
-  const dataCollectionsMapQuery = useDataCollectionsMapQuery();
-  const dataCollectionsQuery = useDataCollectionsQuery();
-  const loadables = useArray([dataCollectionsMapQuery, dataCollectionsQuery, diseasesMapQuery, etiologicalAgentsMapQuery]);
-
-  const epiDashboardStore = useContext(EpiDashboardStoreContext);
-  const completeCaseType = useStore(epiDashboardStore, (state) => state.completeCaseType);
-
-  const getDiseaseName = useCallback((id: string) => {
-    if (!id || !diseasesMapQuery.map.has(id)) {
-      return undefined;
-    }
-    const disease = diseasesMapQuery.map.get(id);
-    const code = disease.icd_code ? ` (ICD Code: ${disease.icd_code})` : '';
-
-    return `${disease.name}${code}`;
-  }, [diseasesMapQuery.map]);
-
-  const getEtiologicalAgentName = useCallback((id: string) => {
-    if (!id || !etiologicalAgentsMapQuery.map.has(id)) {
-      return undefined;
-    }
-    const etiologicalAgent = etiologicalAgentsMapQuery.map.get(id);
-
-    return `${etiologicalAgent.name} (${etiologicalAgent.type})`;
-  }, [etiologicalAgentsMapQuery.map]);
-
-  useEffect(() => {
-    onTitleChange(completeCaseType.name);
-  }, [completeCaseType.name, onTitleChange]);
-
-  useEffect(() => {
-    if (completeCaseType) {
-      onPermalinkChange(CaseTypeUtil.createCaseTypeLink(completeCaseType, true));
-    }
-  }, [completeCaseType.name, completeCaseType.id, onPermalinkChange, completeCaseType]);
-
-  const caseTypeAbacContextValue = useMemo<CaseTypeAbacContext>(() => {
-    return {
-      userDataCollections: dataCollectionsQuery.data,
-      userDataCollectionsMap: dataCollectionsMapQuery.map,
-      caseTypeAccessAbacDict: completeCaseType.case_type_access_abacs,
-    };
-  }, [completeCaseType.case_type_access_abacs, dataCollectionsMapQuery.map, dataCollectionsQuery.data]);
-
-  return (
-    <ResponseHandler
-      shouldHideActionButtons
-      loadables={loadables}
-    >
-      <CaseTypeAbacContextProvider caseTypeAbac={caseTypeAbacContextValue}>
-        <Box
-          sx={{
-            '& dl': {
-              margin: 0,
-            },
-            '& dt': {
-              fontWeight: 'bold',
-            },
-            '& dd': {
-              marginLeft: theme.spacing(1),
-            },
-          }}
-        >
-          <Box marginBottom={1}>
-            <RichTextEditorContent source={completeCaseType?.description || t`No description available`} />
-          </Box>
-          <EpiCaseTypeInfoData
-            name={getDiseaseName(completeCaseType.disease_id)}
-            title={t`Disease`}
-          />
-          <EpiCaseTypeInfoData
-            name={getEtiologicalAgentName(completeCaseType.etiological_agent_id)}
-            title={t`Etiological agent`}
-          />
-          <Box marginY={3}>
-            <Typography
-              component={'h4'}
-              marginY={1}
-              variant={'h4'}
-            >
-              {t`Variables by dimension`}
-            </Typography>
-            <EpiCaseTypeInfoValues
-              completeCaseType={completeCaseType}
-            />
-          </Box>
-          <Box marginY={3}>
-            <Typography
-              component={'h4'}
-              marginY={1}
-              variant={'h4'}
-            >
-              {t`Trees`}
-            </Typography>
-            <EpiCaseTypeInfoTrees
-              completeCaseType={completeCaseType}
-            />
-          </Box>
-          <Box marginY={3}>
-            <Typography
-              component={'h4'}
-              marginY={1}
-              variant={'h4'}
-            >
-              {t`Regions`}
-            </Typography>
-            <EpiCaseTypeInfoRegions
-              completeCaseType={completeCaseType}
-            />
-          </Box>
-          <Box marginY={3}>
-            <Typography
-              component={'h4'}
-              marginY={1}
-              variant={'h4'}
-            >
-              {t`Access rights`}
-            </Typography>
-            <EpiCaseTypeInfoAccessRights
-              completeCaseType={completeCaseType}
-            />
-          </Box>
-        </Box>
-      </CaseTypeAbacContextProvider>
-    </ResponseHandler>
-  );
-};

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

@@ -1,42 +0,0 @@
-import type { ReactElement } from 'react';
-
-import { EpiDashboardStoreLoader } from '../EpiDashboardStoreLoader';
-import type {
-  WithDialogRenderProps,
-  WithDialogRefMethods,
-} from '../../../hoc/withDialog';
-import { withDialog } from '../../../hoc/withDialog';
-
-import { EpiCaseTypeInfoDialogContent } from './EpiCaseTypeInfoDialogContent';
-
-export interface EpiCaseTypeInfoDialogWithLoaderOpenProps {
-  caseTypeId: string;
-}
-
-export interface EpiCaseTypeInfoDialogWithLoaderProps extends WithDialogRenderProps<EpiCaseTypeInfoDialogWithLoaderOpenProps> {
-  //
-}
-
-export type EpiCaseTypeInfoDialogWithLoaderRefMethods = WithDialogRefMethods<EpiCaseTypeInfoDialogWithLoaderProps, EpiCaseTypeInfoDialogWithLoaderOpenProps>;
-
-export const EpiCaseTypeInfoDialogWithLoader = withDialog<EpiCaseTypeInfoDialogWithLoaderProps, EpiCaseTypeInfoDialogWithLoaderOpenProps>((
-  {
-    onTitleChange,
-    onPermalinkChange,
-    openProps,
-  }: EpiCaseTypeInfoDialogWithLoaderProps,
-): ReactElement => {
-  return (
-    <EpiDashboardStoreLoader caseTypeId={openProps.caseTypeId}>
-      <EpiCaseTypeInfoDialogContent
-        onPermalinkChange={onPermalinkChange}
-        onTitleChange={onTitleChange}
-      />
-    </EpiDashboardStoreLoader>
-  );
-}, {
-  testId: 'EpiCaseTypeInfoDialogWithLoader',
-  titleVariant: 'h2',
-  fullWidth: true,
-  maxWidth: 'xl',
-});