@reltio/components 1.4.1844 → 1.4.1846

package/cjs/features/graph/rendering/webgl/node.image.js

@@ -0,0 +1,147 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeImageProgram = void 0;
+/*
+ * This class copies sigma/rendering/webgl/programs/node.image, but with a some
+ * difference: it can change color of picture for inactive state
+ * Program rendering nodes using GL_POINTS, but that draws an image on top of
+ * the classic colored disc.
+ */
+var node_image_vert_glsl_1 = require("./shaders/node.image.vert.glsl");
+var node_image_frag_glsl_1 = require("./shaders/node.image.frag.glsl");
+var node_1 = require("sigma/rendering/webgl/programs/common/node");
+var utils_1 = require("sigma/utils");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var no_photo_inline_svg_1 = require("../icons/no_photo.inline.svg");
+var image_1 = require("./image");
+var POINTS = 1;
+var ATTRIBUTES = 9;
+var defaultImage = { id: 'defaultImage', path: (0, mdm_sdk_1.svg2Url)(no_photo_inline_svg_1.DEFAULT_PROFILE_IMAGE) };
+/*
+ * To share the texture between the program instances of the graph and the
+ * hovered nodes (to prevent some flickering, mostly), this program must be
+ * "built" for each sigma instance:
+ */
+var NodeImageProgram = /** @class */ (function (_super) {
+    __extends(NodeImageProgram, _super);
+    function NodeImageProgram(gl, renderer) {
+        var _this = _super.call(this, gl, node_image_vert_glsl_1.vertexShaderSource, node_image_frag_glsl_1.fragmentShaderSource, POINTS, ATTRIBUTES) || this;
+        _this.imageLoader = new image_1.WebGLImageLoader();
+        _this.imageLoader.rebindTextureFns.push(function () {
+            if (_this && _this.rebindTexture)
+                _this.rebindTexture();
+            if (renderer && renderer.refresh)
+                renderer.refresh();
+        });
+        _this.imageLoader.textureImage = new ImageData(1, 1);
+        // Attribute Location
+        _this.textureLocation = gl.getAttribLocation(_this.program, 'a_texture');
+        _this.inactive = gl.getAttribLocation(_this.program, 'a_inactive');
+        // Uniform Location
+        var atlasLocation = gl.getUniformLocation(_this.program, 'u_atlas');
+        if (atlasLocation === null)
+            throw new Error('NodeProgramImage: error while getting atlasLocation');
+        _this.atlasLocation = atlasLocation;
+        // Initialize WebGL texture:
+        _this.texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, _this.texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]));
+        _this.imageLoader.loadImage(defaultImage.id, defaultImage.path);
+        _this.bind();
+        return _this;
+    }
+    NodeImageProgram.prototype.bind = function () {
+        _super.prototype.bind.call(this);
+        var gl = this.gl;
+        gl.enableVertexAttribArray(this.textureLocation);
+        gl.enableVertexAttribArray(this.inactive);
+        gl.vertexAttribPointer(this.inactive, 1, gl.FLOAT, false, this.attributes * Float32Array.BYTES_PER_ELEMENT, 16);
+        gl.vertexAttribPointer(this.textureLocation, 4, gl.FLOAT, false, this.attributes * Float32Array.BYTES_PER_ELEMENT, 20);
+    };
+    NodeImageProgram.prototype.process = function (data, hidden, offset) {
+        var array = this.array;
+        var i = offset * POINTS * ATTRIBUTES;
+        var imageSource = data.image;
+        var imageState = imageSource && this.imageLoader.images[imageSource];
+        if (typeof imageSource === 'string' && !imageState) {
+            this.imageLoader.loadImage(imageSource, imageSource);
+        }
+        if (hidden) {
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            // Texture:
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            return;
+        }
+        array[i++] = data.x; // position of center
+        array[i++] = data.y;
+        array[i++] = data.size; // size
+        array[i++] = (0, utils_1.floatColor)(data.color); // color
+        array[i++] = data.inactive ? 1 : 0; // inactive property
+        // Reference texture:
+        if (!imageState || imageState.status !== 'ready') {
+            imageState = this.imageLoader.images[defaultImage.id];
+        }
+        if (imageState && imageState.status === 'ready') {
+            var _a = this.imageLoader.textureImage, width = _a.width, height = _a.height;
+            array[i++] = imageState.x / width;
+            array[i++] = imageState.y / height;
+            array[i++] = imageState.width / width;
+            array[i++] = imageState.height / height;
+        }
+        else {
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+        }
+    };
+    NodeImageProgram.prototype.render = function (params) {
+        if (this.hasNothingToRender())
+            return;
+        this.latestRenderParams = params;
+        var gl = this.gl;
+        var program = this.program;
+        gl.useProgram(program);
+        gl.uniform1f(this.ratioLocation, 1 / Math.sqrt(params.ratio));
+        gl.uniform1f(this.scaleLocation, params.scalingRatio);
+        gl.uniformMatrix3fv(this.matrixLocation, false, params.matrix);
+        gl.uniform1i(this.atlasLocation, 0);
+        gl.drawArrays(gl.POINTS, 0, this.array.length / ATTRIBUTES);
+    };
+    NodeImageProgram.prototype.rebindTexture = function () {
+        var gl = this.gl;
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, this.texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.imageLoader.textureImage);
+        gl.generateMipmap(gl.TEXTURE_2D);
+        if (this.latestRenderParams) {
+            this.bind();
+            this.bufferData();
+            this.render(this.latestRenderParams);
+        }
+    };
+    return NodeImageProgram;
+}(node_1.AbstractNodeProgram));
+exports.NodeImageProgram = NodeImageProgram;

package/cjs/features/graph/rendering/webgl/shaders/edge.clamped.vert.glsl.d.ts

@@ -0,0 +1 @@
+export declare const vertexShaderSource = "\nattribute vec4 a_color;\nattribute vec2 a_normal;\nattribute vec2 a_position;\nattribute float a_radius;\nattribute float a_arrowSizeRatio;\n\nuniform mat3 u_matrix;\nuniform float u_sqrtZoomRatio;\nuniform float u_correctionRatio;\n\nvarying vec4 v_color;\nvarying vec2 v_normal;\nvarying float v_thickness;\n\nconst float minThickness = 1.7;\nconst float bias = 255.0 / 254.0;\nconst float arrowHeadLengthThicknessRatio = 2.5;\n\nvoid main() {\n  float normalLength = length(a_normal);\n  vec2 unitNormal = a_normal / normalLength;\n\n  // These first computations are taken from edge.vert.glsl. Please read it to\n  // get better comments on what's happening:\n  float pixelsThickness = max(normalLength, minThickness * u_sqrtZoomRatio);\n  float webGLThickness = pixelsThickness * u_correctionRatio;\n  float adaptedWebGLThickness = webGLThickness * u_sqrtZoomRatio;\n\n  // our change - apply a_arrowSizeRatio depending on current zoom and minThickness\n  float arrowSizeCoefficient = min(a_arrowSizeRatio, a_arrowSizeRatio / (u_sqrtZoomRatio * minThickness));\n\n  // Here, we move the point to leave space for the arrow head:\n  float direction = sign(a_radius);\n  float adaptedWebGLNodeRadius = direction * a_radius * 2.0 * u_correctionRatio * u_sqrtZoomRatio;\n\n  float adaptedWebGLArrowHeadLength = adaptedWebGLThickness * 2.0 * arrowHeadLengthThicknessRatio * arrowSizeCoefficient;\n\n\n  vec2 compensationVector = vec2(-direction * unitNormal.y, direction * unitNormal.x) * (adaptedWebGLNodeRadius + adaptedWebGLArrowHeadLength);\n\n  // Here is the proper position of the vertex\n  gl_Position = vec4((u_matrix * vec3(a_position + unitNormal * adaptedWebGLThickness + compensationVector, 1)).xy, 0, 1);\n\n  v_thickness = webGLThickness / u_sqrtZoomRatio;\n\n  v_normal = unitNormal;\n  v_color = a_color;\n  v_color.a *= bias;\n}";

