@reltio/graph 1.4.1585 → 1.4.1586-mui5

package/src/hooks/useGraphLoader.ts

@@ -0,0 +1,279 @@
+import {useCallback, useEffect, useState, useContext} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import Graph, {MultiGraph} from 'graphology';
+import {difference, prop} from 'ramda';
+import {
+    Entity,
+    getHops,
+    getRequestErrorMessage,
+    HopsResponse,
+    isDataTenantEntity,
+    isTempUri,
+    getLastUriPart,
+    createRelation,
+    getEntity,
+    removeRelation,
+    Relation,
+    Metadata,
+    GraphLayout,
+    isAbortError
+} from '@reltio/mdm-sdk';
+import i18n from 'ui-i18n';
+import mdmModule, {ui} from '@reltio/mdm-module';
+import {usePrevious, useSafePromise, PageRequestsAbortingContext} from '@reltio/components';
+
+import {GraphPathType, GraphState} from '../types/graphDataTypes';
+import {addRelationToHopsData, removeRelationFromHopsData, mergeHopsData} from '../utils/hopsData';
+import {fillGraphWithHopsResponse, getIsolatedNodes, removeNodesFromGraph} from '../utils/graph';
+
+export const useGraphLoader = (
+    entity: Entity,
+    graphTypeUri?: string,
+    layout?: GraphLayout
+): Pick<
+    GraphState,
+    | 'graphLoading'
+    | 'data'
+    | 'onAddRelation'
+    | 'onDeleteRelation'
+    | 'onCollapseEntity'
+    | 'onExpandEntity'
+    | 'graphologyGraph'
+> => {
+    const [graphologyGraph, setGraphologyGraph] = useState<Graph>(null);
+    const dispatch = useDispatch();
+    const [data, setData] = useState<HopsResponse>(null);
+    const [loading, setLoading] = useState(false);
+    const entityUri = entity?.uri;
+    const isDTEntity = isDataTenantEntity(entity);
+    const metadata: Metadata = useSelector(mdmModule.selectors.getMetadata);
+    const safeLoadHopsPromise = useSafePromise();
+    const safeLoadHopsForEntityPromise = useSafePromise();
+    const isTreeLayout = layout === GraphLayout.TREE;
+    const prevLayout = usePrevious(layout);
+    const signal = useContext(PageRequestsAbortingContext);
+
+    const isPrevAndCurrentLayoutTree = prevLayout === GraphLayout.TREE && isTreeLayout;
+
+    const loadHopsForEntity = useCallback(
+        (uri: string, deep = 1) => {
+            return safeLoadHopsForEntityPromise(
+                getHops({
+                    uri,
+                    deep,
+                    limitCreditsConsumption: true,
+                    graphTypes: graphTypeUri ? [getLastUriPart(graphTypeUri)] : null,
+                    activenessDate: null,
+                    max: graphTypeUri ? 200 : 3000,
+                    signal
+                })
+            );
+        },
+        [graphTypeUri, safeLoadHopsForEntityPromise, signal]
+    );
+
+    useEffect(() => {
+        if (entityUri && !isTempUri(entityUri) && !isDTEntity && !isTreeLayout) {
+            setLoading(true);
+            safeLoadHopsPromise(
+                getHops({
+                    uri: entityUri,
+                    deep: graphTypeUri ? 2 : 1,
+                    limitCreditsConsumption: true,
+                    graphTypes: graphTypeUri ? [getLastUriPart(graphTypeUri)] : null,
+                    activenessDate: null,
+                    max: graphTypeUri ? 200 : 3000,
+                    signal
+                })
+            )
+                .then((data) => {
+                    const graph = new MultiGraph();
+                    fillGraphWithHopsResponse(graph, data);
+                    setGraphologyGraph(graph);
+                    setData(data);
+                })
+                .catch((error) => {
+                    console.error(error);
+                    setData(null);
+                    if (!isAbortError(error)) {
+                        dispatch(ui.actions.errorSet(getRequestErrorMessage(error, i18n.text('Something went wrong'))));
+                    }
+                })
+                .finally(() => {
+                    setLoading(false);
+                });
+        }
+
+        return () => {
+            setGraphologyGraph(null);
+            setData(null);
+            setLoading(false);
+        };
+    }, [entityUri, isDTEntity, dispatch, graphTypeUri, isPrevAndCurrentLayoutTree]);
+
+    const onAddRelation = useCallback(
+        async ({startEntityUri, endEntityUri, relationType, attributes, startDate, endDate}) => {
+            try {
+                setLoading(true);
+                const response = await createRelation({
+                    startEntityUri,
+                    endEntityUri,
+                    relationType,
+                    attributes,
+                    startDate,
+                    endDate
+                });
+
+                if (!response?.[0]?.successful) {
+                    throw response?.[0];
+                }
+
+                const respondedRelation: Relation = response[0].object;
+                const relatedEntityUri =
+                    startEntityUri === entityUri
+                        ? respondedRelation.endObject.objectURI
+                        : respondedRelation.startObject.objectURI;
+
+                const relatedEntity = await getEntity(relatedEntityUri, {select: 'label'} as any);
+
+                if (startEntityUri === entityUri) {
+                    respondedRelation.endObject.label = relatedEntity.label;
+                } else {
+                    respondedRelation.startObject.label = relatedEntity.label;
+                }
+
+                const newData = addRelationToHopsData(data, respondedRelation, metadata);
+                fillGraphWithHopsResponse(graphologyGraph, newData);
+
+                const extremities = [respondedRelation.startObject.objectURI, respondedRelation.endObject.objectURI];
+                const entitiesUris = data.entities.map(prop('uri'));
+
+                extremities.forEach((node) => {
+                    if (entitiesUris.includes(node)) {
+                        const traversedRelationsCount = graphologyGraph.getNodeAttribute(
+                            node,
+                            'traversedRelationsCount'
+                        );
+                        graphologyGraph.setNodeAttribute(node, 'traversedRelationsCount', traversedRelationsCount + 1);
+                    }
+                });
+
+                setData(newData);
+            } catch (error) {
+                dispatch(ui.actions.errorSet(getRequestErrorMessage(error, i18n.text('Something went wrong'))));
+                throw error;
+            } finally {
+                setLoading(false);
+            }
+        },
+        [dispatch, data, graphologyGraph, metadata]
+    );
+
+    const onDeleteRelation = useCallback(
+        (uri: string) => {
+            setLoading(true);
+            removeRelation(uri)
+                .then(() => {
+                    const extremities = graphologyGraph.extremities(uri);
+                    extremities.forEach((node) => {
+                        const traversedRelationsCount = graphologyGraph.getNodeAttribute(
+                            node,
+                            'traversedRelationsCount'
+                        );
+                        graphologyGraph.setNodeAttribute(node, 'traversedRelationsCount', traversedRelationsCount - 1);
+                    });
+                    graphologyGraph.dropEdge(uri);
+                    const {updatedData, removedEntitiesUris} = removeRelationFromHopsData(
+                        entityUri,
+                        uri,
+                        graphologyGraph,
+                        data
+                    );
+                    removeNodesFromGraph(graphologyGraph, removedEntitiesUris);
+                    setData(updatedData);
+                })
+                .catch((error) => {
+                    dispatch(ui.actions.errorSet(getRequestErrorMessage(error, i18n.text('Something went wrong'))));
+                })
+                .finally(() => {
+                    setLoading(false);
+                });
+        },
+        [dispatch, graphologyGraph, entityUri, data]
+    );
+
+    const onCollapseEntity = useCallback(
+        (uri: string, path: GraphPathType) => {
+            const {nodes = []} = path;
+
+            const neighbors = difference(graphologyGraph.neighbors(uri), nodes);
+            const nodesToHide = getIsolatedNodes(entityUri, uri, neighbors, graphologyGraph);
+            nodesToHide.forEach((node) => {
+                if (node !== entityUri && node !== uri) {
+                    graphologyGraph.setNodeAttribute(node, 'hidden', true);
+                }
+            });
+        },
+        [entityUri, graphologyGraph]
+    );
+
+    const onExpandEntity = useCallback(
+        (uri: string) => {
+            if (uri && !isTempUri(uri) && !isDTEntity) {
+                const untraversedRelationsCount = graphologyGraph.getNodeAttribute(uri, 'untraversedRelationsCount');
+
+                const neighbors = graphologyGraph.neighbors(uri);
+                neighbors.forEach((node) => {
+                    graphologyGraph.setNodeAttribute(node, 'hidden', false);
+                });
+
+                if (untraversedRelationsCount > 0) {
+                    setLoading(true);
+                    loadHopsForEntity(uri)
+                        .then((newData) => {
+                            const mergedData = mergeHopsData(data, newData, uri);
+
+                            fillGraphWithHopsResponse(graphologyGraph, newData);
+                            const loadedEntity = newData.entities.find((entity) => entity.uri === uri);
+                            graphologyGraph.setNodeAttribute(
+                                uri,
+                                'untraversedRelationsCount',
+                                loadedEntity.untraversedRelations
+                            );
+                            graphologyGraph.setNodeAttribute(
+                                uri,
+                                'traversedRelationsCount',
+                                loadedEntity.traversedRelations
+                            );
+
+                            setData(mergedData);
+                        })
+                        .catch((error) => {
+                            console.error(error);
+                            if (!isAbortError(error)) {
+                                dispatch(
+                                    ui.actions.errorSet(
+                                        getRequestErrorMessage(error, i18n.text('Something went wrong'))
+                                    )
+                                );
+                            }
+                        })
+                        .finally(() => {
+                            setLoading(false);
+                        });
+                }
+            }
+        },
+        [data, dispatch, graphologyGraph, isDTEntity, loadHopsForEntity]
+    );
+
+    return {
+        graphLoading: loading,
+        data,
+        graphologyGraph,
+        onAddRelation,
+        onDeleteRelation,
+        onCollapseEntity,
+        onExpandEntity
+    };
+};

