@gen-epix/ui 1.14.4 → 1.15.0

package/src/pages/CrudPage/CrudPageDeleteDialog.tsx

@@ -0,0 +1,85 @@
+import type { ReactElement } from 'react';
+import {
+  useCallback,
+  useEffect,
+} from 'react';
+import SaveIcon from '@mui/icons-material/Save';
+import { useTranslation } from 'react-i18next';
+import { Box } from '@mui/material';
+
+import type { DialogAction } from '../../components/ui/Dialog';
+import type {
+  WithDialogRenderProps,
+  WithDialogRefMethods,
+} from '../../hoc/withDialog';
+import { withDialog } from '../../hoc/withDialog';
+import type { GenericData } from '../../models/data';
+import { TestIdUtil } from '../../utils/TestIdUtil';
+
+
+export interface CrudPageDeleteDialogOpenProps<TData extends GenericData> {
+  readonly item: TData;
+}
+export interface CrudPageDeleteDialogProps<TData extends GenericData> extends WithDialogRenderProps<CrudPageDeleteDialogOpenProps<TData>> {
+  readonly onConfirm: (item: TData) => void;
+  readonly getName: (item: TData) => string;
+  readonly createItemDialogTitle?: string;
+}
+export type CrudPageDeleteDialogRefMethods<TData extends GenericData> = WithDialogRefMethods<CrudPageDeleteDialogProps<TData>, CrudPageDeleteDialogOpenProps<TData>>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const CrudPageDeleteDialog = withDialog<CrudPageDeleteDialogProps<any>, CrudPageDeleteDialogOpenProps<any>>(<TData extends GenericData>(
+  {
+    onConfirm,
+    onClose,
+    openProps,
+    onTitleChange,
+    onActionsChange,
+    getName,
+    createItemDialogTitle,
+  }: CrudPageDeleteDialogProps<TData>,
+): ReactElement => {
+  const { t } = useTranslation();
+
+  const onConfirmButtonClick = useCallback(() => {
+    onConfirm(openProps.item);
+    onClose();
+  }, [onClose, onConfirm, openProps.item]);
+
+  useEffect(() => {
+    const actions: DialogAction[] = [];
+    actions.push({
+      ...TestIdUtil.createAttributes('CrudPageDeleteDialog-closeButton'),
+      color: 'primary',
+      autoFocus: true,
+      variant: 'outlined',
+      onClick: onClose,
+      label: t`Cancel`,
+    });
+    actions.push({
+      ...TestIdUtil.createAttributes('CrudPageDeleteDialog-confirmButton'),
+      color: 'secondary',
+      variant: 'contained',
+      onClick: onConfirmButtonClick,
+      label: t`Confirm`,
+      startIcon: <SaveIcon />,
+    });
+
+    onActionsChange(actions);
+  }, [onActionsChange, t, openProps, onConfirmButtonClick, onClose]);
+
+  useEffect(() => {
+    onTitleChange(t('Delete item: {{itemName}}', { itemName: getName(openProps.item) }));
+  }, [getName, onTitleChange, openProps, t, createItemDialogTitle]);
+
+  return (
+    <Box>
+      {t('Are you sure you want to delete the item "{{itemName}}"?', { itemName: getName(openProps.item) })}
+    </Box>
+  );
+}, {
+  testId: 'CrudPageDeleteDialog',
+  maxWidth: 'lg',
+  fullWidth: true,
+  defaultTitle: '',
+});

package/src/pages/CrudPage/CrudPageEditDialog.tsx

