@reltio/graph 1.4.1585 → 1.4.1586-mui5

package/src/rendering/webgl/shaders/node.border.frag.glsl.ts

@@ -0,0 +1,30 @@
+/*
+ * This file copies sigma/examples/custom-rendering/programs/node.border.frag.glsl, but with a some
+ * difference: white color was changed to transparent and used border radius from v_borderRadius variable
+ */
+
+export const fragmentShaderSource = `
+precision mediump float;
+
+varying vec4 v_color;           // base color of node
+varying float v_border;
+varying float v_borderRadius;   // inner border radius
+
+const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);  // transparent color
+const float radius = 0.5;
+
+void main(void) {
+    float distToCenter = length(gl_PointCoord - vec2(0.5, 0.5)); // distance from current point to center of node
+
+    if (distToCenter < v_borderRadius - v_border)   // distance to inner border radius
+        gl_FragColor = transparent;
+    else if (distToCenter < v_borderRadius)
+        gl_FragColor = mix(v_color, transparent, (v_borderRadius - distToCenter) / v_border);
+    else if (distToCenter < radius - v_border)      // distance to outer border radius
+        gl_FragColor = v_color;
+    else if (distToCenter < radius)
+        gl_FragColor = mix(transparent, v_color, (radius - distToCenter) / v_border);
+    else                                            // points outside the button
+        gl_FragColor = transparent;
+}
+`;

package/src/rendering/webgl/shaders/node.border.vert.glsl.ts

@@ -0,0 +1,37 @@
+/*
+ * This file copies sigma/examples/custom-rendering/programs/node.border.vert.glsl, but with a some
+ * difference: added calculation of v_borderRadius using a_borderSize variable
+ */
+
+export const vertexShaderSource = `
+attribute vec2 a_position;
+attribute float a_size;
+attribute vec4 a_color;
+attribute float a_borderSize;
+
+uniform float u_ratio;
+uniform float u_scale;
+uniform mat3 u_matrix;
+
+varying vec4 v_color;
+varying float v_border;
+varying float v_borderRadius;
+
+const float bias = 255.0 / 254.0;
+const float radius = 0.5;
+
+void main() {
+    gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
+
+    // Multiply the point size twice:
+    //  - x SCALING_RATIO to correct the canvas scaling
+    //  - x 2 to correct the formulae
+    gl_PointSize = a_size * u_ratio * u_scale * 2.0;
+  
+    v_border = (1.0 / u_ratio) * (0.5 / a_size);
+    v_borderRadius = radius - (radius * a_borderSize / a_size); // border radius in node's size (full size is 1)
+
+    // Extract the color:
+    v_color = a_color;
+    v_color.a *= bias;
+}`;

package/src/rendering/webgl/shaders/node.buttons.frag.glsl.ts

@@ -0,0 +1,32 @@
+export const fragmentShaderSource = `
+precision mediump float;
+
+varying float v_border;
+varying vec4 v_texture;
+
+uniform sampler2D u_atlas;
+
+const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
+const vec4 black = vec4(0.0, 0.0, 0.0, 1.0);
+const float bias = 255.0 / 254.0;
+const float radius = 0.5;
+
+void main(void) {
+    vec4 color;
+    float distToCenter = length(gl_PointCoord - vec2(0.5, 0.5));
+
+    // set texel as color of point
+    if (v_texture.w > 0.0) {
+        vec4 texel = texture2D(u_atlas, v_texture.xy + gl_PointCoord * v_texture.zw, -1.0);
+        color = vec4(mix(black, texel, texel.a).rgb, max(texel.a, bias));
+    } else {
+        color = black;
+    }
+
+    if (distToCenter < radius - v_border)   // points inside button
+        gl_FragColor = color;
+    else if (distToCenter < radius)         // border of button
+        gl_FragColor = mix(transparent, color, (0.5 - distToCenter) / v_border);
+    else                                    // points outside button
+        gl_FragColor = transparent;
+}`;

package/src/rendering/webgl/shaders/node.buttons.vert.glsl.ts

