@gen-epix/ui 1.14.4 → 1.15.0

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

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+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>
+  );
+};