@gen-epix/ui 1.15.1 → 1.15.2

package/src/components/epi/EpiDashboard/EpiDashboardLayoutRenderer.tsx

@@ -1,248 +0,0 @@
-import type {
-  ForwardRefRenderFunction,
-  ReactElement,
-} from 'react';
-import {
-  Fragment,
-  forwardRef,
-  useContext,
-  useImperativeHandle,
-  useMemo,
-} from 'react';
-import type { LayoutStorage } from 'react-resizable-panels';
-import {
-  Group,
-  Panel,
-  useDefaultLayout,
-  useGroupRef,
-} from 'react-resizable-panels';
-import { useStore } from 'zustand';
-import {
-  Alert,
-  AlertTitle,
-  Box,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-
-import { ConfigManager } from '../../../classes/managers/ConfigManager';
-import type { EpiDashboardLayoutPanelOrientation } from '../../../models/epi';
-import { EPI_ZONE } from '../../../models/epi';
-import { EpiDashboardStoreContext } from '../../../stores/epiDashboardStore';
-import { userProfileStore } from '../../../stores/userProfileStore';
-import { DashboardUtil } from '../../../utils/DashboardUtil';
-import { StringUtil } from '../../../utils/StringUtil';
-import {
-  PanelSeparatorVertical,
-  PanelSeparatorHorizontal,
-} from '../../ui/PanelSeparator';
-
-export type EpiDashboardLayoutRendererProps = {
-  readonly lineListWidget: ReactElement;
-  readonly phylogeneticTreeWidget: ReactElement;
-  readonly mapWidget: ReactElement;
-  readonly epiCurveWidget: ReactElement;
-  readonly disabled?: boolean;
-};
-
-const panelStorageFactory = (panelNamePrefix: string): LayoutStorage => ({
-  getItem: (name: string) => {
-    return userProfileStore.getState().epiDashboardPanels[`${panelNamePrefix}-${name}`];
-  },
-  setItem: (name: string, value: string) => {
-    userProfileStore.getState().setEpiDashboardPanelConfiguration(`${panelNamePrefix}-${name}`, value);
-  },
-});
-
-export type ForwardRefEpiDashboardLayoutRendererRefMethods = {
-  reset: () => void;
-};
-
-const createOuterGroupId = (orientation: EpiDashboardLayoutPanelOrientation): string => {
-  return `outer-${orientation}`;
-};
-
-const createOuterPanelId = (orientation: EpiDashboardLayoutPanelOrientation, index: number): string => {
-  return `outer-${orientation}-panel-${index}`;
-};
-
-const createInnerGroupId = (orientation: EpiDashboardLayoutPanelOrientation, index: number): string => {
-  return `inner-${orientation}-${index}`;
-};
-
-const createInnerPanelId = (orientation: EpiDashboardLayoutPanelOrientation, outerIndex: number, innerIndex: number): string => {
-  return `${createInnerGroupId(orientation, outerIndex)}-panel-${innerIndex}`;
-};
-
-const getIndexFromId = (id: string): number => {
-  const match = id.match(/(\d+)(?!.*\d)/);
-  return match ? parseInt(match[1], 10) : -1;
-};
-
-export const ForwardRefEpiDashboardLayoutRenderer: ForwardRefRenderFunction<ForwardRefEpiDashboardLayoutRendererRefMethods, EpiDashboardLayoutRendererProps> = ({
-  lineListWidget,
-  phylogeneticTreeWidget,
-  mapWidget,
-  epiCurveWidget,
-  disabled,
-}, forwardedRef) => {
-  const { t } = useTranslation();
-  const epiDashboardStore = useContext(EpiDashboardStoreContext);
-  const dashboardLayoutUserConfig = useStore(userProfileStore, (state) => state.epiDashboardLayoutUserConfig);
-  const expandedZone = useStore(epiDashboardStore, (state) => state.expandedZone);
-  const layout = DashboardUtil.getDashboardLayout(dashboardLayoutUserConfig);
-  const enabledLayoutZones = DashboardUtil.getEnabledZones(dashboardLayoutUserConfig);
-
-  const storagePrefix = useMemo(() => `${StringUtil.createHash(JSON.stringify(layout ?? ''))}-v2-`, [layout]);
-  const [outerOrientation, ...panels] = layout ?? [];
-  const innerOrientation: EpiDashboardLayoutPanelOrientation = outerOrientation === 'horizontal' ? 'vertical' : 'horizontal';
-
-  const { defaultLayout: defaultLayoutOuter, onLayoutChanged: onLayoutChangedOuter } = useDefaultLayout({
-    groupId: createOuterGroupId(outerOrientation),
-    storage: panelStorageFactory(`${storagePrefix}-outer`),
-  });
-
-  const { defaultLayout: defaultLayoutInner0, onLayoutChanged: onLayoutChangedInner0 } = useDefaultLayout({
-    groupId: createInnerGroupId(innerOrientation, 0),
-    storage: panelStorageFactory(`${storagePrefix}-inner-0-${innerOrientation}`),
-  });
-
-  const { defaultLayout: defaultLayoutInner1, onLayoutChanged: onLayoutChangedInner1 } = useDefaultLayout({
-    groupId: createInnerGroupId(innerOrientation, 1),
-    storage: panelStorageFactory(`${storagePrefix}-inner-1-${innerOrientation}`),
-  });
-
-  const groupRefOuter = useGroupRef();
-  const groupRefInner0 = useGroupRef();
-  const groupRefInner1 = useGroupRef();
-
-  const { MIN_PANEL_HEIGHT, MIN_PANEL_WIDTH } = ConfigManager.instance.config.epiDashboard;
-
-  useImperativeHandle(forwardedRef, () => ({
-    reset: () => {
-      try {
-        if (groupRefOuter.current) {
-          const newLayout = Object.fromEntries(Object.entries(groupRefOuter.current.getLayout()).map(([id, size]) => {
-            return [id, panels?.[getIndexFromId(id)]?.[0] ?? size] as [string, number];
-          }));
-          groupRefOuter.current.setLayout(newLayout);
-        }
-        if (groupRefInner0.current) {
-          const newLayout = Object.fromEntries(Object.entries(groupRefInner0.current.getLayout()).map(([id, size]) => {
-            return [id, (panels?.[0]?.[getIndexFromId(id) + 1] as Array<number>)?.[0] ?? size] as [string, number];
-          }));
-          groupRefInner0.current.setLayout(newLayout);
-        }
-        if (groupRefInner1.current) {
-          const newLayout = Object.fromEntries(Object.entries(groupRefInner1.current.getLayout()).map(([id, size]) => {
-            return [id, (panels?.[1]?.[getIndexFromId(id) + 1] as Array<number>)?.[0] ?? size] as [string, number];
-          }));
-          groupRefInner1.current.setLayout(newLayout);
-        }
-      } catch (_error) {
-        // allow to fail (it doesn't change functionality)
-      }
-    },
-  }));
-
-  const panelMap = useMemo(() => {
-    return {
-      [EPI_ZONE.EPI_CURVE]: epiCurveWidget,
-      [EPI_ZONE.LINE_LIST]: lineListWidget,
-      [EPI_ZONE.MAP]: mapWidget,
-      [EPI_ZONE.TREE]: phylogeneticTreeWidget,
-    };
-  }, [epiCurveWidget, lineListWidget, mapWidget, phylogeneticTreeWidget]);
-
-  if (expandedZone) {
-    return panelMap[expandedZone as keyof typeof panelMap];
-  }
-
-  if (enabledLayoutZones.length === 0) {
-    return (
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignContent: 'center',
-        }}
-      >
-        <Alert severity={'info'}>
-          <AlertTitle>
-            {t`No visible element has been configured. Use the layout menu in the sidebar to enable an element.`}
-          </AlertTitle>
-        </Alert>
-      </Box>
-    );
-  }
-
-  if (enabledLayoutZones.length === 1) {
-    return panelMap[enabledLayoutZones[0] as keyof typeof panelMap];
-  }
-
-  return (
-    <Group
-      groupRef={groupRefOuter}
-      orientation={outerOrientation}
-      style={{
-        width: '100%',
-        height: '100%',
-      }}
-      id={createOuterGroupId(outerOrientation)}
-      defaultLayout={defaultLayoutOuter}
-      onLayoutChanged={onLayoutChangedOuter}
-    >
-      {panels.map(([outerPanelSize, ...widgetPanels], index) => {
-        return (
-          <Fragment key={JSON.stringify(widgetPanels)}>
-            <Panel
-              defaultSize={outerPanelSize}
-              id={createOuterPanelId(outerOrientation, index)}
-              minSize={outerOrientation === 'vertical' ? MIN_PANEL_HEIGHT : MIN_PANEL_WIDTH}
-              style={{ overflow: 'hidden' }}
-            >
-              {widgetPanels.length === 1 && panelMap[widgetPanels[0][1] as keyof typeof panelMap]}
-              {widgetPanels.length > 1 && (
-                <Group
-                  groupRef={index === 0 ? groupRefInner0 : groupRefInner1}
-                  orientation={innerOrientation}
-                  id={createInnerGroupId(innerOrientation, index)}
-                  defaultLayout={index === 0 ? defaultLayoutInner0 : defaultLayoutInner1}
-                  onLayoutChanged={index === 0 ? onLayoutChangedInner0 : onLayoutChangedInner1}
-                >
-                  {widgetPanels.map(([widgetPanelSize, zone], innerIndex) => {
-                    return (
-                      <Fragment key={zone}>
-                        <Panel
-                          defaultSize={widgetPanelSize}
-                          id={createInnerPanelId(innerOrientation, index, innerIndex)}
-                          minSize={innerOrientation === 'vertical' ? MIN_PANEL_HEIGHT : MIN_PANEL_WIDTH}
-                          style={{ overflow: 'hidden' }}
-                        >
-                          {panelMap[zone as keyof typeof panelMap]}
-                        </Panel>
-                        {innerIndex < widgetPanels.length - 1 && innerOrientation === 'horizontal' && (
-                          <PanelSeparatorVertical disabled={disabled} />
-                        )}
-                        {innerIndex < widgetPanels.length - 1 && innerOrientation === 'vertical' && (
-                          <PanelSeparatorHorizontal disabled={disabled} />
-                        )}
-                      </Fragment>
-                    );
-                  })}
-                </Group>
-              )}
-            </Panel>
-            {index < panels.length - 1 && outerOrientation === 'horizontal' && (
-              <PanelSeparatorVertical disabled={disabled} />
-            )}
-            {index < panels.length - 1 && outerOrientation === 'vertical' && (
-              <PanelSeparatorHorizontal disabled={disabled} />
-            )}
-          </Fragment>
-        );
-      })}
-    </Group>
-  );
-};
-
-export const EpiDashboardLayoutRenderer = forwardRef(ForwardRefEpiDashboardLayoutRenderer);