@@ -0,0 +1,49 @@
+export const vertexShaderSource = `
+attribute vec2 a_position;
+attribute float a_size;
+attribute vec4 a_color;
+attribute float a_buttonSize;
+attribute vec2 a_normals;
+attribute vec4 a_texture;
+
+uniform float u_ratio;
+uniform float u_scale;
+uniform mat3 u_matrix;
+uniform float u_sqrtZoomRatio;
+uniform float u_correctionRatio;
+
+varying float v_border;
+varying vec4 v_texture;
+varying vec4 v_color;
+
+const float bias = 255.0 / 254.0;
+
+void main() {
+    float normalLength = length(a_normals);
+    vec2 unitNormal = (a_normals) / normalLength;
+
+    float pixelsThickness = max(normalLength, 1.0 * u_sqrtZoomRatio);
+    float webGLThickness = pixelsThickness * u_correctionRatio;
+    float adaptedWebGLThickness = webGLThickness * u_sqrtZoomRatio;
+
+    // Move the point
+    float adaptedWebGLNodeRadius = a_size * 2.0 * u_correctionRatio * u_sqrtZoomRatio;
+    vec2 compensationVector = vec2(-unitNormal.y, unitNormal.x) * (adaptedWebGLNodeRadius);
+
+    // Set position
+    gl_Position = vec4((u_matrix * vec3(a_position + compensationVector, 1)).xy, 0, 1);
+
+    // Multiply the point size twice:
+    //  - x SCALING_RATIO to correct the canvas scaling
+    //  - x 2 to correct the formulae
+    gl_PointSize = a_buttonSize * u_ratio * u_scale * 2.0;
+
+    v_border = (1.0 / u_ratio) * (0.5 / a_size);
+
+    // Extract the color:
+    v_color = a_color;
+    v_color.a *= bias;
+
+    // Pass the texture coordinates:
+    v_texture = a_texture;
+}`;

package/src/rendering/webgl/shaders/node.image.frag.glsl.ts

@@ -0,0 +1,46 @@
+export const fragmentShaderSource = `
+precision mediump float;
+
+varying float v_border;
+varying float v_inactive;
+varying vec4 v_color;
+varying vec4 v_texture;
+
+uniform sampler2D u_atlas;
+
+const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
+const float radius = 0.5;
+
+// convert color to gray
+vec4 toGrayscale(in vec4 color)
+{
+  float average = (color.r + color.g + color.b) / 3.0;
+  return vec4(average, average, average, 1.0);
+}
+
+void main(void) {
+    vec4 color;
+
+    // set texel as color of point
+    if (v_texture.w > 0.0) {
+        vec4 texel = texture2D(u_atlas, v_texture.xy + gl_PointCoord * v_texture.zw, -1.0);
+        color = vec4(mix(v_color, texel, texel.a).rgb, max(texel.a, v_color.a));
+    } else {
+        color = v_color;
+    }
+
+    // convert color to gray
+    if (v_inactive > 0.0) {
+        color = toGrayscale(color);
+    }
+
+    // distance from point to center of node
+    float dist = length(gl_PointCoord - vec2(0.5, 0.5));
+
+    if (dist < radius - v_border)   // points inside node
+        gl_FragColor = color;
+    else if (dist < radius)         // border of node
+        gl_FragColor = mix(transparent, color, (radius - dist) / v_border);
+    else                            // points outside node
+        gl_FragColor = transparent;
+}`;

package/src/rendering/webgl/shaders/node.image.vert.glsl.ts

@@ -0,0 +1,42 @@
+/*
+ * This file copies sigma/examples/custom-rendering/programs/node.image.vert.glsl, but with a some
+ * difference: white color was changed to transparent and used border radius from v_borderRadius variable
+ */
+export const vertexShaderSource = `
+attribute vec2 a_position;
+attribute float a_size;
+attribute vec4 a_color;
+attribute vec4 a_texture;
+attribute float a_inactive;
+
+uniform float u_ratio;
+uniform float u_scale;
+uniform mat3 u_matrix;
+
+varying float v_border;
+varying float v_inactive;
+varying vec4 v_color;
+varying vec4 v_texture;
+
+const float bias = 255.0 / 254.0;
+
+void main() {
+    gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
+
+    // Multiply the point size twice:
+    //  - x SCALING_RATIO to correct the canvas scaling
+    //  - x 2 to correct the formulae
+    gl_PointSize = a_size * u_ratio * u_scale * 2.0;
+
+    v_border = (1.0 / u_ratio) * (0.5 / a_size);
+
+    // Extract the color:
+    v_color = a_color;
+    v_color.a *= bias;
+
+    // Pass the texture coordinates:
+    v_texture = a_texture;
+
+    // Pass inactive property
+    v_inactive = a_inactive;
+}`;

package/src/types/graphDataTypes.ts