@@ -0,0 +1,165 @@
+import type { ReactElement } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+} from 'react';
+import SaveIcon from '@mui/icons-material/Save';
+import { useTranslation } from 'react-i18next';
+import type {
+  ObjectSchema,
+  AnyObject,
+} from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import type {
+  Resolver,
+  UseFormReturn,
+} from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import { useDebouncedCallback } from 'use-debounce';
+
+import { GenericForm } from '../../components/form/helpers/GenericForm';
+import type { DialogAction } from '../../components/ui/Dialog';
+import type {
+  WithDialogRenderProps,
+  WithDialogRefMethods,
+} from '../../hoc/withDialog';
+import { withDialog } from '../../hoc/withDialog';
+import type { GenericData } from '../../models/data';
+import { FormUtil } from '../../utils/FormUtil';
+import { TestIdUtil } from '../../utils/TestIdUtil';
+import type { FormFieldDefinition } from '../../models/form';
+
+
+export interface CrudPageEditDialogOpenProps<TData extends GenericData> {
+  readonly item?: TData;
+  readonly extraActionsFactory?: (item: TData) => DialogAction[];
+  readonly canSave: boolean;
+}
+export interface CrudPageEditDialogProps<TData extends GenericData, TFormFields extends AnyObject> extends WithDialogRenderProps<CrudPageEditDialogOpenProps<TData>> {
+  readonly onSave: (formValues: TFormFields, item: TData) => void;
+  readonly onChange?: (item: TData, formValues: TFormFields, formMethods: UseFormReturn<TFormFields>) => void;
+  readonly formFieldDefinitions: FormFieldDefinition<TFormFields>[] | ((item: TData, values?: TFormFields) => FormFieldDefinition<TFormFields>[]);
+  readonly getName: (item: TData | TFormFields) => string;
+  readonly createItemDialogTitle?: string;
+  readonly defaultNewItem?: Partial<TFormFields>;
+  readonly schema: ObjectSchema<TFormFields, TFormFields>;
+}
+export type CrudPageEditDialogRefMethods<TData extends GenericData, TFormFields extends AnyObject> = WithDialogRefMethods<CrudPageEditDialogProps<TData, TFormFields>, CrudPageEditDialogOpenProps<TData>>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const CrudPageEditDialog = withDialog<CrudPageEditDialogProps<any, any>, CrudPageEditDialogOpenProps<any>>(<TData extends GenericData, TFormFields extends AnyObject>(
+  {
+    onSave,
+    onClose,
+    onChange,
+    openProps,
+    onTitleChange,
+    onActionsChange,
+    formFieldDefinitions,
+    schema,
+    getName,
+    createItemDialogTitle,
+    defaultNewItem,
+  }: CrudPageEditDialogProps<TData, TFormFields>,
+): ReactElement => {
+  const { t } = useTranslation();
+  const formId = useId();
+
+  const initialFormFieldDefinitions = useMemo(() => {
+    return typeof formFieldDefinitions === 'function' ? formFieldDefinitions(openProps.item) : formFieldDefinitions;
+  }, [formFieldDefinitions, openProps.item]);
+
+  const [resolvedFormFieldDefinitions, setResolvedFormFieldDefinitions] = useState<FormFieldDefinition<TFormFields>[]>(initialFormFieldDefinitions);
+
+  useEffect(() => {
+    const actions: DialogAction[] = [];
+    if (openProps.extraActionsFactory) {
+      actions.push(...openProps.extraActionsFactory(openProps.item));
+    }
+    actions.push({
+      ...TestIdUtil.createAttributes('CrudPageEditDialog-saveButton'),
+      color: 'secondary',
+      autoFocus: true,
+      variant: 'contained',
+      form: formId,
+      type: 'submit',
+      label: t`Save`,
+      startIcon: <SaveIcon />,
+      disabled: !openProps.canSave || resolvedFormFieldDefinitions.some(def => def.loading),
+    });
+    onActionsChange(actions);
+  }, [onActionsChange, formId, t, resolvedFormFieldDefinitions, openProps]);
+
+  const values = useMemo<TFormFields>(() => {
+    return { ...defaultNewItem, ...FormUtil.createFormValues(resolvedFormFieldDefinitions, { ...defaultNewItem, ...openProps.item }) };
+  }, [resolvedFormFieldDefinitions, openProps.item, defaultNewItem]);
+
+  useEffect(() => {
+    if (openProps.item) {
+      onTitleChange(`Edit item: ${getName({ ...defaultNewItem as TFormFields, ...openProps.item ?? {} })}`);
+    } else {
+      onTitleChange(createItemDialogTitle ?? t`Create new item`);
+    }
+  }, [getName, onTitleChange, openProps, t, createItemDialogTitle, defaultNewItem]);
+
+
+  const formMethods = useForm<TFormFields>({
+    resolver: yupResolver(schema) as Resolver<TFormFields>,
+    values,
+  });
+  const { handleSubmit, formState, subscribe } = formMethods;
+
+  const debouncedHandleValuesChange = useDebouncedCallback((formValues: TFormFields) => {
+    if (onChange) {
+      onChange(openProps.item, formValues, formMethods);
+    }
+
+    if (typeof formFieldDefinitions !== 'function') {
+      return;
+    }
+    setResolvedFormFieldDefinitions(formFieldDefinitions(openProps.item, formValues));
+  }, 500, {
+    leading: false,
+    trailing: true,
+  });
+
+  useEffect(() => {
+    const unsubscribe = subscribe({
+      formState: {
+        values: true,
+      },
+      callback: ({ values: formValues }) => {
+        debouncedHandleValuesChange(formValues);
+      },
+    });
+    return () => unsubscribe();
+  }, [debouncedHandleValuesChange, formFieldDefinitions, subscribe]);
+
+  if (formState.errors && Object.keys(formState.errors).length > 0) {
+    console.table(formState.errors);
+  }
+
+  const onFormSubmit = useCallback((formFields: TFormFields): void => {
+    onSave(formFields, openProps.item);
+    onClose();
+  }, [onClose, onSave, openProps.item]);
+
+  return (
+    <GenericForm<TFormFields>
+      schema={schema}
+      disableAll={!openProps.canSave}
+      formFieldDefinitions={resolvedFormFieldDefinitions}
+      formId={formId}
+      formMethods={formMethods}
+      onSubmit={openProps.canSave ? handleSubmit(onFormSubmit) : undefined}
+    />
+  );
+}, {
+  testId: 'CrudPageEditDialog',
+  maxWidth: 'lg',
+  fullWidth: true,
+  defaultTitle: '',
+});