package/src/components/epi/EpiDashboard/EpiDashboardLayoutSettingsForm.tsx

@@ -1,160 +0,0 @@
-import {
-  Box,
-  Button,
-  FormGroup,
-  Typography,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import RestartAltIcon from '@mui/icons-material/RestartAlt';
-import {
-  FormProvider,
-  useForm,
-  useWatch,
-} from 'react-hook-form';
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-} from 'react';
-import { useStore } from 'zustand';
-import noop from 'lodash/noop';
-import { useShallow } from 'zustand/shallow';
-
-import type {
-  EpiDashboardLayoutConfig,
-  EpiDashboardLayoutUserConfig,
-} from '../../../models/epi';
-import { EPI_ZONE } from '../../../models/epi';
-import type { ToggleButtonOption } from '../../../models/form';
-import { userProfileStore } from '../../../stores/userProfileStore';
-import { DashboardUtil } from '../../../utils/DashboardUtil';
-import { Switch } from '../../form/fields/Switch';
-import { ToggleButtonGroup } from '../../form/fields/ToggleButtonGroup';
-
-type LayoutFormElements = Array<{ label: string; disabled?: boolean; epiZone: EPI_ZONE }>;
-
-export type EpiDashboardLayoutSettingsFormProps = {
-  readonly onReset: () => void;
-};
-
-export const EpiDashboardLayoutSettingsForm = ({ onReset }: EpiDashboardLayoutSettingsFormProps) => {
-  const { t } = useTranslation();
-
-  const resetEpiDashboardLayout = useStore(userProfileStore, useShallow((state) => state.resetEpiDashboardLayout));
-  const epiDashboardLayoutUserConfig = useStore(userProfileStore, useShallow((state) => state.epiDashboardLayoutUserConfig));
-  const setEpiDashboardLayoutUserConfig = useStore(userProfileStore, useShallow((state) => state.setEpiDashboardLayoutUserConfig));
-
-  const layoutConfig: EpiDashboardLayoutConfig = DashboardUtil.getDashboardLayoutConfig(epiDashboardLayoutUserConfig) ?? { zones: [], layouts: [] };
-
-  const arrangementOptions = useMemo<ToggleButtonOption[]>(() => layoutConfig.layouts.map<ToggleButtonOption>((_layout, index) => ({
-    disabled: false,
-    label: index === 0 ? t`Default` : t('Alternative {{index}}', { index }),
-    value: index,
-  })), [layoutConfig.layouts, t]);
-
-  const layoutFormElements = useMemo<LayoutFormElements>(() => {
-    const elements: LayoutFormElements = [
-      {
-        epiZone: EPI_ZONE.LINE_LIST,
-        label: t`Show line list`,
-      },
-      {
-        epiZone: EPI_ZONE.TREE,
-        label: t`Show phylogenetic tree`,
-      },
-      {
-        epiZone: EPI_ZONE.EPI_CURVE,
-        label: t`Show epi curve`,
-      },
-      {
-        epiZone: EPI_ZONE.MAP,
-        label: t`Show map`,
-      },
-    ];
-    return elements;
-  }, [t]);
-
-  const formMethods = useForm<EpiDashboardLayoutUserConfig>({
-    values: epiDashboardLayoutUserConfig,
-  });
-  const { control, setValue } = formMethods;
-
-  const formValues = useWatch({ control });
-
-  const onResetButtonClick = useCallback(() => {
-    resetEpiDashboardLayout();
-    if (onReset) {
-      onReset();
-    }
-  }, [onReset, resetEpiDashboardLayout]);
-
-  useEffect(() => {
-    if (formValues.arrangement >= layoutConfig.layouts.length) {
-      setValue('arrangement', 0);
-    }
-  }, [formValues.arrangement, layoutConfig.layouts.length, setValue]);
-
-  useEffect(() => {
-    setEpiDashboardLayoutUserConfig(formValues as EpiDashboardLayoutUserConfig);
-  }, [formValues, layoutFormElements, setEpiDashboardLayoutUserConfig]);
-
-  const onLayoutChange = useCallback(() => {
-    setValue('arrangement', 0);
-  }, [setValue]);
-
-  return (
-    <FormProvider {...formMethods}>
-      <form
-        autoComplete={'off'}
-        onSubmit={noop}
-      >
-        <Box marginY={1}>
-          <FormGroup>
-            {layoutFormElements.map(layoutFormElement => (
-              <Switch
-                key={layoutFormElement.epiZone}
-                label={layoutFormElement.label}
-                name={`zones.${layoutFormElement.epiZone}`}
-                onChange={onLayoutChange}
-              />
-            ))}
-          </FormGroup>
-        </Box>
-        <Box marginY={1}>
-          <Typography variant={'h6'}>
-            {t`Arrangement`}
-          </Typography>
-        </Box>
-        {arrangementOptions.length > 0 && (
-          <Box marginY={1}>
-            <FormGroup>
-              <ToggleButtonGroup
-                required
-                disabled={layoutConfig.layouts.length < 1}
-                name={'arrangement'}
-                options={arrangementOptions}
-              />
-            </FormGroup>
-          </Box>
-        )}
-      </form>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'flex-end',
-        }}
-      >
-        <Box marginX={1}>
-          <Button
-            color={'primary'}
-            startIcon={<RestartAltIcon />}
-            variant={'outlined'}
-            onClick={onResetButtonClick}
-          >
-            {t`Reset dashboard layout`}
-          </Button>
-        </Box>
-      </Box>
-    </FormProvider>
-  );
-};