package/cjs/features/graph/rendering/webgl/shaders/edge.clamped.vert.glsl.js

@@ -0,0 +1,8 @@
+"use strict";
+/*
+ * This file copies sigma/src/rendering/webgl/shaders/edge.clamped.vert.glsl, but with a some
+ * difference: added calculation of arrowSizeCoefficient using a_arrowSizeRatio attribute
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.vertexShaderSource = void 0;
+exports.vertexShaderSource = "\nattribute vec4 a_color;\nattribute vec2 a_normal;\nattribute vec2 a_position;\nattribute float a_radius;\nattribute float a_arrowSizeRatio;\n\nuniform mat3 u_matrix;\nuniform float u_sqrtZoomRatio;\nuniform float u_correctionRatio;\n\nvarying vec4 v_color;\nvarying vec2 v_normal;\nvarying float v_thickness;\n\nconst float minThickness = 1.7;\nconst float bias = 255.0 / 254.0;\nconst float arrowHeadLengthThicknessRatio = 2.5;\n\nvoid main() {\n  float normalLength = length(a_normal);\n  vec2 unitNormal = a_normal / normalLength;\n\n  // These first computations are taken from edge.vert.glsl. Please read it to\n  // get better comments on what's happening:\n  float pixelsThickness = max(normalLength, minThickness * u_sqrtZoomRatio);\n  float webGLThickness = pixelsThickness * u_correctionRatio;\n  float adaptedWebGLThickness = webGLThickness * u_sqrtZoomRatio;\n\n  // our change - apply a_arrowSizeRatio depending on current zoom and minThickness\n  float arrowSizeCoefficient = min(a_arrowSizeRatio, a_arrowSizeRatio / (u_sqrtZoomRatio * minThickness));\n\n  // Here, we move the point to leave space for the arrow head:\n  float direction = sign(a_radius);\n  float adaptedWebGLNodeRadius = direction * a_radius * 2.0 * u_correctionRatio * u_sqrtZoomRatio;\n\n  float adaptedWebGLArrowHeadLength = adaptedWebGLThickness * 2.0 * arrowHeadLengthThicknessRatio * arrowSizeCoefficient;\n\n\n  vec2 compensationVector = vec2(-direction * unitNormal.y, direction * unitNormal.x) * (adaptedWebGLNodeRadius + adaptedWebGLArrowHeadLength);\n\n  // Here is the proper position of the vertex\n  gl_Position = vec4((u_matrix * vec3(a_position + unitNormal * adaptedWebGLThickness + compensationVector, 1)).xy, 0, 1);\n\n  v_thickness = webGLThickness / u_sqrtZoomRatio;\n\n  v_normal = unitNormal;\n  v_color = a_color;\n  v_color.a *= bias;\n}";

package/cjs/features/graph/rendering/webgl/shaders/edge.dashed.frag.glsl.d.ts

@@ -0,0 +1 @@
+export declare const fragmentShaderSource = "\nprecision mediump float;\n\nvarying vec4 v_color;\nvarying vec2 v_normal;\nvarying float v_thickness;\nvarying float v_position; // our addition - the position along the line\n\nconst float feather = 0.001;\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\nconst float u_dashSize = 0.01; // our addition\nconst float u_gapSize = 0.005; // our addition\n\nvoid main(void) {\n  float dist = length(v_normal) * v_thickness;\n\n  float t = smoothstep(\n    v_thickness - feather,\n    v_thickness,\n    dist\n  );\n\n  // our additions\n  float totalSize = u_dashSize + u_gapSize;\n  float positionInDashGap = mod(v_position, totalSize);\n  float dashGapRatio = positionInDashGap / u_dashSize;\n  // end additions (dashGapRatio is used below in if)\n\n  if (dashGapRatio < 1.0) {\n    gl_FragColor = mix(v_color, transparent, t);\n  } else {\n    discard;\n  }\n}\n";

package/cjs/features/graph/rendering/webgl/shaders/edge.dashed.frag.glsl.js

@@ -0,0 +1,8 @@
+"use strict";
+/*
+ * This file copies sigma/src/rendering/webgl/shaders/edge.frag.glsl, but with a some changes
+ * difference: added a dash-gap pattern to the edge
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fragmentShaderSource = void 0;
+exports.fragmentShaderSource = "\nprecision mediump float;\n\nvarying vec4 v_color;\nvarying vec2 v_normal;\nvarying float v_thickness;\nvarying float v_position; // our addition - the position along the line\n\nconst float feather = 0.001;\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\nconst float u_dashSize = 0.01; // our addition\nconst float u_gapSize = 0.005; // our addition\n\nvoid main(void) {\n  float dist = length(v_normal) * v_thickness;\n\n  float t = smoothstep(\n    v_thickness - feather,\n    v_thickness,\n    dist\n  );\n\n  // our additions\n  float totalSize = u_dashSize + u_gapSize;\n  float positionInDashGap = mod(v_position, totalSize);\n  float dashGapRatio = positionInDashGap / u_dashSize;\n  // end additions (dashGapRatio is used below in if)\n\n  if (dashGapRatio < 1.0) {\n    gl_FragColor = mix(v_color, transparent, t);\n  } else {\n    discard;\n  }\n}\n";

package/cjs/features/graph/rendering/webgl/shaders/edge.dashed.vert.glsl.d.ts

@@ -0,0 +1 @@
+export declare const vertexShaderSource = "\nattribute float a_lineLength; // our addition\nattribute vec4 a_color;\nattribute vec2 a_normal;\nattribute vec2 a_position;\n\nuniform mat3 u_matrix;\nuniform float u_sqrtZoomRatio;\nuniform float u_correctionRatio;\n\nvarying vec4 v_color;\nvarying vec2 v_normal;\nvarying float v_thickness;\nvarying float v_position; // our addition\n\nconst float minThickness = 1.7;\nconst float bias = 255.0 / 254.0;\n\nvoid main() {\n  float normalLength = length(a_normal);\n  vec2 unitNormal = a_normal / normalLength;\n\n  // We require edges to be at least 'minThickness' pixels thick *on screen*\n  // (so we need to compensate the SQRT zoom ratio):\n  float pixelsThickness = max(normalLength, minThickness * u_sqrtZoomRatio);\n\n  // Then, we need to retrieve the normalized thickness of the edge in the WebGL\n  // referential (in a ([0, 1], [0, 1]) space), using our \"magic\" correction\n  // ratio:\n  float webGLThickness = pixelsThickness * u_correctionRatio;\n\n  // Finally, we adapt the edge thickness to the \"SQRT rule\" in sigma (so that\n  // items are not too big when zoomed in, and not too small when zoomed out).\n  // The exact computation should be 'adapted = value * zoom / sqrt(zoom)', but\n  // it's simpler like this:\n  float adaptedWebGLThickness = webGLThickness * u_sqrtZoomRatio;\n\n  // Here is the proper position of the vertex\n  gl_Position = vec4((u_matrix * vec3(a_position + unitNormal * adaptedWebGLThickness, 1)).xy, 0, 1);\n\n  // For the fragment shader though, we need a thickness that takes the \"magic\"\n  // correction ratio into account (as in webGLThickness), but so that the\n  // antialiasing effect does not depend on the zoom level. So here's yet\n  // another thickness version:\n  v_thickness = webGLThickness / u_sqrtZoomRatio;\n\n  v_normal = unitNormal;\n  v_color = a_color;\n  v_color.a *= bias;\n  v_position = a_lineLength / u_sqrtZoomRatio; // our addition\n}\n";

package/cjs/features/graph/rendering/webgl/shaders/edge.dashed.vert.glsl.js

@@ -0,0 +1,8 @@
+"use strict";
+/*
+ * This file copies sigma/src/rendering/webgl/shaders/edge.vert.glsl, but with a some changes
+ * difference: added v_position calculation based on a_lineLength and u_sqrtZoomRatio
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.vertexShaderSource = void 0;
+exports.vertexShaderSource = "\nattribute float a_lineLength; // our addition\nattribute vec4 a_color;\nattribute vec2 a_normal;\nattribute vec2 a_position;\n\nuniform mat3 u_matrix;\nuniform float u_sqrtZoomRatio;\nuniform float u_correctionRatio;\n\nvarying vec4 v_color;\nvarying vec2 v_normal;\nvarying float v_thickness;\nvarying float v_position; // our addition\n\nconst float minThickness = 1.7;\nconst float bias = 255.0 / 254.0;\n\nvoid main() {\n  float normalLength = length(a_normal);\n  vec2 unitNormal = a_normal / normalLength;\n\n  // We require edges to be at least 'minThickness' pixels thick *on screen*\n  // (so we need to compensate the SQRT zoom ratio):\n  float pixelsThickness = max(normalLength, minThickness * u_sqrtZoomRatio);\n\n  // Then, we need to retrieve the normalized thickness of the edge in the WebGL\n  // referential (in a ([0, 1], [0, 1]) space), using our \"magic\" correction\n  // ratio:\n  float webGLThickness = pixelsThickness * u_correctionRatio;\n\n  // Finally, we adapt the edge thickness to the \"SQRT rule\" in sigma (so that\n  // items are not too big when zoomed in, and not too small when zoomed out).\n  // The exact computation should be 'adapted = value * zoom / sqrt(zoom)', but\n  // it's simpler like this:\n  float adaptedWebGLThickness = webGLThickness * u_sqrtZoomRatio;\n\n  // Here is the proper position of the vertex\n  gl_Position = vec4((u_matrix * vec3(a_position + unitNormal * adaptedWebGLThickness, 1)).xy, 0, 1);\n\n  // For the fragment shader though, we need a thickness that takes the \"magic\"\n  // correction ratio into account (as in webGLThickness), but so that the\n  // antialiasing effect does not depend on the zoom level. So here's yet\n  // another thickness version:\n  v_thickness = webGLThickness / u_sqrtZoomRatio;\n\n  v_normal = unitNormal;\n  v_color = a_color;\n  v_color.a *= bias;\n  v_position = a_lineLength / u_sqrtZoomRatio; // our addition\n}\n";

package/cjs/features/graph/rendering/webgl/shaders/node.border.frag.glsl.d.ts

@@ -0,0 +1 @@
+export declare const fragmentShaderSource = "\nprecision mediump float;\n\nvarying vec4 v_color;           // base color of node\nvarying float v_border;\nvarying float v_borderRadius;   // inner border radius\nvarying float v_inactive;\n\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);  // transparent color\nconst float radius = 0.5;\n\n\n// convert color to pale gray\nvec4 toPaleGrayscale(in vec4 color, float paleFactor)\n{\n  vec4 white = vec4(1.0, 1.0, 1.0, 1.0);\n  vec4 paleColor = mix(color, white, paleFactor);\n\n  float average = (paleColor.r + paleColor.g + paleColor.b) / 3.0;\n  return vec4(average, average, average, 1.0);\n}\n\nvoid main(void) {\n    vec4 color;\n\n    // convert color to gray\n    if (v_inactive > 0.0) {\n        color = toPaleGrayscale(v_color, 0.5);\n    } else {\n        color = v_color;\n    }\n\n    float distToCenter = length(gl_PointCoord - vec2(0.5, 0.5)); // distance from current point to center of node\n\n    if (distToCenter < v_borderRadius - v_border)   // distance to inner border radius\n        gl_FragColor = transparent;\n    else if (distToCenter < v_borderRadius)\n        gl_FragColor = mix(color, transparent, (v_borderRadius - distToCenter) / v_border);\n    else if (distToCenter < radius - v_border)      // distance to outer border radius\n        gl_FragColor = color;\n    else if (distToCenter < radius)\n        gl_FragColor = mix(transparent, color, (radius - distToCenter) / v_border);\n    else                                            // points outside the button\n        gl_FragColor = transparent;\n}\n";

package/cjs/features/graph/rendering/webgl/shaders/node.border.frag.glsl.js

@@ -0,0 +1,9 @@
+"use strict";
+/*
+ * 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fragmentShaderSource = void 0;
+var utils_1 = require("./utils");
+exports.fragmentShaderSource = "\nprecision mediump float;\n\nvarying vec4 v_color;           // base color of node\nvarying float v_border;\nvarying float v_borderRadius;   // inner border radius\nvarying float v_inactive;\n\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);  // transparent color\nconst float radius = 0.5;\n\n".concat(utils_1.toPaleGrayscale, "\n\nvoid main(void) {\n    vec4 color;\n\n    // convert color to gray\n    if (v_inactive > 0.0) {\n        color = toPaleGrayscale(v_color, 0.5);\n    } else {\n        color = v_color;\n    }\n\n    float distToCenter = length(gl_PointCoord - vec2(0.5, 0.5)); // distance from current point to center of node\n\n    if (distToCenter < v_borderRadius - v_border)   // distance to inner border radius\n        gl_FragColor = transparent;\n    else if (distToCenter < v_borderRadius)\n        gl_FragColor = mix(color, transparent, (v_borderRadius - distToCenter) / v_border);\n    else if (distToCenter < radius - v_border)      // distance to outer border radius\n        gl_FragColor = color;\n    else if (distToCenter < radius)\n        gl_FragColor = mix(transparent, color, (radius - distToCenter) / v_border);\n    else                                            // points outside the button\n        gl_FragColor = transparent;\n}\n");

package/cjs/features/graph/rendering/webgl/shaders/node.border.vert.glsl.d.ts

@@ -0,0 +1 @@
+export declare const vertexShaderSource = "\nattribute vec2 a_position;\nattribute float a_size;\nattribute vec4 a_color;\nattribute float a_borderSize;\nattribute float a_inactive;\n\nuniform float u_ratio;\nuniform float u_scale;\nuniform mat3 u_matrix;\n\nvarying vec4 v_color;\nvarying float v_border;\nvarying float v_borderRadius;\nvarying float v_inactive;\n\nconst float bias = 255.0 / 254.0;\nconst float radius = 0.5;\n\nvoid main() {\n    gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);\n\n    // Multiply the point size twice:\n    //  - x SCALING_RATIO to correct the canvas scaling\n    //  - x 2 to correct the formulae\n    gl_PointSize = a_size * u_ratio * u_scale * 2.0;\n\n    v_border = (1.0 / u_ratio) * (0.5 / a_size);\n    v_borderRadius = radius - (radius * a_borderSize / a_size); // border radius in node's size (full size is 1)\n\n    // Extract the color:\n    v_color = a_color;\n    v_color.a *= bias;\n\n    // Pass inactive property\n    v_inactive = a_inactive;\n}";

package/cjs/features/graph/rendering/webgl/shaders/node.border.vert.glsl.js

@@ -0,0 +1,8 @@
+"use strict";
+/*
+ * 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.vertexShaderSource = void 0;
+exports.vertexShaderSource = "\nattribute vec2 a_position;\nattribute float a_size;\nattribute vec4 a_color;\nattribute float a_borderSize;\nattribute float a_inactive;\n\nuniform float u_ratio;\nuniform float u_scale;\nuniform mat3 u_matrix;\n\nvarying vec4 v_color;\nvarying float v_border;\nvarying float v_borderRadius;\nvarying float v_inactive;\n\nconst float bias = 255.0 / 254.0;\nconst float radius = 0.5;\n\nvoid main() {\n    gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);\n\n    // Multiply the point size twice:\n    //  - x SCALING_RATIO to correct the canvas scaling\n    //  - x 2 to correct the formulae\n    gl_PointSize = a_size * u_ratio * u_scale * 2.0;\n\n    v_border = (1.0 / u_ratio) * (0.5 / a_size);\n    v_borderRadius = radius - (radius * a_borderSize / a_size); // border radius in node's size (full size is 1)\n\n    // Extract the color:\n    v_color = a_color;\n    v_color.a *= bias;\n\n    // Pass inactive property\n    v_inactive = a_inactive;\n}";

package/cjs/features/graph/rendering/webgl/shaders/node.dashed.border.frag.glsl.d.ts

@@ -0,0 +1 @@
+export declare const fragmentShaderSource = "\nprecision mediump float;\n\nvarying vec4 v_color;           // base color of node\nvarying float v_border;\nvarying float v_borderRadius;   // inner border radius\nvarying float v_inactive;\n\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);  // transparent color\nconst float radius = 0.5;\nconst float dashGapRatio = 5.5;  // adjust this to change the ratio of dash size to gap size\nconst float totalLength = 2.0 * 3.14159 * radius;\nconst float dashSize = totalLength / (dashGapRatio + 1.0);\nconst float gapSize = dashSize / dashGapRatio;\n\n\n// convert color to pale gray\nvec4 toPaleGrayscale(in vec4 color, float paleFactor)\n{\n  vec4 white = vec4(1.0, 1.0, 1.0, 1.0);\n  vec4 paleColor = mix(color, white, paleFactor);\n\n  float average = (paleColor.r + paleColor.g + paleColor.b) / 3.0;\n  return vec4(average, average, average, 1.0);\n}\n\nvoid main(void) {\n    vec4 color;\n\n    // convert color to gray\n    if (v_inactive > 0.0) {\n        color = toPaleGrayscale(v_color, 0.5);\n    } else {\n        color = v_color;\n    }\n\n    float distToCenter = length(gl_PointCoord - vec2(0.5, 0.5)); // distance from current point to center of node\n    float distAlongBorder = atan(gl_PointCoord.y - 0.5, gl_PointCoord.x - 0.5); // distance along the border\n    float dashGapRatio = mod(distAlongBorder, dashSize + gapSize) / dashSize; // ratio of dash to gap\n\n    // our change - added if statement to check if within a dash\n    if (dashGapRatio < 1.0) {// if within a dash\n        if (distToCenter < v_borderRadius - v_border)   // distance to inner border radius\n            gl_FragColor = transparent;\n        else if (distToCenter < v_borderRadius)\n            gl_FragColor = mix(color, transparent, (v_borderRadius - distToCenter) / v_border);\n        else if (distToCenter < radius - v_border)      // distance to outer border radius\n            gl_FragColor = color;\n        else if (distToCenter < radius)\n            gl_FragColor = mix(transparent, color, (radius - distToCenter) / v_border);\n        else                                            // points outside the button\n            gl_FragColor = transparent;\n    } else {\n        gl_FragColor = transparent;\n    }\n}\n";

package/cjs/features/graph/rendering/webgl/shaders/node.dashed.border.frag.glsl.js

@@ -0,0 +1,8 @@
+"use strict";
+/*
+ * This file copies our node.border.frag.glsl.ts, but with changes to support dashed borders
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fragmentShaderSource = void 0;
+var utils_1 = require("./utils");
+exports.fragmentShaderSource = "\nprecision mediump float;\n\nvarying vec4 v_color;           // base color of node\nvarying float v_border;\nvarying float v_borderRadius;   // inner border radius\nvarying float v_inactive;\n\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);  // transparent color\nconst float radius = 0.5;\nconst float dashGapRatio = 5.5;  // adjust this to change the ratio of dash size to gap size\nconst float totalLength = 2.0 * 3.14159 * radius;\nconst float dashSize = totalLength / (dashGapRatio + 1.0);\nconst float gapSize = dashSize / dashGapRatio;\n\n".concat(utils_1.toPaleGrayscale, "\n\nvoid main(void) {\n    vec4 color;\n\n    // convert color to gray\n    if (v_inactive > 0.0) {\n        color = toPaleGrayscale(v_color, 0.5);\n    } else {\n        color = v_color;\n    }\n\n    float distToCenter = length(gl_PointCoord - vec2(0.5, 0.5)); // distance from current point to center of node\n    float distAlongBorder = atan(gl_PointCoord.y - 0.5, gl_PointCoord.x - 0.5); // distance along the border\n    float dashGapRatio = mod(distAlongBorder, dashSize + gapSize) / dashSize; // ratio of dash to gap\n\n    // our change - added if statement to check if within a dash\n    if (dashGapRatio < 1.0) {// if within a dash\n        if (distToCenter < v_borderRadius - v_border)   // distance to inner border radius\n            gl_FragColor = transparent;\n        else if (distToCenter < v_borderRadius)\n            gl_FragColor = mix(color, transparent, (v_borderRadius - distToCenter) / v_border);\n        else if (distToCenter < radius - v_border)      // distance to outer border radius\n            gl_FragColor = color;\n        else if (distToCenter < radius)\n            gl_FragColor = mix(transparent, color, (radius - distToCenter) / v_border);\n        else                                            // points outside the button\n            gl_FragColor = transparent;\n    } else {\n        gl_FragColor = transparent;\n    }\n}\n");

package/cjs/features/graph/rendering/webgl/shaders/node.image.frag.glsl.d.ts

@@ -0,0 +1 @@
+export declare const fragmentShaderSource = "\nprecision mediump float;\n\nvarying float v_border;\nvarying float v_inactive;\nvarying vec4 v_color;\nvarying vec4 v_texture;\n\nuniform sampler2D u_atlas;\n\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\nconst float radius = 0.5;\n\n\n// convert color to pale gray\nvec4 toPaleGrayscale(in vec4 color, float paleFactor)\n{\n  vec4 white = vec4(1.0, 1.0, 1.0, 1.0);\n  vec4 paleColor = mix(color, white, paleFactor);\n\n  float average = (paleColor.r + paleColor.g + paleColor.b) / 3.0;\n  return vec4(average, average, average, 1.0);\n}\n\nvoid main(void) {\n    vec4 color;\n\n    // set texel as color of point\n    if (v_texture.w > 0.0) {\n        vec4 texel = texture2D(u_atlas, v_texture.xy + gl_PointCoord * v_texture.zw, -1.0);\n        color = vec4(mix(v_color, texel, texel.a).rgb, max(texel.a, v_color.a));\n    } else {\n        color = v_color;\n    }\n\n    // convert color to gray\n    if (v_inactive > 0.0) {\n        color = toPaleGrayscale(color, 0.5);\n    }\n\n    // distance from point to center of node\n    float dist = length(gl_PointCoord - vec2(0.5, 0.5));\n\n    if (dist < radius - v_border)   // points inside node\n        gl_FragColor = color;\n    else if (dist < radius)         // border of node\n        gl_FragColor = mix(transparent, color, (radius - dist) / v_border);\n    else                            // points outside node\n        gl_FragColor = transparent;\n}";

package/cjs/features/graph/rendering/webgl/shaders/node.image.frag.glsl.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fragmentShaderSource = void 0;
+var utils_1 = require("./utils");
+exports.fragmentShaderSource = "\nprecision mediump float;\n\nvarying float v_border;\nvarying float v_inactive;\nvarying vec4 v_color;\nvarying vec4 v_texture;\n\nuniform sampler2D u_atlas;\n\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\nconst float radius = 0.5;\n\n".concat(utils_1.toPaleGrayscale, "\n\nvoid main(void) {\n    vec4 color;\n\n    // set texel as color of point\n    if (v_texture.w > 0.0) {\n        vec4 texel = texture2D(u_atlas, v_texture.xy + gl_PointCoord * v_texture.zw, -1.0);\n        color = vec4(mix(v_color, texel, texel.a).rgb, max(texel.a, v_color.a));\n    } else {\n        color = v_color;\n    }\n\n    // convert color to gray\n    if (v_inactive > 0.0) {\n        color = toPaleGrayscale(color, 0.5);\n    }\n\n    // distance from point to center of node\n    float dist = length(gl_PointCoord - vec2(0.5, 0.5));\n\n    if (dist < radius - v_border)   // points inside node\n        gl_FragColor = color;\n    else if (dist < radius)         // border of node\n        gl_FragColor = mix(transparent, color, (radius - dist) / v_border);\n    else                            // points outside node\n        gl_FragColor = transparent;\n}");

package/cjs/features/graph/rendering/webgl/shaders/node.image.vert.glsl.d.ts

@@ -0,0 +1 @@
+export declare const vertexShaderSource = "\nattribute vec2 a_position;\nattribute float a_size;\nattribute vec4 a_color;\nattribute vec4 a_texture;\nattribute float a_inactive;\n\nuniform float u_ratio;\nuniform float u_scale;\nuniform mat3 u_matrix;\n\nvarying float v_border;\nvarying float v_inactive;\nvarying vec4 v_color;\nvarying vec4 v_texture;\n\nconst float bias = 255.0 / 254.0;\n\nvoid main() {\n    gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);\n\n    // Multiply the point size twice:\n    //  - x SCALING_RATIO to correct the canvas scaling\n    //  - x 2 to correct the formulae\n    gl_PointSize = a_size * u_ratio * u_scale * 2.0;\n\n    v_border = (1.0 / u_ratio) * (0.5 / a_size);\n\n    // Extract the color:\n    v_color = a_color;\n    v_color.a *= bias;\n\n    // Pass the texture coordinates:\n    v_texture = a_texture;\n\n    // Pass inactive property\n    v_inactive = a_inactive;\n}";

package/cjs/features/graph/rendering/webgl/shaders/node.image.vert.glsl.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.vertexShaderSource = void 0;
+/*
+ * 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
+ */
+exports.vertexShaderSource = "\nattribute vec2 a_position;\nattribute float a_size;\nattribute vec4 a_color;\nattribute vec4 a_texture;\nattribute float a_inactive;\n\nuniform float u_ratio;\nuniform float u_scale;\nuniform mat3 u_matrix;\n\nvarying float v_border;\nvarying float v_inactive;\nvarying vec4 v_color;\nvarying vec4 v_texture;\n\nconst float bias = 255.0 / 254.0;\n\nvoid main() {\n    gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);\n\n    // Multiply the point size twice:\n    //  - x SCALING_RATIO to correct the canvas scaling\n    //  - x 2 to correct the formulae\n    gl_PointSize = a_size * u_ratio * u_scale * 2.0;\n\n    v_border = (1.0 / u_ratio) * (0.5 / a_size);\n\n    // Extract the color:\n    v_color = a_color;\n    v_color.a *= bias;\n\n    // Pass the texture coordinates:\n    v_texture = a_texture;\n\n    // Pass inactive property\n    v_inactive = a_inactive;\n}";