package/src/pages/CrudPage/index.ts

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

package/src/pages/DataCollectionSetsAdminPage/DataCollectionSetsAdminPage.tsx

@@ -0,0 +1,156 @@
+import {
+  useCallback,
+  useMemo,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  array,
+  object,
+  string,
+} from 'yup';
+
+import { CrudPage } from '../CrudPage';
+import type {
+  DataCollectionSet,
+  DataCollectionSetMember,
+} from '../../api';
+import {
+  OrganizationApi,
+  CommandName,
+} from '../../api';
+import { useDataCollectionOptionsQuery } from '../../dataHooks/useDataCollectionsQuery';
+import { useDataCollectionSetMembersQuery } from '../../dataHooks/useDataCollectionSetMembersQuery';
+import { useArray } from '../../hooks/useArray';
+import type { FormFieldDefinition } from '../../models/form';
+import { FORM_FIELD_DEFINITION_TYPE } from '../../models/form';
+import { QUERY_KEY } from '../../models/query';
+import type { TableColumn } from '../../models/table';
+import { TableUtil } from '../../utils/TableUtil';
+import { TestIdUtil } from '../../utils/TestIdUtil';
+
+type TableData = DataCollectionSet & { dataCollectionIds: string[] };
+
+type FormFields = Pick<TableData, 'name' | 'description' | 'dataCollectionIds'>;
+
+export const DataCollectionSetsAdminPage = () => {
+  const { t } = useTranslation();
+
+  const dataCollectionSetMembersQuery = useDataCollectionSetMembersQuery();
+  const dataCollectionOptionsQuery = useDataCollectionOptionsQuery();
+
+  const loadables = useArray([dataCollectionSetMembersQuery, dataCollectionOptionsQuery]);
+
+  const fetchAll = useCallback(async (signal: AbortSignal) => {
+    return (await OrganizationApi.instance.dataCollectionSetsGetAll({ signal }))?.data;
+  }, []);
+
+  const deleteOne = useCallback(async (item: DataCollectionSet) => {
+    return await OrganizationApi.instance.dataCollectionSetsDeleteOne(item.id);
+  }, []);
+
+  const updateOne = useCallback(async (variables: FormFields, item: DataCollectionSet) => {
+    await OrganizationApi.instance.dataCollectionSetsPutDataCollections(item.id, {
+      data_collection_set_members: variables.dataCollectionIds.map<DataCollectionSetMember>(data_collection_id => ({
+        data_collection_id,
+        data_collection_set_id: item.id,
+      })),
+    });
+    return (await OrganizationApi.instance.dataCollectionSetsPutOne(item.id, { id: item.id, ...variables })).data;
+  }, []);
+
+  const createOne = useCallback(async (variables: FormFields) => {
+    const resultItem = (await OrganizationApi.instance.dataCollectionSetsPostOne(variables)).data;
+    await OrganizationApi.instance.dataCollectionSetsPutDataCollections(resultItem.id, {
+      data_collection_set_members: variables.dataCollectionIds.map<DataCollectionSetMember>(data_collection_id => ({
+        data_collection_id,
+        data_collection_set_id: resultItem.id,
+      })),
+    });
+    return resultItem;
+  }, []);
+
+  const getName = useCallback((item: DataCollectionSet) => {
+    return item.name;
+  }, []);
+
+  const schema = useMemo(() => {
+    return object<FormFields>().shape({
+      name: string().extendedAlphaNumeric().required().max(100),
+      description: string().freeFormText().required().max(1000),
+      dataCollectionIds: array().of(string().uuid4()).min(1).required(),
+    });
+  }, []);
+
+  const formFieldDefinitions = useMemo<FormFieldDefinition<FormFields>[]>(() => {
+    return [
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
+        name: 'name',
+        label: t`Name`,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.RICH_TEXT,
+        name: 'description',
+        label: t`Description`,
+      } as const satisfies FormFieldDefinition<FormFields>,
+      {
+        definition: FORM_FIELD_DEFINITION_TYPE.TRANSFER_LIST,
+        name: 'dataCollectionIds',
+        label: t`Columns`,
+        options: dataCollectionOptionsQuery.options,
+        loading: dataCollectionOptionsQuery.isLoading,
+      } as const satisfies FormFieldDefinition<FormFields>,
+    ] as const;
+  }, [dataCollectionOptionsQuery.isLoading, dataCollectionOptionsQuery.options, t]);
+
+  const tableColumns = useMemo((): TableColumn<TableData>[] => {
+    return [
+      TableUtil.createTextColumn<TableData>({ id: 'name', name: t`Name`, advancedSort: true }),
+      {
+        type: 'number',
+        id: 'numDataCollections',
+        textAlign: 'right',
+        valueGetter: (item) => item.row.dataCollectionIds.length,
+        displayValueGetter: (item) => `${item.row.dataCollectionIds.length} / ${dataCollectionOptionsQuery.options.length}`,
+        headerName: t`Data collections`,
+        widthFlex: 0.5,
+        isInitiallyVisible: true,
+      },
+    ];
+  }, [dataCollectionOptionsQuery.options.length, t]);
+
+  const convertToTableData = useCallback((items: DataCollectionSet[]) => {
+    if (!items || !dataCollectionSetMembersQuery.data) {
+      return [];
+    }
+    return items.map<TableData>((item) => {
+      const dataCollectionIds = dataCollectionSetMembersQuery.data.filter(member => member.data_collection_set_id === item.id).map(member => member.data_collection_id);
+      return {
+        ...item,
+        dataCollectionIds,
+      } satisfies TableData;
+    });
+  }, [dataCollectionSetMembersQuery.data]);
+
+  return (
+    <CrudPage<FormFields, DataCollectionSet, TableData>
+      convertToTableData={convertToTableData}
+      createOne={createOne}
+      crudCommandType={CommandName.DataCollectionSetCrudCommand}
+      createItemDialogTitle={t`Create new data collection set`}
+      defaultSortByField={'name'}
+      defaultSortDirection={'asc'}
+      deleteOne={deleteOne}
+      fetchAll={fetchAll}
+      formFieldDefinitions={formFieldDefinitions}
+      getName={getName}
+      loadables={loadables}
+      resourceQueryKeyBase={QUERY_KEY.DATA_COLLECTION_SETS}
+      schema={schema}
+      tableColumns={tableColumns}
+      testIdAttributes={TestIdUtil.createAttributes('DataCollectionSetsAdminPage')}
+      title={t`Data collection sets`}
+      updateOne={updateOne}
+    />
+  );
+};