package/src/hooks/useGraphRightSidePanelElements.tsx

@@ -0,0 +1,36 @@
+import React, {useMemo} from 'react';
+import i18n from 'ui-i18n';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import RightPanelRelationship from '../components/RightPanelRelationship/RightPanelRelationship';
+import RightPanelEntityDetails from '../components/RightPanelEntityDetails/RightPanelEntityDetails';
+import {ActivePanel} from '../components/GraphRightSidePanel/GraphRightSidePanel';
+import RelationshipIcon from '../components/GraphRightSidePanel/icons/relationship-icon.svg';
+import {RightPanelTab} from '@reltio/components';
+
+export const useGraphRightSidePanelElements = (): {tabs: RightPanelTab[]} => {
+    const tabs = useMemo(
+        () => [
+            {
+                buttonProps: {
+                    id: ActivePanel.Relationship,
+                    icon: RelationshipIcon,
+                    tooltipTitle: i18n.text('Relationship'),
+                    showForDisabled: true
+                },
+                content: <RightPanelRelationship />
+            },
+            {
+                buttonProps: {
+                    id: ActivePanel.EntityDetails,
+                    icon: InfoOutlinedIcon,
+                    tooltipTitle: i18n.text('Entity Details'),
+                    showForDisabled: true
+                },
+                content: <RightPanelEntityDetails />
+            }
+        ],
+        []
+    );
+
+    return {tabs};
+};