package/cjs/features/graph/rendering/webgl/shaders/utils.d.ts

@@ -0,0 +1 @@
+export declare const toPaleGrayscale = "\n// convert color to pale gray\nvec4 toPaleGrayscale(in vec4 color, float paleFactor)\n{\n  vec4 white = vec4(1.0, 1.0, 1.0, 1.0);\n  vec4 paleColor = mix(color, white, paleFactor);\n\n  float average = (paleColor.r + paleColor.g + paleColor.b) / 3.0;\n  return vec4(average, average, average, 1.0);\n}";

package/cjs/features/graph/rendering/webgl/shaders/utils.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toPaleGrayscale = void 0;
+exports.toPaleGrayscale = "\n// convert color to pale gray\nvec4 toPaleGrayscale(in vec4 color, float paleFactor)\n{\n  vec4 white = vec4(1.0, 1.0, 1.0, 1.0);\n  vec4 paleColor = mix(color, white, paleFactor);\n\n  float average = (paleColor.r + paleColor.g + paleColor.b) / 3.0;\n  return vec4(average, average, average, 1.0);\n}";

package/cjs/features/graph/types/graphDataTypes.d.ts

@@ -0,0 +1,51 @@
+import Graph from 'graphology';
+import { NodeDisplayData, EdgeDisplayData } from 'sigma/types';
+import { Settings } from 'sigma/settings';
+export type GraphEdgeAttributes = EdgeDisplayData & {
+    loop: boolean;
+    arrowSizeRatio?: number;
+    selected?: boolean;
+    labelColor?: string;
+};
+export type GraphNodeAttributes = NodeDisplayData & {
+    secondaryLabel?: string;
+    image?: string;
+    hasBorder?: boolean;
+    selected?: boolean;
+    inactive?: boolean;
+    labelColor?: string;
+    secondaryLabelColor?: string;
+};
+export declare enum DataModelGraphNodeType {
+    entityType = "entityType",
+    interactionType = "interactionType"
+}
+export type DataModelGraphEdgeAttributes = GraphEdgeAttributes & {
+    edgeType: string;
+};
+export type DataModelGraphNodeAttributes = GraphNodeAttributes & {
+    nodeType: DataModelGraphNodeType;
+};
+export type GraphContainerSettings = Partial<Settings & {
+    secondaryLabelColor: {
+        attribute?: string;
+        color?: 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;
+}
+export {};

package/cjs/features/graph/types/graphDataTypes.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataModelGraphNodeType = void 0;
+var DataModelGraphNodeType;
+(function (DataModelGraphNodeType) {
+    DataModelGraphNodeType["entityType"] = "entityType";
+    DataModelGraphNodeType["interactionType"] = "interactionType";
+})(DataModelGraphNodeType || (exports.DataModelGraphNodeType = DataModelGraphNodeType = {}));

package/cjs/features/graph/types/sigmaCustomRenderersTypes.d.ts

@@ -0,0 +1,11 @@
+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>;
+export {};

package/cjs/features/graph/types/sigmaCustomRenderersTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/icons/EmptyLoading.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SvgEmptyLoading: React.FC<React.SVGProps<SVGSVGElement>>;
+export default SvgEmptyLoading;

package/cjs/icons/EmptyLoading.js

@@ -0,0 +1,150 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var SvgEmptyLoading = function (props) {
+    return (react_1.default.createElement("svg", __assign({ width: 256, height: 256, viewBox: "0 0 256 256", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        react_1.default.createElement("circle", { cx: 128, cy: 128, r: 128, fill: "#0072CE", fillOpacity: 0.03 }),
+        react_1.default.createElement("mask", { id: "EmptyLoading_svg__a", style: {
+                maskType: 'alpha'
+            }, maskUnits: "userSpaceOnUse", x: 0, y: 0, width: 256, height: 256 },
+            react_1.default.createElement("circle", { cx: 128, cy: 128, r: 128, fill: "#fff" })),
+        react_1.default.createElement("g", { mask: "url(#EmptyLoading_svg__a)" },
+            react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M-16 9h256v247H-16V9z", fill: "url(#EmptyLoading_svg__paint0_linear_2978_41880)" }),
+            react_1.default.createElement("g", { fillRule: "evenodd", clipRule: "evenodd" },
+                react_1.default.createElement("path", { d: "M40.755 44.17C40.755 38.002 45.76 33 51.92 33h251.675c6.167 0 11.166 5.001 11.166 11.17v160.596H40.755V44.171z", fill: "#5E7282" }),
+                react_1.default.createElement("path", { d: "M50.371 43.106h255.685V195.71H50.371V43.106z", fill: "url(#EmptyLoading_svg__paint1_linear_2978_41880)" }),
+                react_1.default.createElement("path", { d: "M15.545 208.914c2.321.469 4.723.716 7.183.716H338.75c.22 0 .439-.002.658-.006-7.061 8.445-17.67 13.816-29.524 13.816H45.655c-12.111 0-22.916-5.597-29.968-14.349l-.142-.177z", fill: "#BDCBD8" }),
+                react_1.default.createElement("path", { d: "M339.015 204.883v4.966H15v-4.966h324.015z", fill: "#D4DCDF" }),
+                react_1.default.createElement("path", { d: "M201.107 213.991h-45.221a11.176 11.176 0 01-11.046-9.449h67.314a11.172 11.172 0 01-11.047 9.449z", fill: "url(#EmptyLoading_svg__paint2_linear_2978_41880)" })),
+            react_1.default.createElement("g", { filter: "url(#EmptyLoading_svg__filter0_d_2978_41880)" },
+                react_1.default.createElement("rect", { x: 81.703, y: 99, width: 170, height: 26, rx: 8, fill: "#D1E6FF" }),
+                react_1.default.createElement("rect", { x: 84.703, y: 102, width: 164, height: 20, rx: 5, stroke: "#fff", strokeWidth: 6 })),
+            react_1.default.createElement("g", { filter: "url(#EmptyLoading_svg__filter1_d_2978_41880)" },
+                react_1.default.createElement("mask", { id: "EmptyLoading_svg__b", fill: "#fff" },
+                    react_1.default.createElement("rect", { x: 81, y: 105, width: 108, height: 14, rx: 2 })),
+                react_1.default.createElement("rect", { x: 81, y: 105, width: 108, height: 14, rx: 2, fill: "#61A3F1" }),
+                react_1.default.createElement("rect", { x: 81, y: 105, width: 108, height: 14, rx: 2, stroke: "#4A90E2", strokeWidth: 8, mask: "url(#EmptyLoading_svg__b)" })),
+            react_1.default.createElement("path", { opacity: 0.8, fillRule: "evenodd", clipRule: "evenodd", d: "M122.703 74a3 3 0 013-3h81.625a3 3 0 010 6h-81.625a3 3 0 01-3-3z", fill: "#B6C7DB" }),
+            react_1.default.createElement("path", { opacity: 0.2, fillRule: "evenodd", clipRule: "evenodd", d: "M146.703 86a3 3 0 013-3h34a3 3 0 110 6h-34a3 3 0 01-3-3zM136.703 139a3 3 0 013-3h54a3 3 0 110 6h-54a3 3 0 01-3-3z", fill: "#979797" }),
+            react_1.default.createElement("path", { opacity: 0.1, fillRule: "evenodd", clipRule: "evenodd", d: "M112.703 151a3 3 0 013-3h103a3 3 0 110 6h-103a3 3 0 01-3-3zM124.703 163a3 3 0 013-3h79a3 3 0 110 6h-79a3 3 0 01-3-3z", fill: "#979797" }),
+            react_1.default.createElement("g", { filter: "url(#EmptyLoading_svg__filter2_ddd_2978_41880)" },
+                react_1.default.createElement("path", { fill: "#A0C1D7", d: "M70.703 64h11v8h-11z" }),
+                react_1.default.createElement("rect", { x: 62, y: 59, width: 28, height: 8, rx: 1, fill: "#BDD4E3" }),
+                react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M38.23 160.5c20.704 20.703 54.27 20.703 74.973 0 20.703-20.703 20.703-54.27 0-74.973-20.703-20.703-54.27-20.703-74.973 0-20.703 20.703-20.703 54.27 0 74.973z", fill: "#BDD4E3" }),
+                react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M113.427 85.988c20.463 20.652 20.404 53.981-.175 74.561-20.432 20.431-53.432 20.635-74.115.613l-.446-.439 74.736-74.735z", fill: "#A0C1D7" }),
+                react_1.default.createElement("path", { opacity: 0.144, fillRule: "evenodd", clipRule: "evenodd", d: "M75.037 175.385c29.402 0 53.236-23.834 53.236-53.236a54.67 54.67 0 00-.106-3.399L100.45 91.037l-55.142 58.396 25.814 25.811c1.293.094 2.598.141 3.915.141z", fill: "url(#EmptyLoading_svg__paint3_linear_2978_41880)" }),
+                react_1.default.createElement("circle", { cx: 75.94, cy: 123.237, r: 44.723, fill: "#91B0C2" }),
+                react_1.default.createElement("g", { filter: "url(#EmptyLoading_svg__filter3_d_2978_41880)" },
+                    react_1.default.createElement("circle", { r: 42.793, transform: "matrix(-1 0 0 1 75.94 123.237)", fill: "#F7F4FF" })),
+                react_1.default.createElement("path", { opacity: 0.05, fillRule: "evenodd", clipRule: "evenodd", d: "M105.043 175.309l-10.298.861-20.313-20.152.863-2.292-9.973-9.982 18.679-6.882h-4.308l-8.943-8.951 4.545-10.532L94.35 90.74l37.888 37.162c-.343 20.088-11.146 37.627-27.195 47.407z", fill: "url(#EmptyLoading_svg__paint4_linear_2978_41880)" }),
+                react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M67.703 123a8 8 0 0112.362-6.707l14.477-25.145A36.828 36.828 0 0075.703 86c-20.434 0-37 16.565-37 37h29z", fill: "url(#EmptyLoading_svg__paint5_angular_2978_41880)" }),
+                react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M94.297 90.6l.24.138s-12.45 35.125-12.811 35.752a6.92 6.92 0 01-11.985-6.92c.361-.626 24.556-28.97 24.556-28.97z", fill: "#323232" }),
+                react_1.default.createElement("circle", { cx: 75.94, cy: 123.237, r: 2.896, fill: "#EEEBF6" }),
+                react_1.default.createElement("circle", { cx: 96.211, cy: 148.655, r: 2.574, fill: "#A0C3D7" }),
+                react_1.default.createElement("circle", { cx: 107.15, cy: 131.924, r: 2.574, fill: "#A0C3D7" }),
+                react_1.default.createElement("rect", { x: 62.427, y: 135.592, width: 27.027, height: 10.039, rx: 3, fill: "#A0C3D7" }),
+                react_1.default.createElement("path", { opacity: 0.05, fillRule: "evenodd", clipRule: "evenodd", d: "M85.914 170.534H75.112l-21.605-21.472 2.126-2.775v-1.01L42.8 132.523l2.853-2.529 40.261 40.54z", fill: "url(#EmptyLoading_svg__paint6_linear_2978_41880)" }),
+                react_1.default.createElement("path", { opacity: 0.02, fillRule: "evenodd", clipRule: "evenodd", d: "M96.362 136.555h-4.988l-38.126-38.01 2.853-2.53 40.261 40.54z", fill: "url(#EmptyLoading_svg__paint7_linear_2978_41880)" }),
+                react_1.default.createElement("path", { opacity: 0.02, fillRule: "evenodd", clipRule: "evenodd", d: "M116.746 129.006h-4.988L73.632 90.995l2.853-2.53 40.261 40.541z", fill: "url(#EmptyLoading_svg__paint8_linear_2978_41880)" }),
+                react_1.default.createElement("path", { opacity: 0.02, fillRule: "evenodd", clipRule: "evenodd", d: "M85.793 152.41h-4.988l-38.126-38.011 2.852-2.53 40.262 40.541z", fill: "url(#EmptyLoading_svg__paint9_linear_2978_41880)" }),
+                react_1.default.createElement("circle", { cx: 75.618, cy: 155.734, r: 2.574, fill: "#A0C3D7" }),
+                react_1.default.createElement("circle", { cx: 55.026, cy: 148.655, r: 2.574, fill: "#A0C3D7" }),
+                react_1.default.createElement("circle", { cx: 44.73, cy: 131.924, r: 2.574, fill: "#A0C3D7" }),
+                react_1.default.createElement("g", { fill: "#A0C3D7" },
+                    react_1.default.createElement("circle", { r: 2.574, transform: "matrix(1 0 0 -1 96.21 97.363)" }),
+                    react_1.default.createElement("circle", { r: 2.574, transform: "matrix(1 0 0 -1 107.149 114.094)" }),
+                    react_1.default.createElement("circle", { r: 2.574, transform: "matrix(1 0 0 -1 75.618 90.284)" }),
+                    react_1.default.createElement("circle", { r: 2.574, transform: "matrix(1 0 0 -1 55.026 97.363)" }),
+                    react_1.default.createElement("circle", { r: 2.574, transform: "matrix(1 0 0 -1 44.73 114.094)" })))),
+        react_1.default.createElement("defs", null,
+            react_1.default.createElement("linearGradient", { id: "EmptyLoading_svg__paint0_linear_2978_41880", x1: -16, y1: 9, x2: -16, y2: 256, gradientUnits: "userSpaceOnUse" },
+                react_1.default.createElement("stop", { stopColor: "#FAFAFA", stopOpacity: 0.01 }),
+                react_1.default.createElement("stop", { offset: 1, stopColor: "#F4F4F4" })),
+            react_1.default.createElement("linearGradient", { id: "EmptyLoading_svg__paint1_linear_2978_41880", x1: 178.214, y1: 43.106, x2: 178.214, y2: 195.709, gradientUnits: "userSpaceOnUse" },
+                react_1.default.createElement("stop", { stopColor: "#F2F9FB" }),
+                react_1.default.createElement("stop", { offset: 1, stopColor: "#fff" })),
+            react_1.default.createElement("linearGradient", { id: "EmptyLoading_svg__paint2_linear_2978_41880", x1: 178.497, y1: 204.542, x2: 178.497, y2: 213.991, gradientUnits: "userSpaceOnUse" },
+                react_1.default.createElement("stop", { stopColor: "#90AABF" }),
+                react_1.default.createElement("stop", { offset: 1, stopColor: "#869DAE" })),
+            react_1.default.createElement("linearGradient", { id: "EmptyLoading_svg__paint3_linear_2978_41880", x1: 154.275, y1: 146.574, x2: 96.683, y2: 91.352, gradientUnits: "userSpaceOnUse" },
+                react_1.default.createElement("stop", { stopOpacity: 0.01 }),
+                react_1.default.createElement("stop", { offset: 1 })),
+            react_1.default.createElement("linearGradient", { id: "EmptyLoading_svg__paint4_linear_2978_41880", x1: 60.762, y1: 143.327, x2: 114.747, y2: 176.019, gradientUnits: "userSpaceOnUse" },
+                react_1.default.createElement("stop", { stopOpacity: 0.87 }),
+                react_1.default.createElement("stop", { offset: 1, stopOpacity: 0.01 })),
+            react_1.default.createElement("linearGradient", { id: "EmptyLoading_svg__paint6_linear_2978_41880", x1: 90.287, y1: 154.267, x2: 68.53, y2: 131.301, gradientUnits: "userSpaceOnUse" },
+                react_1.default.createElement("stop", { stopOpacity: 0.01 }),
+                react_1.default.createElement("stop", { offset: 1 })),
+            react_1.default.createElement("linearGradient", { id: "EmptyLoading_svg__paint7_linear_2978_41880", x1: 100.735, y1: 120.288, x2: 78.978, y2: 97.322, gradientUnits: "userSpaceOnUse" },
+                react_1.default.createElement("stop", { stopOpacity: 0.01 }),
+                react_1.default.createElement("stop", { offset: 1 })),
+            react_1.default.createElement("linearGradient", { id: "EmptyLoading_svg__paint8_linear_2978_41880", x1: 121.119, y1: 112.739, x2: 99.362, y2: 89.773, gradientUnits: "userSpaceOnUse" },
+                react_1.default.createElement("stop", { stopOpacity: 0.01 }),
+                react_1.default.createElement("stop", { offset: 1 })),
+            react_1.default.createElement("linearGradient", { id: "EmptyLoading_svg__paint9_linear_2978_41880", x1: 90.166, y1: 136.143, x2: 68.409, y2: 113.177, gradientUnits: "userSpaceOnUse" },
+                react_1.default.createElement("stop", { stopOpacity: 0.01 }),
+                react_1.default.createElement("stop", { offset: 1 })),
+            react_1.default.createElement("filter", { id: "EmptyLoading_svg__filter0_d_2978_41880", x: 77.703, y: 96, width: 178, height: 34, filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+                react_1.default.createElement("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }),
+                react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+                react_1.default.createElement("feOffset", { dy: 1 }),
+                react_1.default.createElement("feGaussianBlur", { stdDeviation: 2 }),
+                react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" }),
+                react_1.default.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_2978_41880" }),
+                react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_2978_41880", result: "shape" })),
+            react_1.default.createElement("filter", { id: "EmptyLoading_svg__filter1_d_2978_41880", x: 77, y: 102, width: 116, height: 22, filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+                react_1.default.createElement("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }),
+                react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+                react_1.default.createElement("feOffset", { dy: 1 }),
+                react_1.default.createElement("feGaussianBlur", { stdDeviation: 2 }),
+                react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" }),
+                react_1.default.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_2978_41880" }),
+                react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_2978_41880", result: "shape" })),
+            react_1.default.createElement("filter", { id: "EmptyLoading_svg__filter2_ddd_2978_41880", x: -13.297, y: 28, width: 181.534, height: 189.17, filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+                react_1.default.createElement("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }),
+                react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+                react_1.default.createElement("feMorphology", { radius: 4, operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_2978_41880" }),
+                react_1.default.createElement("feOffset", { dy: 7 }),
+                react_1.default.createElement("feGaussianBlur", { stdDeviation: 4 }),
+                react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.600156 0 0 0 0 0.745337 0 0 0 0 0.8625 0 0 0 0.1 0" }),
+                react_1.default.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_2978_41880" }),
+                react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+                react_1.default.createElement("feMorphology", { radius: 4, operator: "dilate", in: "SourceAlpha", result: "effect2_dropShadow_2978_41880" }),
+                react_1.default.createElement("feOffset", { dy: 5 }),
+                react_1.default.createElement("feGaussianBlur", { stdDeviation: 16 }),
+                react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0.447059 0 0 0 0 0.807843 0 0 0 0.06 0" }),
+                react_1.default.createElement("feBlend", { mode: "normal", in2: "effect1_dropShadow_2978_41880", result: "effect2_dropShadow_2978_41880" }),
+                react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+                react_1.default.createElement("feMorphology", { radius: 2, operator: "dilate", in: "SourceAlpha", result: "effect3_dropShadow_2978_41880" }),
+                react_1.default.createElement("feOffset", { dy: 12 }),
+                react_1.default.createElement("feGaussianBlur", { stdDeviation: 8.5 }),
+                react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0.447059 0 0 0 0 0.807843 0 0 0 0.06 0" }),
+                react_1.default.createElement("feBlend", { mode: "normal", in2: "effect2_dropShadow_2978_41880", result: "effect3_dropShadow_2978_41880" }),
+                react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect3_dropShadow_2978_41880", result: "shape" })),
+            react_1.default.createElement("filter", { id: "EmptyLoading_svg__filter3_d_2978_41880", x: 29.148, y: 78.444, width: 93.585, height: 93.585, filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+                react_1.default.createElement("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }),
+                react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+                react_1.default.createElement("feOffset", { dy: 2 }),
+                react_1.default.createElement("feGaussianBlur", { stdDeviation: 2 }),
+                react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" }),
+                react_1.default.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_2978_41880" }),
+                react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_2978_41880", result: "shape" })),
+            react_1.default.createElement("radialGradient", { id: "EmptyLoading_svg__paint5_angular_2978_41880", cx: 0, cy: 0, r: 1, gradientUnits: "userSpaceOnUse", gradientTransform: "rotate(-56.035 152.55 -12.515) scale(43.4058 65.5062)" },
+                react_1.default.createElement("stop", { stopColor: "#CFE8FF" }),
+                react_1.default.createElement("stop", { offset: 0.599, stopColor: "#D1F2F9", stopOpacity: 0 })))));
+};
+exports.default = SvgEmptyLoading;

package/cjs/icons/index.d.ts

@@ -16,6 +16,7 @@ export { default as Details } from './Details';
 export { default as Download } from './Download';
 export { default as Draw } from './Draw';
 export { default as Duplicate } from './Duplicate';
+export { default as EmptyLoading } from './EmptyLoading';
 export { default as EmptySearchResults } from './EmptySearchResults';
 export { default as Error } from './Error';
 export { default as Filter } from './Filter';

package/cjs/icons/index.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReferenceAttribute = exports.Recommended = exports.Reassign = exports.ReadOnlyError = exports.Radius = exports.Profile = exports.PotentialMatch = exports.Polygon = exports.PmTaskIcon = exports.PmIcon = exports.PivotingIcon = exports.PinOutlined = exports.Pin = exports.NotMatchRule = exports.NotMatchDark = exports.NoMatches = exports.NoDataSearch = exports.NoData = exports.NestedAttribute = exports.NegativeRuleTooltipIcon = exports.NegativeRuleIcon = exports.MlMatch = exports.MergeDark = exports.Merge = exports.LogOut = exports.LogIn = exports.IgnoredOutlined = exports.Ignored = exports.Hyperlink = exports.Filter = exports.Error = exports.EmptySearchResults = exports.Duplicate = exports.Draw = exports.Download = exports.Details = exports.Description = exports.DeleteRequestTaskIcon = exports.DefaultTaskIcon = exports.DefaultImage = exports.DcrTaskIcon = exports.Create = exports.Copy = exports.CommentBubble = exports.Comment = exports.CollaborationIcon = exports.Calendar = exports.AttributesList = exports.AddComment = exports.Add = void 0;
-exports.UploadIcon = exports.UnMerge = exports.Tenant = exports.Table = exports.SimpleAttribute = exports.SelectAttributes = exports.Search = exports.ResizeIconInline = exports.Remove = void 0;
+exports.Recommended = exports.Reassign = exports.ReadOnlyError = exports.Radius = exports.Profile = exports.PotentialMatch = exports.Polygon = exports.PmTaskIcon = exports.PmIcon = exports.PivotingIcon = exports.PinOutlined = exports.Pin = exports.NotMatchRule = exports.NotMatchDark = exports.NoMatches = exports.NoDataSearch = exports.NoData = exports.NestedAttribute = exports.NegativeRuleTooltipIcon = exports.NegativeRuleIcon = exports.MlMatch = exports.MergeDark = exports.Merge = exports.LogOut = exports.LogIn = exports.IgnoredOutlined = exports.Ignored = exports.Hyperlink = exports.Filter = exports.Error = exports.EmptySearchResults = exports.EmptyLoading = exports.Duplicate = exports.Draw = exports.Download = exports.Details = exports.Description = exports.DeleteRequestTaskIcon = exports.DefaultTaskIcon = exports.DefaultImage = exports.DcrTaskIcon = exports.Create = exports.Copy = exports.CommentBubble = exports.Comment = exports.CollaborationIcon = exports.Calendar = exports.AttributesList = exports.AddComment = exports.Add = void 0;
+exports.UploadIcon = exports.UnMerge = exports.Tenant = exports.Table = exports.SimpleAttribute = exports.SelectAttributes = exports.Search = exports.ResizeIconInline = exports.Remove = exports.ReferenceAttribute = void 0;
 var Add_1 = require("./Add");
 Object.defineProperty(exports, "Add", { enumerable: true, get: function () { return __importDefault(Add_1).default; } });
 var AddComment_1 = require("./AddComment");
@@ -41,6 +41,8 @@ var Draw_1 = require("./Draw");
 Object.defineProperty(exports, "Draw", { enumerable: true, get: function () { return __importDefault(Draw_1).default; } });
 var Duplicate_1 = require("./Duplicate");
 Object.defineProperty(exports, "Duplicate", { enumerable: true, get: function () { return __importDefault(Duplicate_1).default; } });
+var EmptyLoading_1 = require("./EmptyLoading");
+Object.defineProperty(exports, "EmptyLoading", { enumerable: true, get: function () { return __importDefault(EmptyLoading_1).default; } });
 var EmptySearchResults_1 = require("./EmptySearchResults");
 Object.defineProperty(exports, "EmptySearchResults", { enumerable: true, get: function () { return __importDefault(EmptySearchResults_1).default; } });
 var Error_1 = require("./Error");

package/cjs/index.d.ts

@@ -131,3 +131,4 @@ export { ActivityLog, ActivityLogFilter, useActivitiesLoader, useProfileActiviti
 export type { ActivitiesFilter, ActivityData } from './features/activity-log';
 export { groupCrosswalksByTypesAndSources, useCrosswalkActions, useModifiedEntity, CrosswalkEditor, SourceCrosswalksRow, CrosswalkDragLayer, AttributesTable, CrosswalkType } from './features/crosswalks';
 export type { CrosswalksByTypes, AddCrosswalkEvent, EditCrosswalkEvent, DeleteCrosswalkEvent } from './features/crosswalks';
+export * from './features/graph';

package/cjs/index.js

@@ -298,3 +298,5 @@ Object.defineProperty(exports, "SourceCrosswalksRow", { enumerable: true, get: f
 Object.defineProperty(exports, "CrosswalkDragLayer", { enumerable: true, get: function () { return crosswalks_1.CrosswalkDragLayer; } });
 Object.defineProperty(exports, "AttributesTable", { enumerable: true, get: function () { return crosswalks_1.AttributesTable; } });
 Object.defineProperty(exports, "CrosswalkType", { enumerable: true, get: function () { return crosswalks_1.CrosswalkType; } });
+// features / graph
+__exportStar(require("./features/graph"), exports);