package/src/pages/DataCollectionSetsAdminPage/index.ts

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

package/src/pages/DataCollectionVisualizationPage/DataCollectionVisualizationPage.tsx

@@ -0,0 +1,238 @@
+import { useTranslation } from 'react-i18next';
+import { Box } from '@mui/material';
+import type { EChartsReactProps } from 'echarts-for-react';
+import EChartsReact from 'echarts-for-react';
+import * as echarts from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import {
+  TooltipComponent,
+  LegendComponent,
+} from 'echarts/components';
+import {
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react';
+
+import { PageContainer } from '../../components/ui/PageContainer';
+import { ResponseHandler } from '../../components/ui/ResponseHandler';
+import { useDataCollectionsQuery } from '../../dataHooks/useDataCollectionsQuery';
+import { useOrganizationMapQuery } from '../../dataHooks/useOrganizationsQuery';
+import { useArray } from '../../hooks/useArray';
+import { TestIdUtil } from '../../utils/TestIdUtil';
+
+
+echarts.use([TooltipComponent, LegendComponent, CanvasRenderer]);
+
+type Node = {
+  id: string;
+  name: string;
+  symbolSize: number;
+  x: number;
+  y: number;
+  value: number;
+  category: number;
+};
+
+type Links = {
+  source: string;
+  target: string;
+};
+
+type Category = {
+  name: string;
+};
+
+type Graph = {
+  nodes: Node[];
+  links: Links[];
+  categories: Category[];
+};
+
+const DataCollectionVisualizationPageInner = () => {
+  const dataCollectionsQuery = useDataCollectionsQuery();
+  const organizationMapQuery = useOrganizationMapQuery();
+
+  const loadables = useArray([
+    dataCollectionsQuery,
+    organizationMapQuery,
+  ]);
+
+  const chartRef = useRef<EChartsReact>(null);
+
+  const events = useMemo<EChartsReactProps['onEvents']>(() => {
+    return {
+      click: (event: unknown) => {
+        console.log(event);
+      },
+    };
+  }, []);
+
+  const graph = useMemo<Graph>(() => {
+    if (loadables.some((loadable) => loadable.isLoading)) {
+      return {
+        categories: [],
+        links: [],
+        nodes: [],
+      };
+    }
+
+    const categories: Category[] = [
+      {
+        name: 'Data Collection',
+      },
+      {
+        name: 'Organization',
+      },
+    ];
+
+    const dataCollectionNodes: Node[] = [];
+    const dataCollectionsLinks: Links[] = [];
+
+    const organizationNodes: Node[] = [];
+    const organizationLinks: Links[] = [];
+    const numDataCollectionSourceLinks: { [key: string]: number } = {};
+    const numOrganizationPolicies: { [key: string]: number } = {};
+
+    // organizationDataCollectionPolicies.data?.forEach((organizationDataCollectionPolicy) => {
+    //   // dataCollectionsLinks.push({
+    //   //   source: organizationDataCollectionPolicy.source_data_collection_id,
+    //   //   target: organizationDataCollectionPolicy.data_collection_id,
+    //   // });
+    //   organizationLinks.push({
+    //     source: organizationDataCollectionPolicy.organization_id,
+    //     target: organizationDataCollectionPolicy.data_collection_id,
+    //   });
+
+    //   if (!numDataCollectionSourceLinks[organizationDataCollectionPolicy.data_collection_id]) {
+    //     numDataCollectionSourceLinks[organizationDataCollectionPolicy.data_collection_id] = 0;
+    //   }
+    //   numDataCollectionSourceLinks[organizationDataCollectionPolicy.data_collection_id]++;
+
+    //   if (!numOrganizationPolicies[organizationDataCollectionPolicy.organization_id]) {
+    //     numOrganizationPolicies[organizationDataCollectionPolicy.organization_id] = 0;
+    //   }
+    //   numOrganizationPolicies[organizationDataCollectionPolicy.organization_id]++;
+    // });
+
+    Object.entries(numOrganizationPolicies).forEach(([organizationId, numPolicies]) => {
+      organizationNodes.push({
+        id: organizationId,
+        name: organizationMapQuery.map.get(organizationId)?.name || 'Unknown',
+        symbolSize: 15 + (numPolicies * 0.5),
+        // eslint-disable-next-line react-hooks/purity
+        x: Math.random() * 1000,
+        // eslint-disable-next-line react-hooks/purity
+        y: Math.random() * 1000,
+        value: 1,
+        category: 1,
+      });
+    });
+
+    dataCollectionsQuery.data?.forEach((dataCollection) => {
+      dataCollectionNodes.push({
+        id: dataCollection.id,
+        name: dataCollection.name,
+        symbolSize: 15 + ((numDataCollectionSourceLinks[dataCollection.id] || 1) * 1.5),
+        // eslint-disable-next-line react-hooks/purity
+        x: 1000 + Math.random() * 1000,
+        // eslint-disable-next-line react-hooks/purity
+        y: Math.random() * 1000,
+        value: 1,
+        category: 0,
+      });
+    });
+
+    return {
+      categories,
+      links: [...dataCollectionsLinks, ...organizationLinks],
+      nodes: [...dataCollectionNodes, ...organizationNodes],
+    } satisfies Graph;
+  }, [dataCollectionsQuery.data, loadables, organizationMapQuery.map]);
+
+  const getOptions = useCallback(() => {
+    return {
+      tooltip: {},
+      legend: [
+        {
+          // selectedMode: 'single',
+          data: graph.categories.map((a) => a.name),
+        },
+      ],
+      animationDuration: 1500,
+      animationEasingUpdate: 'quinticInOut',
+      series: [
+        {
+          // name: 'Les Miserables',
+          type: 'graph',
+          legendHoverLink: false,
+          layout: 'none',
+          data: graph.nodes,
+          links: graph.links,
+          categories: graph.categories,
+          roam: true,
+          label: {
+            show: true,
+            position: 'right',
+            formatter: '{b}',
+          },
+          labelLayout: {
+            hideOverlap: true,
+          },
+          lineStyle: {
+            color: 'source',
+            curveness: 0.3,
+          },
+          emphasis: {
+            focus: 'adjacency',
+            lineStyle: {
+              width: 10,
+            },
+          },
+        },
+      ],
+    };
+  }, [graph.categories, graph.links, graph.nodes]);
+
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        gap: 2,
+        gridTemplateRows: 'auto max-content',
+        height: '100%',
+      }}
+    >
+      <ResponseHandler
+        loadables={loadables}
+      >
+        <EChartsReact
+          ref={chartRef}
+          notMerge
+          echarts={echarts}
+          option={getOptions()}
+          style={{
+            width: '100%',
+            height: '100%',
+            position: 'absolute',
+          }}
+          onEvents={events}
+        />
+      </ResponseHandler>
+    </Box>
+  );
+};
+
+export const DataCollectionVisualizationPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <PageContainer
+      showBreadcrumbs
+      testIdAttributes={TestIdUtil.createAttributes('DataCollectionVisualizationPage')}
+      title={t`Data collection visualization`}
+    >
+      <DataCollectionVisualizationPageInner />
+    </PageContainer>
+  );
+};

package/src/pages/DataCollectionVisualizationPage/index.ts

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