@@ -0,0 +1,143 @@
+import Graph from 'graphology';
+import {NodeDisplayData, EdgeDisplayData} from 'sigma/types';
+import {
+    Entity,
+    HopsResponse,
+    HopEntity,
+    HopRelation,
+    TRelationType,
+    TEntityType,
+    Relation,
+    RecordAttributesType,
+    RelationTypeDirection,
+    GraphLayout
+} from '@reltio/mdm-sdk';
+
+export type AddRelation = {
+    startEntityUri: string;
+    endEntityUri: string;
+    relationType: string;
+    attributes?: RecordAttributesType;
+    startDate?: number;
+    endDate?: number;
+};
+
+export type Filters = {entityTypesUris: string[]; relationTypesUris: string[]};
+
+export type GraphState = {
+    graphLoading: boolean;
+    data: HopsResponse;
+    graphologyGraph: Graph;
+    selectedEntityLoading: boolean;
+    selectedEntity: Entity;
+    onDeleteRelation?: (uri: string) => void;
+    onEntitySelect: (uri: string) => void;
+    onCollapseEntity: (uri: string, path: GraphPathType) => void;
+    onExpandEntity: (uri: string) => void;
+    graphTypeUri?: string;
+    setGraphTypeUri?: (graphType: string) => void;
+    relationshipTable: RelationshipTableState;
+    onAddRelation?: (params: AddRelation) => Promise<void>;
+    layout: GraphLayout;
+    setLayout: (layout: GraphLayout) => void;
+};
+
+export type RelationshipTableState = {
+    rowsData?: RelationshipRow[];
+    onSort?: (sorting: {field: string; order: string}) => void;
+    sorting?: {
+        field: string;
+        order: string;
+    };
+    editingRelations?: Array<{initialRelation: Relation; relation: Relation}>;
+    onStartRelationEditing?: (uri: string) => void;
+    onCancelRelationEditing?: (uri: string) => void;
+    onUpdateEditingRelation?: (relation: Relation) => void;
+    onSaveEditingRelation?: (oldRelation: Relation, newRelation: Relation) => void;
+    total?: number;
+    page?: number;
+    rowsPerPage?: number;
+    onPageChange?: (page: number) => void;
+    onRowsPerPageChange?: (page: number) => void;
+    searchText?: string;
+    onChangeSearchText?: (value: string) => void;
+    filters?: Filters;
+    onFilter?: (filters: Filters) => void;
+    relationTypesOptions?: TRelationType[];
+    entityTypesOptions?: TEntityType[];
+    loading?: boolean;
+};
+
+export type Edge = {
+    from: string;
+    to: string;
+    key: string;
+    relationTypeUri: string;
+    direction: RelationTypeDirection;
+};
+
+export type Node = {
+    id: string;
+    name: string;
+    entityTypeUri: string;
+    traversedRelationsCount: number;
+    untraversedRelationsCount: number;
+};
+
+export type GraphologyGraphData = {
+    nodes: Node[];
+    edges: Edge[];
+};
+
+export type EdgeAttributes = EdgeDisplayData & {
+    loop: boolean;
+    relationTypeUri?: string;
+    direction?: RelationTypeDirection;
+    hidden?: boolean;
+    arrowSizeRatio?: number;
+    hovered?: boolean;
+    relationLabel?: string;
+};
+
+export type NodeAttributes = NodeDisplayData & {
+    buttonSize: number;
+    buttonOffset: [number, number];
+    image: string;
+    entityTypeUri: string;
+    traversedRelationsCount?: number;
+    untraversedRelationsCount?: number;
+    inPath?: boolean;
+    inactive?: boolean;
+    showExpand?: boolean;
+    showCollapse?: boolean;
+};
+
+export type NodesHierarchy = Array<string[]>;
+
+export type GraphPathType = {
+    edges?: string[];
+    nodes?: string[];
+};
+
+export type RelationshipRow = {
+    entity: HopEntity;
+    relation: HopRelation;
+    entityLabel: string;
+    entityTypeLabel: string;
+    relationTypeLabel: string;
+};
+
+export interface GraphologyLayout<T> {
+    (graph: Graph, options: T): {[node: string]: {[dimension: string]: number}};
+    assign?(graph: Graph, options: T): void;
+}
+
+interface GraphologyWorkerLayout {
+    stop: () => void;
+    start: () => void;
+    kill: () => void;
+}
+
+export interface GraphologyWorkerLayoutConstructor<T> {
+    new (graph: Graph, settings: T): GraphologyWorkerLayout;
+}

package/src/types/sigmaCustomRenderersTypes.ts

@@ -0,0 +1,13 @@
+type Renderer = {
+    renderer: (context: CanvasRenderingContext2D) => void;
+    insertBefore: string;
+};
+
+export type Renderers = Record<string, Renderer>;
+
+export type Canvas = {
+    canvasElement: HTMLCanvasElement;
+    context: CanvasRenderingContext2D;
+};
+
+export type Canvases = Record<string, Canvas>;