package/src/components/epi/EpiDashboard/EpiDashboardSettingsSidebarItem.tsx

@@ -1,93 +0,0 @@
-import {
-  Box,
-  Divider,
-  Typography,
-  useTheme,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import SettingsIcon from '@mui/icons-material/Settings';
-import { useMemo } from 'react';
-
-import type { SidebarItemSharedProps } from '../../ui/Sidebar';
-import { SidebarItem } from '../../ui/Sidebar';
-
-import { EpiDashboardGeneralSettingsForm } from './EpiDashboardGeneralSettingsForm';
-import { EpiDashboardLayoutSettingsForm } from './EpiDashboardLayoutSettingsForm';
-import { EpiDashboardTreeSettingsForm } from './EpiDashboardTreeSettingsForm';
-
-export type EpiDashboardSettingsSidebarItemProps = SidebarItemSharedProps & {
-  readonly onReset: () => void;
-};
-type EpiDashboardSettingsSidebarItemContentProps = Pick<EpiDashboardSettingsSidebarItemProps, 'onReset'>;
-
-export const EpiDashboardSettingsSidebarItemIcon = SettingsIcon;
-
-const EpiDashboardSettingsSidebarItemContent = ({ onReset }: EpiDashboardSettingsSidebarItemContentProps) => {
-  const theme = useTheme();
-  const { t } = useTranslation();
-
-  const items = useMemo(() => [
-    {
-      label: t`General`,
-      component: <EpiDashboardGeneralSettingsForm onReset={onReset} />,
-    },
-    {
-      label: t`Phylogenetic tree`,
-      component: <EpiDashboardTreeSettingsForm onReset={onReset} />,
-    },
-    {
-      label: t`Dashboard layout`,
-      component: <EpiDashboardLayoutSettingsForm onReset={onReset} />,
-    },
-  ], [onReset, t]);
-
-  return (
-    <Box
-      sx={{
-        width: theme.spacing(59),
-      }}
-    >
-      {items.map(({ label, component }, index) => (
-        <Box
-          key={label}
-          marginTop={index !== 0 ? 2 : 0}
-          paddingTop={index !== items.length - 1 ? 1 : 0}
-        >
-          <Typography variant={'h5'}>
-            {label}
-          </Typography>
-          <Box marginBottom={2}>
-            {component}
-          </Box>
-          <Divider
-            flexItem
-            orientation={'horizontal'}
-            sx={{
-              marginLeft: 0,
-              marginRight: 1,
-            }}
-            variant={'middle'}
-          />
-        </Box>
-      ))}
-    </Box>
-  );
-};
-
-export const EpiDashboardSettingsSidebarItem = ({ open, onClose, onReset }: EpiDashboardSettingsSidebarItemProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <SidebarItem
-      closeIcon={<EpiDashboardSettingsSidebarItemIcon />}
-      closeIconTooltipText={t`Close settings`}
-      open={open}
-      title={t`Settings`}
-      width={60}
-      testIdAttributes={{ name: 'EpiDashboardSettingsSidebarItem' }}
-      onClose={onClose}
-    >
-      {open && <EpiDashboardSettingsSidebarItemContent onReset={onReset} />}
-    </SidebarItem>
-  );
-};