package/src/hooks/useGraphState.ts

@@ -0,0 +1,40 @@
+import {Entity, GraphLayout} from '@reltio/mdm-sdk';
+import {GraphState} from '../types/graphDataTypes';
+import {useGraphLoader} from './useGraphLoader';
+import {useSelectedEntity} from './useSelectedEntity';
+import {useRelationshipTable} from './useRelationshipTable';
+import {useGraphType} from './useGraphType';
+import {useGraphLayoutSelector} from './useGraphLayoutSelector';
+
+export const useGraphState = (entity: Entity, initialGraphTypeUri?: string, graphLayout?: GraphLayout): GraphState => {
+    const {layout, setLayout} = useGraphLayoutSelector(graphLayout);
+    const {graphTypeUri, setGraphTypeUri} = useGraphType(entity, initialGraphTypeUri, setLayout);
+
+    const {graphLoading, data, graphologyGraph, onAddRelation, onDeleteRelation, onCollapseEntity, onExpandEntity} =
+        useGraphLoader(entity, graphTypeUri, layout);
+    const {selectedEntity, onEntitySelect, selectedEntityLoading} = useSelectedEntity(entity, data);
+    const relationshipTable = useRelationshipTable({
+        data,
+        selectedEntityUri: selectedEntity?.uri,
+        mainEntityUri: entity?.uri,
+        graphTypeUri
+    });
+
+    return {
+        graphLoading,
+        data,
+        graphologyGraph,
+        selectedEntity,
+        selectedEntityLoading,
+        graphTypeUri,
+        relationshipTable,
+        layout,
+        onAddRelation,
+        onDeleteRelation,
+        onCollapseEntity,
+        onExpandEntity,
+        onEntitySelect,
+        setGraphTypeUri,
+        setLayout
+    };
+};