package/src/utils/__tests__/graph.spec.ts

@@ -0,0 +1,152 @@
+import {MultiGraph} from 'graphology';
+import {HopsResponse} from '@reltio/mdm-sdk';
+import {fillGraphWithHopsResponse, getIsolatedNodes} from '../graph';
+
+describe('Graph utils', () => {
+    describe('getIsolatedNodes behavior', () => {
+        /**
+         *  'e1' ---- 'e3
+         *   |
+         *  'e2' ---- 'e6'
+         *   |
+         *  'e4' ---- 'e5' --- 'e7'
+         */
+        const data: HopsResponse = {
+            entities: [
+                {uri: 'e1', type: ''},
+                {uri: 'e2', type: ''},
+                {uri: 'e3', type: ''},
+                {uri: 'e4', type: ''},
+                {uri: 'e5', type: ''},
+                {uri: 'e6', type: ''},
+                {uri: 'e7', type: ''}
+            ],
+            relations: [
+                {
+                    uri: 'r1',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e1'
+                    },
+                    endObject: {
+                        objectURI: 'e2'
+                    }
+                },
+                {
+                    uri: 'r2',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e1'
+                    },
+                    endObject: {
+                        objectURI: 'e3'
+                    }
+                },
+                {
+                    uri: 'r3',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e2'
+                    },
+                    endObject: {
+                        objectURI: 'e4'
+                    }
+                },
+                {
+                    uri: 'r4',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e2'
+                    },
+                    endObject: {
+                        objectURI: 'e6'
+                    }
+                },
+                {
+                    uri: 'r5',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e4'
+                    },
+                    endObject: {
+                        objectURI: 'e5'
+                    }
+                },
+                {
+                    uri: 'r6',
+                    type: '',
+                    startObject: {
+                        objectURI: 'e5'
+                    },
+                    endObject: {
+                        objectURI: 'e7'
+                    }
+                }
+            ]
+        };
+
+        it('should return isolated nodes', () => {
+            const entityUri = 'e1';
+            const mainNode = 'e2';
+
+            const graph = new MultiGraph();
+            fillGraphWithHopsResponse(graph, data);
+
+            expect(getIsolatedNodes(entityUri, mainNode, ['e4', 'e6'], graph)).toEqual(['e4', 'e5', 'e6', 'e7']);
+        });
+
+        it('should not remove node if it has path to entityUri', () => {
+            const hopsData = {
+                entities: [...data.entities],
+                relations: [
+                    ...data.relations,
+                    {
+                        uri: 'r7',
+                        type: '',
+                        startObject: {
+                            objectURI: 'e5'
+                        },
+                        endObject: {
+                            objectURI: 'e3'
+                        }
+                    }
+                ]
+            };
+
+            const graph = new MultiGraph();
+            fillGraphWithHopsResponse(graph, hopsData);
+
+            const entityUri = 'e1';
+            const mainNode = 'e2';
+
+            expect(getIsolatedNodes(entityUri, mainNode, ['e4', 'e6'], graph)).toEqual(['e4', 'e6']);
+        });
+
+        it('should remove node from directed graph', () => {
+            const hopsData = {
+                entities: [...data.entities],
+                relations: [
+                    ...data.relations,
+                    {
+                        uri: 'r7',
+                        type: '',
+                        startObject: {
+                            objectURI: 'e5'
+                        },
+                        endObject: {
+                            objectURI: 'e4'
+                        }
+                    }
+                ]
+            };
+
+            const graph = new MultiGraph();
+            fillGraphWithHopsResponse(graph, hopsData);
+
+            const entityUri = 'e1';
+            const mainNode = 'e2';
+
+            expect(getIsolatedNodes(entityUri, mainNode, ['e4', 'e6'], graph)).toEqual(['e4', 'e5', 'e6', 'e7']);
+        });
+    });
+});

package/src/utils/__tests__/graphLayout.spec.ts