package/src/components/epi/EpiDashboard/EpiDashboardTreeSettingsForm.tsx

@@ -1,90 +0,0 @@
-import {
-  Box,
-  Button,
-  FormGroup,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import RestartAltIcon from '@mui/icons-material/RestartAlt';
-import {
-  FormProvider,
-  useForm,
-  useWatch,
-} from 'react-hook-form';
-import {
-  useCallback,
-  useEffect,
-} from 'react';
-import { useStore } from 'zustand';
-import noop from 'lodash/noop';
-import { useShallow } from 'zustand/shallow';
-
-import type { EpiDashboardTreeSettings } from '../../../stores/userProfileStore';
-import { userProfileStore } from '../../../stores/userProfileStore';
-import { Switch } from '../../form/fields/Switch';
-
-export type EpiDashboardTreeSettingsFormProps = {
-  readonly onReset: () => void;
-};
-
-export const EpiDashboardTreeSettingsForm = ({ onReset }: EpiDashboardTreeSettingsFormProps) => {
-  const { t } = useTranslation();
-
-  const resetEpiDashboardTreeSettings = useStore(userProfileStore, useShallow((state) => state.resetEpiDashboardTreeSettings));
-  const epiDashboardTreeSettings = useStore(userProfileStore, useShallow((state) => state.epiDashboardTreeSettings));
-  const setEpiDashboardTreeSettings = useStore(userProfileStore, useShallow((state) => state.setEpiDashboardTreeSettings));
-
-
-  const formMethods = useForm<EpiDashboardTreeSettings>({
-    defaultValues: epiDashboardTreeSettings,
-    values: epiDashboardTreeSettings,
-  });
-  const { control } = formMethods;
-
-  const formValues = useWatch({ control });
-
-  const onResetButtonClick = useCallback(() => {
-    resetEpiDashboardTreeSettings();
-    if (onReset) {
-      onReset();
-    }
-  }, [onReset, resetEpiDashboardTreeSettings]);
-
-  useEffect(() => {
-    setEpiDashboardTreeSettings(formValues as EpiDashboardTreeSettings);
-  }, [formValues, setEpiDashboardTreeSettings]);
-
-  return (
-    <FormProvider {...formMethods}>
-      <form
-        autoComplete={'off'}
-        onSubmit={noop}
-      >
-        <Box marginY={1}>
-          <FormGroup>
-            <Switch<EpiDashboardTreeSettings>
-              label={t`Show distances`}
-              name={'isShowDistancesEnabled'}
-            />
-          </FormGroup>
-        </Box>
-      </form>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'flex-end',
-        }}
-      >
-        <Box marginX={1}>
-          <Button
-            color={'primary'}
-            startIcon={<RestartAltIcon />}
-            variant={'outlined'}
-            onClick={onResetButtonClick}
-          >
-            {t`Reset tree settings`}
-          </Button>
-        </Box>
-      </Box>
-    </FormProvider>
-  );
-};

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

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