package/src/hooks/useGraphType.ts

@@ -0,0 +1,32 @@
+import {Entity, getGraphTypesForEntityType, GraphLayout} from '@reltio/mdm-sdk';
+import {useEffect, useState} from 'react';
+
+import mdm from '@reltio/mdm-module';
+import {useSelector} from 'react-redux';
+import {GraphState} from '../types/graphDataTypes';
+
+export const useGraphType = (
+    entity: Entity,
+    initialGraphTypeUri?: string,
+    setLayout?: (GraphLayout) => void
+): Pick<GraphState, 'graphTypeUri' | 'setGraphTypeUri'> => {
+    const [graphTypeUri, setGraphTypeUri] = useState<string>(null);
+
+    const onSetGraphTypeUri = (graphTypeUri) => {
+        setGraphTypeUri(graphTypeUri);
+        if (!graphTypeUri) {
+            setLayout(GraphLayout.SIMPLE_NETWORK);
+        }
+    };
+    const metadata = useSelector(mdm.selectors.getMetadata);
+    useEffect(() => {
+        const isCorrectGraphType = getGraphTypesForEntityType(metadata, entity.type).some(
+            ({uri}) => initialGraphTypeUri === uri
+        );
+        if (isCorrectGraphType) {
+            setGraphTypeUri(initialGraphTypeUri);
+        }
+    }, [initialGraphTypeUri, entity, metadata]);
+
+    return {graphTypeUri, setGraphTypeUri: onSetGraphTypeUri};
+};

package/src/hooks/useRelationshipTable.ts