@@ -0,0 +1,125 @@
+import {HopsResponse, RelationTypeDirection} from '@reltio/mdm-sdk';
+import {MultiGraph} from 'graphology';
+import {fillGraphWithHopsResponse} from '../graph';
+import {mouseIsOnNode, directionTypeToEdgeType, edgePathFromNodePath, getMousePos} from '../graphLayout';
+
+describe('Graph Layout utils', () => {
+    describe('mouseIsOnNode behaviour', () => {
+        it('should work correctly if cursor over node', () => {
+            expect(mouseIsOnNode(100, 100, 100, 100, 50)).toBe(true);
+            expect(mouseIsOnNode(130, 100, 100, 100, 50)).toBe(true);
+            expect(mouseIsOnNode(80, 100, 100, 100, 50)).toBe(true);
+            expect(mouseIsOnNode(70, 70, 100, 100, 50)).toBe(true);
+        });
+
+        it('should work correctly if cursor does not over node', () => {
+            expect(mouseIsOnNode(160, 100, 100, 100, 50)).toBe(false);
+            expect(mouseIsOnNode(100, 160, 100, 100, 50)).toBe(false);
+            expect(mouseIsOnNode(40, 100, 100, 100, 50)).toBe(false);
+            expect(mouseIsOnNode(100, 40, 100, 100, 50)).toBe(false);
+        });
+    });
+
+    describe('directionTypeToEdgeType behaviour', () => {
+        it('should format direction type to edge type correctly', () => {
+            expect(directionTypeToEdgeType(RelationTypeDirection.bidirectional)).toBe('doubleArrow');
+            expect(directionTypeToEdgeType(RelationTypeDirection.directed)).toBe('arrow');
+            expect(directionTypeToEdgeType(RelationTypeDirection.undirected)).toBe('line');
+        });
+
+        it('should return line edge type by default for unknown direction type', () => {
+            expect(directionTypeToEdgeType('unknownDirectionType' as any)).toBe('line');
+        });
+    });
+
+    describe('edgePathFromNodePath behaviour', () => {
+        it('should return correct edge path from node path', () => {
+            const data: HopsResponse = {
+                entities: [
+                    {
+                        uri: 'entities/mnGjvTt',
+                        type: 'configuration/entityTypes/HCP',
+                        label: 'new23цц new1m123 - kkk',
+                        secondaryLabel: ', kkk',
+                        untraversedRelations: 94,
+                        traversedRelations: 22
+                    },
+
+                    {
+                        label: 'MK HCP17991 MyTest1 - Name - QitLNIUQIIvHTTv Rolojfeg',
+                        secondaryLabel: 'QitLNIUQIIvHTTv Rolojfeg CO, Name',
+                        traversedRelations: 27,
+                        type: 'configuration/entityTypes/HCP',
+                        untraversedRelations: 0,
+                        uri: 'entities/tw5GACk'
+                    },
+                    {
+                        label: 'Copy of MK HCP17991 - New Name Created Entity7',
+                        secondaryLabel: ', New Name Created Entity7',
+                        traversedRelations: 2,
+                        type: 'configuration/entityTypes/HCP',
+                        untraversedRelations: 4,
+                        uri: 'entities/1oUp8K0G'
+                    }
+                ],
+                relations: [
+                    {
+                        uri: 'relations/1GJ69oZR',
+                        type: 'configuration/relationTypes/Family',
+                        startObject: {
+                            objectURI: 'entities/tw5GACk',
+                            directionalLabel: 'Family'
+                        },
+                        endObject: {
+                            objectURI: 'entities/mnGjvTt',
+                            directionalLabel: 'Family'
+                        },
+                        direction: RelationTypeDirection.bidirectional
+                    },
+                    {
+                        direction: RelationTypeDirection.directed,
+                        endObject: {
+                            directionalLabel: '',
+                            objectURI: 'entities/1oUp8K0G'
+                        },
+                        startObject: {
+                            directionalLabel: '',
+                            objectURI: 'entities/mnGjvTt'
+                        },
+                        type: 'configuration/relationTypes/HCPtoHCP',
+                        uri: 'relations/1DKed0bI'
+                    }
+                ]
+            };
+
+            const graph = new MultiGraph();
+            fillGraphWithHopsResponse(graph, data);
+            const nodes = ['entities/tw5GACk', 'entities/mnGjvTt', 'entities/1oUp8K0G'];
+            const isDirected = false;
+            expect(edgePathFromNodePath(graph, nodes, isDirected)).toEqual([
+                'relations/1GJ69oZR',
+                'relations/1DKed0bI'
+            ]);
+        });
+    });
+
+    describe('getMousePos behaviour', () => {
+        it('should return real mouse position correctly', () => {
+            const canvas = {
+                getBoundingClientRect: () => ({
+                    left: 64,
+                    right: 888,
+                    top: 148,
+                    bottom: 1000
+                }),
+                width: 772,
+                height: 798
+            } as HTMLCanvasElement;
+            const mouseEvent = {
+                clientX: 864,
+                clientY: 547
+            } as MouseEvent;
+            expect(getMousePos(canvas, mouseEvent)).toEqual({x: 749.5145631067961, y: 373.7112676056338});
+        });
+    });
+});