package/src/components/epi/EpiDashboardStoreLoader/EpiDashboardStoreLoader.tsx

@@ -1,34 +0,0 @@
-import {
-  useState,
-  type PropsWithChildren,
-} from 'react';
-
-import type {
-  CaseSet,
-  CompleteCaseType,
-} from '../../../api';
-import { EpiCompletCaseTypeLoader } from '../EpiCompletCaseTypeLoader';
-
-import { EpiDashboardStoreLoaderContent } from './EpiDashboardStoreLoaderContent';
-
-export type EpiDashboardStoreLoaderProps = PropsWithChildren<{
-  readonly caseSet?: CaseSet;
-  readonly caseTypeId: string;
-}>;
-
-export const EpiDashboardStoreLoader = ({ caseTypeId, caseSet, children }: EpiDashboardStoreLoaderProps) => {
-  const [completeCaseType, setCompleteCaseType] = useState<CompleteCaseType>(null);
-  return (
-    <EpiCompletCaseTypeLoader
-      caseTypeId={caseTypeId}
-      onCompleteCaseTypeLoaded={setCompleteCaseType}
-    >
-      <EpiDashboardStoreLoaderContent
-        caseSet={caseSet}
-        completeCaseType={completeCaseType}
-      >
-        {completeCaseType && children}
-      </EpiDashboardStoreLoaderContent>
-    </EpiCompletCaseTypeLoader>
-  );
-};