@@ -0,0 +1,212 @@
+import {useCallback, useEffect, useMemo, useState} from 'react';
+import {either, equals, filter, identity, map, pipe, prop, sort, uniqBy, zipObj, ifElse, includes, T} from 'ramda';
+import {useDispatch, useSelector} from 'react-redux';
+import {
+    EntitiesMap,
+    getEndObjectUri,
+    getEntityTypeLabel,
+    getLabel,
+    getRelationTypeLabelFromMetadata,
+    getStartObjectUri,
+    HopEntity,
+    HopRelation,
+    HopsResponse,
+    Metadata,
+    utils,
+    getRelation,
+    Relation,
+    updateRelation,
+    getRequestErrorMessage
+} from '@reltio/mdm-sdk';
+
+import mdm, {ui} from '@reltio/mdm-module';
+import {useRelationshipTableFilters} from './useRelationshipTableFilters';
+import {RelationshipRow, RelationshipTableState} from '../types/graphDataTypes';
+import {ROWS_PER_PAGE_OPTIONS} from '../constants';
+
+import i18n from 'ui-i18n';
+
+const getSecondEntityUri = (firstEntityUri: string, relation: HopRelation) => {
+    const startEntityUri = getStartObjectUri(relation);
+    const endEntityUri = getEndObjectUri(relation);
+    return startEntityUri === firstEntityUri ? endEntityUri : startEntityUri;
+};
+
+const getRelationTypeLabel = (metadata: Metadata, relation: HopRelation, entityUri: string) => {
+    const {startObject, endObject, type} = relation;
+    const {directionalLabel} = getStartObjectUri(relation) === entityUri ? startObject : endObject;
+    return directionalLabel || getRelationTypeLabelFromMetadata(metadata, type);
+};
+
+type Props = {
+    data: HopsResponse;
+    selectedEntityUri: string;
+    mainEntityUri: string;
+    graphTypeUri: string;
+};
+
+export const useRelationshipTable = ({
+    data,
+    selectedEntityUri,
+    mainEntityUri,
+    graphTypeUri
+}: Props): RelationshipTableState => {
+    const [sorting, setSorting] = useState({
+        field: '',
+        order: 'asc'
+    });
+    const [page, setPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(ROWS_PER_PAGE_OPTIONS[0]);
+    const [editingRelations, setEditingRelations] = useState<Array<{initialRelation: Relation; relation: Relation}>>(
+        []
+    );
+    const [loading, setLoading] = useState(false);
+    const dispatch = useDispatch();
+    const metadata = useSelector(mdm.selectors.getMetadata);
+
+    const entitiesMap: EntitiesMap<HopEntity> = useMemo(() => {
+        const entities = data?.entities || [];
+        return zipObj(entities.map(prop('uri')), entities);
+    }, [data?.entities]);
+
+    const allRowsData: RelationshipRow[] = useMemo(
+        () =>
+            pipe(
+                filter(
+                    either(
+                        pipe(getStartObjectUri, equals(selectedEntityUri)),
+                        pipe(getEndObjectUri, equals(selectedEntityUri))
+                    )
+                ),
+                uniqBy(prop('uri')),
+                map((relation: HopRelation) => {
+                    const entity = entitiesMap[getSecondEntityUri(selectedEntityUri, relation)];
+                    return {
+                        relation,
+                        entity,
+                        entityLabel: getLabel(entity.label),
+                        entityTypeLabel: getEntityTypeLabel(metadata, entity),
+                        relationTypeLabel: getRelationTypeLabel(metadata, relation, entity.uri)
+                    };
+                })
+            )(data?.relations || []),
+        [data, selectedEntityUri, entitiesMap, metadata]
+    );
+
+    const {
+        searchText,
+        onChangeSearchText,
+        filters,
+        onFilter,
+        relationTypesOptions,
+        entityTypesOptions
+    } = useRelationshipTableFilters(allRowsData);
+
+    const filteredRowsData: RelationshipRow[] = useMemo(
+        () =>
+            pipe(
+                filter(({entityLabel, entity, relation}: RelationshipRow) => {
+                    const {entityTypesUris, relationTypesUris} = filters;
+                    return (
+                        utils.strings.search(entityLabel, searchText) &&
+                        ifElse(prop('length'), includes(relation.type), T)(relationTypesUris) &&
+                        ifElse(prop('length'), includes(entity.type), T)(entityTypesUris)
+                    );
+                }),
+                sorting.field
+                    ? sort((a: RelationshipRow, b: RelationshipRow) =>
+                        utils.strings.sort(sorting.order, a[sorting.field], b[sorting.field])
+                    )
+                    : identity
+            )(allRowsData),
+        [allRowsData, sorting, searchText, filters]
+    );
+
+    const pagedRowsData: RelationshipRow[] = useMemo(
+        () => filteredRowsData.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
+        [filteredRowsData, page, rowsPerPage]
+    );
+
+    const onStartRelationEditing = useCallback(
+        (uri: string) => {
+            setLoading(true);
+            getRelation(uri)
+                .then((relation) => {
+                    setEditingRelations((prev) => [...prev, {initialRelation: relation, relation}]);
+                })
+                .catch((error) => {
+                    dispatch(
+                        ui.actions.errorSet(
+                            getRequestErrorMessage(error, i18n.text("Can't load relationship's attributes"))
+                        )
+                    );
+                })
+                .finally(() => setLoading(false));
+        },
+        [dispatch]
+    );
+
+    const onUpdateEditingRelation = useCallback((relation: Relation) => {
+        setEditingRelations((prev) =>
+            prev.map((rel) => (rel.relation.uri === relation.uri ? {...rel, relation} : rel))
+        );
+    }, []);
+
+    useEffect(() => {
+        setPage(0);
+        onChangeSearchText('');
+    }, [selectedEntityUri, graphTypeUri, onChangeSearchText, onFilter]);
+
+    useEffect(() => {
+        onFilter({entityTypesUris: [], relationTypesUris: []});
+    }, [graphTypeUri, mainEntityUri, onFilter]);
+
+    useEffect(() => {
+        setPage(0);
+    }, [sorting, searchText, filters]);
+
+    const onCancelRelationEditing = useCallback((uri: string) => {
+        setEditingRelations((prev) => prev.filter((rel) => rel.relation.uri !== uri));
+    }, []);
+
+    const onSaveEditingRelation = useCallback(
+        (oldRelation: Relation, newRelation: Relation) => {
+            setLoading(true);
+            updateRelation({
+                oldRelation,
+                newRelation
+            })
+                .then(() => {
+                    onCancelRelationEditing(newRelation.uri);
+                })
+                .catch((error) => {
+                    dispatch(ui.actions.errorSet(getRequestErrorMessage(error, i18n.text("Can't edit relationship"))));
+                })
+                .finally(() => setLoading(false));
+        },
+        [onCancelRelationEditing, dispatch]
+    );
+
+    return {
+        rowsData: pagedRowsData,
+        onSort: setSorting,
+        sorting: sorting,
+        searchText,
+        onChangeSearchText,
+        filters,
+        onFilter,
+        entityTypesOptions,
+        relationTypesOptions,
+        editingRelations,
+        onStartRelationEditing,
+        onCancelRelationEditing,
+        onUpdateEditingRelation,
+        total: filteredRowsData.length,
+        page: page,
+        rowsPerPage: rowsPerPage,
+        onPageChange: setPage,
+        onRowsPerPageChange: setRowsPerPage,
+        onSaveEditingRelation,
+        loading
+    };
+};

package/src/hooks/useRelationshipTableFilters.ts

@@ -0,0 +1,43 @@
+import {useState, useMemo} from 'react';
+import {useSelector} from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+import {pipe, map, uniq, concat, __} from 'ramda';
+import {getRelationType, getEntityType, Metadata, TEntityType, TRelationType} from '@reltio/mdm-sdk';
+import {Filters, RelationshipRow} from '../types/graphDataTypes';
+
+export const useRelationshipTableFilters = (allRowsData: RelationshipRow[]) => {
+    const [searchText, setSearchText] = useState('');
+    const [filters, setFilters] = useState<Filters>({entityTypesUris: [], relationTypesUris: []});
+
+    const metadata: Metadata = useSelector(mdmModule.selectors.getMetadata);
+
+    const entityTypesOptions: TEntityType[] = useMemo(
+        () =>
+            pipe(
+                map(({entity}) => entity.type),
+                concat(__, filters.entityTypesUris),
+                uniq,
+                map(getEntityType(metadata))
+            )(allRowsData),
+        [allRowsData, metadata, filters.entityTypesUris]
+    );
+    const relationTypesOptions: TRelationType[] = useMemo(
+        () =>
+            pipe(
+                map(({relation}) => relation.type),
+                concat(__, filters.relationTypesUris),
+                uniq,
+                map(getRelationType(metadata))
+            )(allRowsData),
+        [allRowsData, metadata, filters.relationTypesUris]
+    );
+
+    return {
+        searchText,
+        onChangeSearchText: setSearchText,
+        filters,
+        onFilter: setFilters,
+        entityTypesOptions,
+        relationTypesOptions
+    };
+};