@linkurious/ogma-linkurious-parser 4.0.24 → 4.0.25

package/README.md

@@ -1,11 +1,11 @@
-# Ogma-Linkurious-Parser 
+# Ogma-Linkurious-Parser
 
 ## Description
 Ogma-Linkurious-Parser is an official library maintained by the Linkurious team that allows you to quickly parse and load a Linkurious Enterprise visualization in Ogma with one line of code and apply different Linkurious Enterprise styles, filters, captions and more.
 
 ### Prerequisites
 - Linkurious Enterprise 2.10.x or above
-- An existing visualization to export 
+- An existing visualization to export
 - An Ogma license
 
 # Installation
@@ -22,8 +22,7 @@ In order to create an Ogma visualization with your Linkurious styles:
 
 3. If you need to reproduce the same caption styles, get graph schema using [Linkurious Enterprise REST API](https://doc.linkurious.com/server-sdk/latest/apidoc/#api-Schema-getTypes).
 
-4. Initialize `LKOgma` and call `initVisualization` with the configuration and the visualization data from the previous steps.
-
+4. Initialize `LKOgma` and call `initVisualization` with the configuration and the visualization data from the previous steps. You can also pass a base url as second parameter in case you are using relative paths in your image style urls.
 
 A full working example using the [Linkurious Enterprise REST API](https://github.com/Linkurious/linkurious-rest-client/) library:
 
@@ -32,7 +31,7 @@ const {RestClient} = require('@linkurious/rest-client');
 const {LKOgma} = require('@linkurious/ogma-linkurious-parser');
 
 async function main() {
-  
+
   // Initialize the rest client
   const rc = new RestClient({baseUrl: 'http://localhost:3000'});
   // Log in
@@ -44,38 +43,43 @@ async function main() {
   const linkuriousConfigurationResponse = await rc.config.getConfiguration();
   // Get the visualisation configuration response
   const visualizationResponse = await rc
-      .visualization.getVisualization({
-          sourceKey: 'e7900d9b',
-          id: 3
-      });
+    .visualization.getVisualization({
+      sourceKey: 'e7900d9b',
+      id: 3
+    });
   const nodeTypesResponse = await this.rc.graphSchema.getTypesWithAccess({
     entityType: 'node'
   });
   const edgeTypesResponse = await this.rc.graphSchema.getTypesWithAccess({
     entityType: 'edge'
   });
-  
-  if (linkuriousConfigurationResponse.isSuccess() && visualizationResponse.isSuccess() && nodeTypesResponse.isSuccess() && edgeTypesResponse.isSuccess) {
-      const ogmaConfiguration = linkuriousConfigurationResponse.body.ogma;
-      const graphSchema = {
-        node: nodeTypesResponse.body.node.results,
-        edge: edgeTypesResponse.body.edge.results
-      }
-      const visualizationConfiguration = visualizationResponse.body;
-       // Initialize ogma object
-       const ogma = new LKOgma({
-          ...ogmaConfiguration,
-          options: {
-            ...ogmaConfiguration.options,
-            backgroundColor: 'rgba(240, 240, 240)'
-          }
-      });
-      // Set HTML container where Ogma will be rendered
-      ogma.setContainer('graph-container');
-      // Set graphSchema that will be used in defining caption styles
-      ogma.LKCaptions.graphSchema = graphSchema;
-      // Initialize the visualization content & styles
-      await ogma.initVisualization(visualizationConfiguration);
+
+  if (linkuriousConfigurationResponse.isSuccess() && visualizationResponse.isSuccess() && nodeTypesResponse.isSuccess() && edgeTypesResponse.isSuccess()) {
+    const ogmaConfiguration = linkuriousConfigurationResponse.body.ogma;
+    const lkeServerBaseUrl = linkuriousConfigurationResponse.body.url;
+    const graphSchema = {
+      node: nodeTypesResponse.body.node.results,
+      edge: edgeTypesResponse.body.edge.results
+    }
+    const visualizationConfiguration = visualizationResponse.body;
+    // Initialize ogma object
+    const ogma = new LKOgma(
+      {
+        ...ogmaConfiguration,
+        options: {
+          ...ogmaConfiguration.options,
+          backgroundColor: 'rgba(240, 240, 240)'
+        }
+      },
+      // the base url is an optional parameter
+      lkeServerBaseUrl
+    );
+    // Set HTML container where Ogma will be rendered
+    ogma.setContainer('graph-container');
+    // Set graphSchema that will be used in defining caption styles
+    ogma.LKCaptions.graphSchema = graphSchema;
+    // Initialize the visualization content & styles
+    await ogma.initVisualization(visualizationConfiguration);
   }
 }
 
@@ -87,8 +91,8 @@ main();
 -->
 
 You can use any other Ogma feature you would like to apply to the visualization.
-  
+
 > To learn more about Ogma check our [official documentation](https://doc.linkurious.com/ogma/latest/).
-  
+
 ## Licensing
 The Ogma-Linkurious-parser is licensed under the Apache License, Version 2.0. See [LICENSE](/LICENSE) for the full license text.

package/dist/index.d.ts

@@ -16,3 +16,4 @@ export { OgmaStore } from './ogma/features/OgmaStore';
 export { getSelectionSize, getSelectionState, getSelectionEntity, getUniqSelection, getUniqSelectionTypes, getUniqSelectionEntity, getSelectionProperties, hasSelectionProperties } from './ogma/features/selectors';
 export { LKOgma, ANIMATION_DURATION } from './ogma';
 export { Tools } from './tools/tools';
+export { LKE_NODE_GROUPING_EDGE } from './ogma/features/nodeGrouping';

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tools = exports.ANIMATION_DURATION = exports.LKOgma = exports.hasSelectionProperties = exports.getSelectionProperties = exports.getUniqSelectionEntity = exports.getUniqSelectionTypes = exports.getUniqSelection = exports.getSelectionEntity = exports.getSelectionState = exports.getSelectionSize = exports.OgmaStore = exports.Filters = exports.HTML_COLORS = exports.OgmaTools = exports.CaptionsViz = exports.TransformationsViz = exports.FILTER_OPACITY = exports.StylesViz = exports.StyleType = exports.StyleRules = exports.StyleRuleType = exports.StyleRule = exports.NodeAttributes = exports.EdgeAttributes = exports.PALETTE = exports.BASE_GREY = exports.ItemAttributes = exports.Captions = exports.NodeList = exports.Node = exports.EdgeList = exports.Edge = void 0;
+exports.LKE_NODE_GROUPING_EDGE = exports.Tools = exports.ANIMATION_DURATION = exports.LKOgma = exports.hasSelectionProperties = exports.getSelectionProperties = exports.getUniqSelectionEntity = exports.getUniqSelectionTypes = exports.getUniqSelection = exports.getSelectionEntity = exports.getSelectionState = exports.getSelectionSize = exports.OgmaStore = exports.Filters = exports.HTML_COLORS = exports.OgmaTools = exports.CaptionsViz = exports.TransformationsViz = exports.FILTER_OPACITY = exports.StylesViz = exports.StyleType = exports.StyleRules = exports.StyleRuleType = exports.StyleRule = exports.NodeAttributes = exports.EdgeAttributes = exports.PALETTE = exports.BASE_GREY = exports.ItemAttributes = exports.Captions = exports.NodeList = exports.Node = exports.EdgeList = exports.Edge = void 0;
 var ogma_1 = require("@linkurious/ogma");
 Object.defineProperty(exports, "Edge", { enumerable: true, get: function () { return ogma_1.Edge; } });
 Object.defineProperty(exports, "EdgeList", { enumerable: true, get: function () { return ogma_1.EdgeList; } });
@@ -51,4 +51,6 @@ Object.defineProperty(exports, "LKOgma", { enumerable: true, get: function () {
 Object.defineProperty(exports, "ANIMATION_DURATION", { enumerable: true, get: function () { return ogma_2.ANIMATION_DURATION; } });
 var tools_1 = require("./tools/tools");
 Object.defineProperty(exports, "Tools", { enumerable: true, get: function () { return tools_1.Tools; } });
+var nodeGrouping_1 = require("./ogma/features/nodeGrouping");
+Object.defineProperty(exports, "LKE_NODE_GROUPING_EDGE", { enumerable: true, get: function () { return nodeGrouping_1.LKE_NODE_GROUPING_EDGE; } });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAEb,yCAsB0B;AArBxB,4FAAA,IAAI,OAAA;AACJ,gGAAA,QAAQ,OAAA;AACR,4FAAA,IAAI,OAAA;AACJ,gGAAA,QAAQ,OAAA;AAoBV,gDAA6C;AAArC,oGAAA,QAAQ,OAAA;AAChB,0DAA2E;AAAnE,gHAAA,cAAc,OAAA;AAAE,2GAAA,SAAS,OAAA;AAAE,yGAAA,OAAO,OAAA;AAC1C,0DAAuD;AAA/C,gHAAA,cAAc,OAAA;AACtB,0DAAuD;AAA/C,gHAAA,cAAc,OAAA;AACtB,gDAA4D;AAApD,sGAAA,SAAS,OAAA;AAAE,0GAAA,aAAa,OAAA;AAChC,kDAAkE;AAA1D,wGAAA,UAAU,OAAA;AAAE,uGAAA,SAAS,OAAA;AAC7B,iDAA+E;AAAvE,mGAAA,SAAS,OAAA;AAAgB,wGAAA,cAAc,OAAA;AAC/C,mEAAmE;AAA3D,qHAAA,kBAAkB,OAAA;AAC1B,qDAAmE;AAA3D,uGAAA,WAAW,OAAA;AAEnB,6CAA2C;AAAnC,qGAAA,SAAS,OAAA;AACjB,qDAAiD;AAAzC,2GAAA,WAAW,OAAA;AACnB,6CAA0C;AAAlC,kGAAA,OAAO,OAAA;AACf,uDAAoD;AAA5C,sGAAA,SAAS,OAAA;AACjB,uDASmC;AARjC,6GAAA,gBAAgB,OAAA;AAChB,8GAAA,iBAAiB,OAAA;AACjB,+GAAA,kBAAkB,OAAA;AAClB,6GAAA,gBAAgB,OAAA;AAChB,kHAAA,qBAAqB,OAAA;AACrB,mHAAA,sBAAsB,OAAA;AACtB,mHAAA,sBAAsB,OAAA;AACtB,mHAAA,sBAAsB,OAAA;AAExB,+BAAkD;AAA1C,8FAAA,MAAM,OAAA;AAAE,0GAAA,kBAAkB,OAAA;AAClC,uCAAoC;AAA5B,8FAAA,KAAK,OAAA","sourcesContent":["'use strict';\n\nexport {\n  Edge,\n  EdgeList,\n  Node,\n  NodeList,\n  EdgeId,\n  NodeId,\n  RawEdge,\n  RawItem,\n  RawNode,\n  PropertyPath,\n  Item,\n  ItemId,\n  EdgeStyle,\n  PixelSize,\n  EdgeExtremity,\n  EdgeType,\n  GeoModeOptions,\n  EdgesDataEvent,\n  NodesDataEvent,\n  NodesDragEndEvent,\n  NodesEvent\n} from '@linkurious/ogma';\n\nexport {Captions} from './captions/captions';\nexport {ItemAttributes, BASE_GREY, PALETTE} from './styles/itemAttributes';\nexport {EdgeAttributes} from './styles/edgeAttributes';\nexport {NodeAttributes} from './styles/nodeAttributes';\nexport {StyleRule, StyleRuleType} from './styles/styleRule';\nexport {StyleRules, StyleType, Legend} from './styles/styleRules';\nexport {StylesViz, StylesConfig, FILTER_OPACITY} from './ogma/features/styles';\nexport {TransformationsViz} from './ogma/features/transformations';\nexport {CaptionsViz, CaptionState} from './ogma/features/captions';\nexport {OgmaState} from './ogma/features/reactive';\nexport {OgmaTools} from './tools/ogmaTool';\nexport {HTML_COLORS} from './tools/colorPalette';\nexport {Filters} from './filters/filters';\nexport {OgmaStore} from './ogma/features/OgmaStore';\nexport {\n  getSelectionSize,\n  getSelectionState,\n  getSelectionEntity,\n  getUniqSelection,\n  getUniqSelectionTypes,\n  getUniqSelectionEntity,\n  getSelectionProperties,\n  hasSelectionProperties\n} from './ogma/features/selectors';\nexport {LKOgma, ANIMATION_DURATION} from './ogma';\nexport {Tools} from './tools/tools';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAEb,yCAsB0B;AArBxB,4FAAA,IAAI,OAAA;AACJ,gGAAA,QAAQ,OAAA;AACR,4FAAA,IAAI,OAAA;AACJ,gGAAA,QAAQ,OAAA;AAoBV,gDAA6C;AAArC,oGAAA,QAAQ,OAAA;AAChB,0DAA2E;AAAnE,gHAAA,cAAc,OAAA;AAAE,2GAAA,SAAS,OAAA;AAAE,yGAAA,OAAO,OAAA;AAC1C,0DAAuD;AAA/C,gHAAA,cAAc,OAAA;AACtB,0DAAuD;AAA/C,gHAAA,cAAc,OAAA;AACtB,gDAA4D;AAApD,sGAAA,SAAS,OAAA;AAAE,0GAAA,aAAa,OAAA;AAChC,kDAAkE;AAA1D,wGAAA,UAAU,OAAA;AAAE,uGAAA,SAAS,OAAA;AAC7B,iDAA+E;AAAvE,mGAAA,SAAS,OAAA;AAAgB,wGAAA,cAAc,OAAA;AAC/C,mEAAmE;AAA3D,qHAAA,kBAAkB,OAAA;AAC1B,qDAAmE;AAA3D,uGAAA,WAAW,OAAA;AAEnB,6CAA2C;AAAnC,qGAAA,SAAS,OAAA;AACjB,qDAAiD;AAAzC,2GAAA,WAAW,OAAA;AACnB,6CAA0C;AAAlC,kGAAA,OAAO,OAAA;AACf,uDAAoD;AAA5C,sGAAA,SAAS,OAAA;AACjB,uDASmC;AARjC,6GAAA,gBAAgB,OAAA;AAChB,8GAAA,iBAAiB,OAAA;AACjB,+GAAA,kBAAkB,OAAA;AAClB,6GAAA,gBAAgB,OAAA;AAChB,kHAAA,qBAAqB,OAAA;AACrB,mHAAA,sBAAsB,OAAA;AACtB,mHAAA,sBAAsB,OAAA;AACtB,mHAAA,sBAAsB,OAAA;AAExB,+BAAkD;AAA1C,8FAAA,MAAM,OAAA;AAAE,0GAAA,kBAAkB,OAAA;AAClC,uCAAoC;AAA5B,8FAAA,KAAK,OAAA;AAEb,6DAAoE;AAA5D,sHAAA,sBAAsB,OAAA","sourcesContent":["'use strict';\n\nexport {\n  Edge,\n  EdgeList,\n  Node,\n  NodeList,\n  EdgeId,\n  NodeId,\n  RawEdge,\n  RawItem,\n  RawNode,\n  PropertyPath,\n  Item,\n  ItemId,\n  EdgeStyle,\n  PixelSize,\n  EdgeExtremity,\n  EdgeType,\n  GeoModeOptions,\n  EdgesDataEvent,\n  NodesDataEvent,\n  NodesDragEndEvent,\n  NodesEvent\n} from '@linkurious/ogma';\n\nexport {Captions} from './captions/captions';\nexport {ItemAttributes, BASE_GREY, PALETTE} from './styles/itemAttributes';\nexport {EdgeAttributes} from './styles/edgeAttributes';\nexport {NodeAttributes} from './styles/nodeAttributes';\nexport {StyleRule, StyleRuleType} from './styles/styleRule';\nexport {StyleRules, StyleType, Legend} from './styles/styleRules';\nexport {StylesViz, StylesConfig, FILTER_OPACITY} from './ogma/features/styles';\nexport {TransformationsViz} from './ogma/features/transformations';\nexport {CaptionsViz, CaptionState} from './ogma/features/captions';\nexport {OgmaState} from './ogma/features/reactive';\nexport {OgmaTools} from './tools/ogmaTool';\nexport {HTML_COLORS} from './tools/colorPalette';\nexport {Filters} from './filters/filters';\nexport {OgmaStore} from './ogma/features/OgmaStore';\nexport {\n  getSelectionSize,\n  getSelectionState,\n  getSelectionEntity,\n  getUniqSelection,\n  getUniqSelectionTypes,\n  getUniqSelectionEntity,\n  getSelectionProperties,\n  hasSelectionProperties\n} from './ogma/features/selectors';\nexport {LKOgma, ANIMATION_DURATION} from './ogma';\nexport {Tools} from './tools/tools';\n\nexport {LKE_NODE_GROUPING_EDGE} from './ogma/features/nodeGrouping';\n"]}

package/dist/ogma/features/captions.js

@@ -72,6 +72,8 @@ class CaptionsViz {
                         }
                     }
                 },
+                // We ignore virtual nodes as they have their proper caption
+                nodeSelector: (node) => !node.isVirtual(),
                 nodeDependencies: { self: { data: true } }
             });
         }
@@ -101,7 +103,7 @@ class CaptionsViz {
                         }
                     }
                 },
-                edgeSelector: (edge) => !edge.isVirtual() && edge.isVisible(),
+                edgeSelector: (edge) => !edge.isVirtual(),
                 // ogma will trigger the rendering if data change or the shape change (to trigger the rendering when edges are grouped)
                 edgeDependencies: { self: { data: true, attributes: ['shape.style'] } }
             });

package/dist/ogma/features/captions.js.map

@@ -1 +1 @@
-{"version":3,"file":"captions.js","sourceRoot":"","sources":["../../../src/ogma/features/captions.ts"],"names":[],"mappings":"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","sourcesContent":["'use strict';\n\nimport * as Ogma from '@linkurious/ogma';\nimport {GraphSchemaTypeWithAccess, ItemFieldsCaptions} from '@linkurious/rest-client';\n\nimport {Captions, LKOgma} from '../..';\nimport {Tools} from '../../tools/tools';\n\nexport interface CaptionState {\n  node: ItemFieldsCaptions;\n  edge: ItemFieldsCaptions;\n}\n\nexport class CaptionsViz {\n  public nodesCaptionsRule!: Ogma.StyleRule;\n  public edgesCaptionsRule!: Ogma.StyleRule;\n  private _ogma: LKOgma;\n  private _captionSchema: CaptionState = {node: {}, edge: {}};\n  private _graphSchema: {\n    node: Array<GraphSchemaTypeWithAccess>;\n    edge: Array<GraphSchemaTypeWithAccess>;\n  } = {node: [], edge: []};\n\n  constructor(\n    ogma: LKOgma,\n    private _nodeMaxTextLength: number | undefined,\n    private _edgeMaxTextLength: number | undefined\n  ) {\n    this._ogma = ogma;\n  }\n\n  public set graphSchema(graphSchema: {\n    node: Array<GraphSchemaTypeWithAccess>;\n    edge: Array<GraphSchemaTypeWithAccess>;\n  }) {\n    this._graphSchema = graphSchema;\n  }\n\n  /**\n   * Refresh the schema\n   */\n  public refreshSchema(schema: CaptionState): void {\n    this._captionSchema = schema;\n  }\n\n  /**\n   * Refresh visualization captions rules\n   */\n  public async initVizCaptions(schema: CaptionState): Promise<void> {\n    if (this._ogma.LKCaptions.nodesCaptionsRule) {\n      this._ogma.LKCaptions.refreshSchema(schema);\n      await this._ogma.LKCaptions.updateNodeCaptions();\n    } else {\n      this._ogma.LKCaptions.updateNodeCaptions(schema.node);\n    }\n    if (this._ogma.LKCaptions.edgesCaptionsRule) {\n      this._ogma.LKCaptions.refreshSchema(schema);\n      await this._ogma.LKCaptions.updateEdgeCaptions();\n    } else {\n      this._ogma.LKCaptions.updateEdgeCaptions(schema.edge);\n    }\n  }\n\n  /**\n   * Create or update nodeCaptionRule\n   */\n  public updateNodeCaptions(schema?: ItemFieldsCaptions): Promise<void> | void {\n    if (schema) {\n      this._captionSchema.node = schema;\n    }\n    if (!Tools.isDefined(this.nodesCaptionsRule)) {\n      this.nodesCaptionsRule = this._ogma.styles.addRule({\n        nodeAttributes: {\n          text: {\n            content: (node: Ogma.Node | undefined) => {\n              if (node === undefined) {\n                return ``;\n              }\n              const value = Captions.getText(\n                node.getData(),\n                this._captionSchema.node,\n                this._graphSchema.node\n              );\n              return Tools.isDefined(this._nodeMaxTextLength)\n                ? Tools.truncate(value, 'middle', this._nodeMaxTextLength)\n                : value;\n            }\n          }\n        },\n        nodeDependencies: {self: {data: true}}\n      });\n    } else {\n      return this.nodesCaptionsRule.refresh();\n    }\n  }\n\n  /**\n   * Create or update edgeCaptionRule\n   */\n  public updateEdgeCaptions(schema?: ItemFieldsCaptions): Promise<void> | void {\n    if (schema) {\n      this._captionSchema.edge = schema;\n    }\n    if (!Tools.isDefined(this.edgesCaptionsRule)) {\n      this.edgesCaptionsRule = this._ogma.styles.addRule({\n        edgeAttributes: {\n          text: {\n            content: (edge: Ogma.Edge | undefined) => {\n              if (edge === undefined || edge.getData() === undefined) {\n                return ``;\n              }\n              const value = Captions.getText(\n                edge.getData(),\n                this._captionSchema.edge,\n                this._graphSchema.edge\n              );\n              return Tools.isDefined(this._edgeMaxTextLength)\n                ? Tools.truncate(value, 'middle', this._edgeMaxTextLength)\n                : value;\n            }\n          }\n        },\n        edgeSelector: (edge) => !edge.isVirtual() && edge.isVisible(),\n        // ogma will trigger the rendering if data change or the shape change (to trigger the rendering when edges are grouped)\n        edgeDependencies: {self: {data: true, attributes: ['shape.style']}}\n      });\n    } else {\n      return this.edgesCaptionsRule.refresh();\n    }\n  }\n}\n"]}
+{"version":3,"file":"captions.js","sourceRoot":"","sources":["../../../src/ogma/features/captions.ts"],"names":[],"mappings":"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","sourcesContent":["'use strict';\n\nimport * as Ogma from '@linkurious/ogma';\nimport {GraphSchemaTypeWithAccess, ItemFieldsCaptions} from '@linkurious/rest-client';\n\nimport {Captions, LKOgma} from '../..';\nimport {Tools} from '../../tools/tools';\n\nexport interface CaptionState {\n  node: ItemFieldsCaptions;\n  edge: ItemFieldsCaptions;\n}\n\nexport class CaptionsViz {\n  public nodesCaptionsRule!: Ogma.StyleRule;\n  public edgesCaptionsRule!: Ogma.StyleRule;\n  private _ogma: LKOgma;\n  private _captionSchema: CaptionState = {node: {}, edge: {}};\n  private _graphSchema: {\n    node: Array<GraphSchemaTypeWithAccess>;\n    edge: Array<GraphSchemaTypeWithAccess>;\n  } = {node: [], edge: []};\n\n  constructor(\n    ogma: LKOgma,\n    private _nodeMaxTextLength: number | undefined,\n    private _edgeMaxTextLength: number | undefined\n  ) {\n    this._ogma = ogma;\n  }\n\n  public set graphSchema(graphSchema: {\n    node: Array<GraphSchemaTypeWithAccess>;\n    edge: Array<GraphSchemaTypeWithAccess>;\n  }) {\n    this._graphSchema = graphSchema;\n  }\n\n  /**\n   * Refresh the schema\n   */\n  public refreshSchema(schema: CaptionState): void {\n    this._captionSchema = schema;\n  }\n\n  /**\n   * Refresh visualization captions rules\n   */\n  public async initVizCaptions(schema: CaptionState): Promise<void> {\n    if (this._ogma.LKCaptions.nodesCaptionsRule) {\n      this._ogma.LKCaptions.refreshSchema(schema);\n      await this._ogma.LKCaptions.updateNodeCaptions();\n    } else {\n      this._ogma.LKCaptions.updateNodeCaptions(schema.node);\n    }\n    if (this._ogma.LKCaptions.edgesCaptionsRule) {\n      this._ogma.LKCaptions.refreshSchema(schema);\n      await this._ogma.LKCaptions.updateEdgeCaptions();\n    } else {\n      this._ogma.LKCaptions.updateEdgeCaptions(schema.edge);\n    }\n  }\n\n  /**\n   * Create or update nodeCaptionRule\n   */\n  public updateNodeCaptions(schema?: ItemFieldsCaptions): Promise<void> | void {\n    if (schema) {\n      this._captionSchema.node = schema;\n    }\n    if (!Tools.isDefined(this.nodesCaptionsRule)) {\n      this.nodesCaptionsRule = this._ogma.styles.addRule({\n        nodeAttributes: {\n          text: {\n            content: (node: Ogma.Node | undefined) => {\n              if (node === undefined) {\n                return ``;\n              }\n              const value = Captions.getText(\n                node.getData(),\n                this._captionSchema.node,\n                this._graphSchema.node\n              );\n              return Tools.isDefined(this._nodeMaxTextLength)\n                ? Tools.truncate(value, 'middle', this._nodeMaxTextLength)\n                : value;\n            }\n          }\n        },\n        // We ignore virtual nodes as they have their proper caption\n        nodeSelector: (node) => !node.isVirtual(),\n        nodeDependencies: {self: {data: true}}\n      });\n    } else {\n      return this.nodesCaptionsRule.refresh();\n    }\n  }\n\n  /**\n   * Create or update edgeCaptionRule\n   */\n  public updateEdgeCaptions(schema?: ItemFieldsCaptions): Promise<void> | void {\n    if (schema) {\n      this._captionSchema.edge = schema;\n    }\n    if (!Tools.isDefined(this.edgesCaptionsRule)) {\n      this.edgesCaptionsRule = this._ogma.styles.addRule({\n        edgeAttributes: {\n          text: {\n            content: (edge: Ogma.Edge | undefined) => {\n              if (edge === undefined || edge.getData() === undefined) {\n                return ``;\n              }\n              const value = Captions.getText(\n                edge.getData(),\n                this._captionSchema.edge,\n                this._graphSchema.edge\n              );\n              return Tools.isDefined(this._edgeMaxTextLength)\n                ? Tools.truncate(value, 'middle', this._edgeMaxTextLength)\n                : value;\n            }\n          }\n        },\n        edgeSelector: (edge) => !edge.isVirtual(),\n        // ogma will trigger the rendering if data change or the shape change (to trigger the rendering when edges are grouped)\n        edgeDependencies: {self: {data: true, attributes: ['shape.style']}}\n      });\n    } else {\n      return this.edgesCaptionsRule.refresh();\n    }\n  }\n}\n"]}

package/dist/ogma/features/nodeGrouping.d.ts

@@ -0,0 +1,68 @@
+import { Transformation } from '@linkurious/ogma';
+import { LkEdgeData, LkNodeData, NodeGroupingRule } from '@linkurious/rest-client';
+import { LKOgma } from '../index';
+export declare const LKE_NODE_GROUPING_EDGE = "LKE_NODE_GROUPING_EDGE";
+export declare const LKE_NODE_GROUPING_NODE = "LKE_NODE_GROUPING_NODE";
+export declare class NodeGroupingTransformation {
+    transformation?: Transformation<LkNodeData, LkEdgeData>;
+    groupRule?: NodeGroupingRule;
+    private _ogma;
+    constructor(ogma: LKOgma);
+    /**
+     * Set the grouping rule
+     * @param rule of grouping
+     */
+    setGroupingRule(rule: NodeGroupingRule | undefined): void;
+    /**
+     * create a node grouping transformation
+     * It uses groupRule to define the rule
+     * Group the nodes based on a category type and a property value
+     */
+    initTransformation(): Promise<void>;
+    /**
+     * refresh the transformation
+     * Called when there is a change in the rule
+     */
+    refreshTransformation(): Promise<void>;
+    /**
+     * init node grouping style
+     */
+    initNodeGroupingStyle(): void;
+    /**
+     * run layout on all subnodes of virtual nodes
+     */
+    runLayoutOnAllSubNodes(): Promise<void>;
+    /**
+     * Run the layout on the subnodes of the virtual node
+     * @param subNodes nodes part of a virtual node
+     */
+    private _runSubNodesLayout;
+    /**
+     * Return the caption of a virtual node
+     * @param node reference to the virtual node
+     */
+    private _getNodeGroupingCaption;
+    /**
+     * Run the circle pack layout on the subnodes
+     * @param subNodes
+     */
+    private _runCirclePack;
+    private _runForceLayout;
+    private _isRuleNotApplicableToNode;
+    /**
+     * Unpin list of nodes
+     * @param nodes
+     * @private
+     */
+    private _unpinNodes;
+    /**
+     * Get all the raw nodes part of the transformation
+     * @private
+     */
+    private _getAllTransformationRawNodes;
+    /**
+     * Get the virtual nodes of the transformation
+     * @private
+     */
+    private _getVirtualNodesOfTransformation;
+}

package/dist/ogma/features/nodeGrouping.js

@@ -0,0 +1,247 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeGroupingTransformation = exports.LKE_NODE_GROUPING_NODE = exports.LKE_NODE_GROUPING_EDGE = void 0;
+const index_1 = require("../index");
+const tools_1 = require("../../tools/tools");
+exports.LKE_NODE_GROUPING_EDGE = 'LKE_NODE_GROUPING_EDGE';
+exports.LKE_NODE_GROUPING_NODE = 'LKE_NODE_GROUPING_NODE';
+class NodeGroupingTransformation {
+    constructor(ogma) {
+        this._ogma = ogma;
+    }
+    /**
+     * Set the grouping rule
+     * @param rule of grouping
+     */
+    setGroupingRule(rule) {
+        this.groupRule = rule;
+    }
+    /**
+     * create a node grouping transformation
+     * It uses groupRule to define the rule
+     * Group the nodes based on a category type and a property value
+     */
+    initTransformation() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.transformation === undefined) {
+                this.transformation = this._ogma.transformations.addNodeGrouping({
+                    groupIdFunction: (node) => {
+                        var _a, _b, _c;
+                        if (this._isRuleNotApplicableToNode(node)) {
+                            return undefined;
+                        }
+                        else {
+                            const propertyValue = node.getData([
+                                'properties',
+                                (_b = (_a = this.groupRule) === null || _a === void 0 ? void 0 : _a.groupingOptions.propertyKey) !== null && _b !== void 0 ? _b : ''
+                            ]);
+                            // if the property value is of type conflict or invalid value we use the original value
+                            const originalValue = typeof propertyValue === 'object'
+                                ? propertyValue.original
+                                : propertyValue;
+                            // groupRule is defined if not we returned undefined
+                            // node with same value will be part of the same group
+                            return `${(_c = this.groupRule) === null || _c === void 0 ? void 0 : _c.groupingOptions.itemType}-${originalValue}`
+                                .toLowerCase()
+                                .trim();
+                        }
+                    },
+                    nodeGenerator: (nodes) => {
+                        return {
+                            data: {
+                                // groupRule is defined as a virtual node only exist if the rule is defined
+                                categories: [exports.LKE_NODE_GROUPING_NODE],
+                                properties: {
+                                    size: nodes.size
+                                }
+                            }
+                        };
+                    },
+                    edgeGenerator: () => {
+                        return {
+                            data: {
+                                type: exports.LKE_NODE_GROUPING_EDGE
+                            }
+                        };
+                    },
+                    showContents: true,
+                    duration: 300,
+                    padding: 10
+                });
+                // TODO remove setTimeout when LKE-10453 is fixed
+                setTimeout(() => {
+                    this.transformation.refresh();
+                }, 200);
+            }
+            else {
+                yield this.refreshTransformation();
+            }
+        });
+    }
+    /**
+     * refresh the transformation
+     * Called when there is a change in the rule
+     */
+    refreshTransformation() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.transformation !== undefined) {
+                yield this.transformation.refresh();
+                yield this._unpinNodes(this._getAllTransformationRawNodes());
+            }
+            else {
+                yield this.initTransformation();
+            }
+        });
+    }
+    /**
+     * init node grouping style
+     */
+    initNodeGroupingStyle() {
+        this._ogma.styles.addRule({
+            nodeAttributes: {
+                // Any default style will go here
+                text: {
+                    content: (node) => {
+                        return this._getNodeGroupingCaption(node);
+                    },
+                    style: 'bold'
+                },
+                layer: -1,
+                color: 'rgba(240, 240, 240)',
+                innerStroke: {
+                    color: '#7f7f7f',
+                    width: 2
+                }
+            },
+            nodeSelector: (node) => {
+                return node.isVirtual();
+            },
+            // the style will be updated when data object is updated
+            nodeDependencies: { self: { data: true } }
+        });
+    }
+    /**
+     * run layout on all subnodes of virtual nodes
+     */
+    runLayoutOnAllSubNodes() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._ogma.transformations.afterNextUpdate();
+            const rawNodesList = this._getAllTransformationRawNodes();
+            const promisesList = [];
+            for (let i = 0; i < rawNodesList.length; i++) {
+                // rawNodesList[i] is not null because each group has at least one node
+                const subNodes = rawNodesList[i];
+                promisesList.push(this._runSubNodesLayout(subNodes));
+            }
+            yield Promise.all(promisesList);
+        });
+    }
+    /**
+     * Run the layout on the subnodes of the virtual node
+     * @param subNodes nodes part of a virtual node
+     */
+    _runSubNodesLayout(subNodes) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (subNodes.size === 0) {
+                return;
+            }
+            const noEdges = subNodes.getAdjacentEdges({ bothExtremities: true }).size === 0;
+            if (noEdges) {
+                yield this._runCirclePack(subNodes);
+            }
+            else {
+                yield this._runForceLayout(subNodes);
+            }
+        });
+    }
+    /**
+     * Return the caption of a virtual node
+     * @param node reference to the virtual node
+     */
+    _getNodeGroupingCaption(node) {
+        if (node !== undefined && node.isVirtual()) {
+            // get the property value of the first node of the group (all nodes share the same property value)
+            const propertyValue = node
+                .getSubNodes()
+                .get(0)
+                .getData(['properties', this.groupRule.groupingOptions.propertyKey]);
+            const size = node.getSubNodes().filter((e) => !e.hasClass('filtered')).size;
+            return `${propertyValue} (${size})`;
+        }
+    }
+    /**
+     * Run the circle pack layout on the subnodes
+     * @param subNodes
+     */
+    _runCirclePack(subNodes) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._ogma.algorithms.circlePack({
+                nodes: subNodes,
+                margin: 10,
+                sort: 'asc'
+            });
+        });
+    }
+    _runForceLayout(subNodes) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._ogma.layouts.force(Object.assign({ nodes: subNodes }, index_1.FORCE_LAYOUT_CONFIG));
+        });
+    }
+    _isRuleNotApplicableToNode(node) {
+        var _a, _b;
+        const propertyValue = node.getData([
+            'properties',
+            (_b = (_a = this.groupRule) === null || _a === void 0 ? void 0 : _a.groupingOptions.propertyKey) !== null && _b !== void 0 ? _b : ''
+        ]);
+        return (
+        // if the group rule is not defined
+        this.groupRule === undefined ||
+            // if rule is applied to a different category
+            !node.getData('categories').includes(this.groupRule.groupingOptions.itemType) ||
+            // if the property value is not defined
+            !tools_1.Tools.isDefined(propertyValue) ||
+            // if the property value is missing
+            (typeof propertyValue === 'object' && propertyValue.status === 'missing'));
+    }
+    /**
+     * Unpin list of nodes
+     * @param nodes
+     * @private
+     */
+    _unpinNodes(nodes) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield Promise.all(nodes.map((nodeList) => {
+                if (nodeList !== null) {
+                    return nodeList.setAttribute('layoutable', true);
+                }
+            }));
+        });
+    }
+    /**
+     * Get all the raw nodes part of the transformation
+     * @private
+     */
+    _getAllTransformationRawNodes() {
+        const virtualNodes = this._getVirtualNodesOfTransformation();
+        return virtualNodes.getSubNodes();
+    }
+    /**
+     * Get the virtual nodes of the transformation
+     * @private
+     */
+    _getVirtualNodesOfTransformation() {
+        // @ts-ignore getContext exists on the transformation but hidden by the types
+        return this.transformation.getContext().virtualNodes;
+    }
+}
+exports.NodeGroupingTransformation = NodeGroupingTransformation;
+//# sourceMappingURL=nodeGrouping.js.map

package/dist/ogma/features/nodeGrouping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nodeGrouping.js","sourceRoot":"","sources":["../../../src/ogma/features/nodeGrouping.ts"],"names":[],"mappings":"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","sourcesContent":["import {Transformation, Node, NodeList} from '@linkurious/ogma';\nimport {\n  ConflictValue,\n  LkEdgeData,\n  LkNodeData,\n  MissingValue,\n  NodeGroupingRule\n} from '@linkurious/rest-client';\n\nimport {FORCE_LAYOUT_CONFIG, LKOgma} from '../index';\nimport {Tools} from '../../tools/tools';\n\nexport const LKE_NODE_GROUPING_EDGE = 'LKE_NODE_GROUPING_EDGE';\nexport const LKE_NODE_GROUPING_NODE = 'LKE_NODE_GROUPING_NODE';\n\nexport class NodeGroupingTransformation {\n  public transformation?: Transformation<LkNodeData, LkEdgeData>;\n  public groupRule?: NodeGroupingRule;\n  private _ogma: LKOgma;\n\n  constructor(ogma: LKOgma) {\n    this._ogma = ogma;\n  }\n\n  /**\n   * Set the grouping rule\n   * @param rule of grouping\n   */\n  public setGroupingRule(rule: NodeGroupingRule | undefined): void {\n    this.groupRule = rule;\n  }\n\n  /**\n   * create a node grouping transformation\n   * It uses groupRule to define the rule\n   * Group the nodes based on a category type and a property value\n   */\n  public async initTransformation(): Promise<void> {\n    if (this.transformation === undefined) {\n      this.transformation = this._ogma.transformations.addNodeGrouping({\n        groupIdFunction: (node) => {\n          if (this._isRuleNotApplicableToNode(node)) {\n            return undefined;\n          } else {\n            const propertyValue = node.getData([\n              'properties',\n              this.groupRule?.groupingOptions.propertyKey ?? ''\n            ]);\n            // if the property value is of type conflict or invalid value we use the original value\n            const originalValue =\n              typeof propertyValue === 'object'\n                ? (propertyValue as ConflictValue).original\n                : propertyValue;\n            // groupRule is defined if not we returned undefined\n            // node with same value will be part of the same group\n            return `${this.groupRule?.groupingOptions.itemType}-${originalValue}`\n              .toLowerCase()\n              .trim();\n          }\n        },\n        nodeGenerator: (nodes) => {\n          return {\n            data: {\n              // groupRule is defined as a virtual node only exist if the rule is defined\n              categories: [LKE_NODE_GROUPING_NODE],\n              properties: {\n                size: nodes.size\n              }\n            }\n          };\n        },\n        edgeGenerator: () => {\n          return {\n            data: {\n              type: LKE_NODE_GROUPING_EDGE\n            }\n          };\n        },\n        showContents: true,\n        duration: 300,\n        padding: 10\n      });\n      // TODO remove setTimeout when LKE-10453 is fixed\n      setTimeout(() => {\n        this.transformation!.refresh();\n      }, 200);\n    } else {\n      await this.refreshTransformation();\n    }\n  }\n\n  /**\n   * refresh the transformation\n   * Called when there is a change in the rule\n   */\n  public async refreshTransformation(): Promise<void> {\n    if (this.transformation !== undefined) {\n      await this.transformation.refresh();\n      await this._unpinNodes(this._getAllTransformationRawNodes());\n    } else {\n      await this.initTransformation();\n    }\n  }\n\n  /**\n   * init node grouping style\n   */\n  public initNodeGroupingStyle(): void {\n    this._ogma.styles.addRule({\n      nodeAttributes: {\n        // Any default style will go here\n        text: {\n          content: (node: Node<LkNodeData> | undefined): string | undefined => {\n            return this._getNodeGroupingCaption(node);\n          },\n          style: 'bold'\n        },\n        layer: -1,\n        color: 'rgba(240, 240, 240)',\n        innerStroke: {\n          color: '#7f7f7f',\n          width: 2\n        }\n      },\n      nodeSelector: (node) => {\n        return node.isVirtual();\n      },\n      // the style will be updated when data object is updated\n      nodeDependencies: {self: {data: true}}\n    });\n  }\n\n  /**\n   * run layout on all subnodes of virtual nodes\n   */\n  public async runLayoutOnAllSubNodes(): Promise<void> {\n    await this._ogma.transformations.afterNextUpdate();\n    const rawNodesList = this._getAllTransformationRawNodes();\n    const promisesList: Promise<void>[] = [];\n    for (let i = 0; i < rawNodesList.length; i++) {\n      // rawNodesList[i] is not null because each group has at least one node\n      const subNodes = rawNodesList[i]!;\n      promisesList.push(this._runSubNodesLayout(subNodes));\n    }\n    await Promise.all(promisesList);\n  }\n\n  /**\n   * Run the layout on the subnodes of the virtual node\n   * @param subNodes nodes part of a virtual node\n   */\n  private async _runSubNodesLayout(subNodes: NodeList<LkNodeData, LkEdgeData>): Promise<void> {\n    if (subNodes.size === 0) {\n      return;\n    }\n\n    const noEdges = subNodes.getAdjacentEdges({bothExtremities: true}).size === 0;\n    if (noEdges) {\n      await this._runCirclePack(subNodes);\n    } else {\n      await this._runForceLayout(subNodes);\n    }\n  }\n\n  /**\n   * Return the caption of a virtual node\n   * @param node reference to the virtual node\n   */\n  private _getNodeGroupingCaption(node: Node<LkNodeData> | undefined): string | undefined {\n    if (node !== undefined && node.isVirtual()) {\n      // get the property value of the first node of the group (all nodes share the same property value)\n      const propertyValue = node\n        .getSubNodes()!\n        .get(0)\n        .getData(['properties', this.groupRule!.groupingOptions.propertyKey]);\n      const size = node.getSubNodes()!.filter((e) => !e.hasClass('filtered')).size;\n      return `${propertyValue} (${size})`;\n    }\n  }\n\n  /**\n   * Run the circle pack layout on the subnodes\n   * @param subNodes\n   */\n  private async _runCirclePack(subNodes: NodeList<LkNodeData, LkEdgeData>): Promise<void> {\n    await this._ogma.algorithms.circlePack({\n      nodes: subNodes,\n      margin: 10,\n      sort: 'asc'\n    });\n  }\n\n  private async _runForceLayout(subNodes: NodeList<LkNodeData, LkEdgeData>): Promise<void> {\n    await this._ogma.layouts.force({\n      nodes: subNodes,\n      ...FORCE_LAYOUT_CONFIG\n    });\n  }\n\n  private _isRuleNotApplicableToNode(node: Node<LkNodeData>): boolean {\n    const propertyValue = node.getData([\n      'properties',\n      this.groupRule?.groupingOptions.propertyKey ?? ''\n    ]);\n    return (\n      // if the group rule is not defined\n      this.groupRule === undefined ||\n      // if rule is applied to a different category\n      !node.getData('categories').includes(this.groupRule.groupingOptions.itemType) ||\n      // if the property value is not defined\n      !Tools.isDefined(propertyValue) ||\n      // if the property value is missing\n      (typeof propertyValue === 'object' && (propertyValue as MissingValue).status === 'missing')\n    );\n  }\n\n  /**\n   * Unpin list of nodes\n   * @param nodes\n   * @private\n   */\n  private async _unpinNodes(nodes: Array<NodeList | null>): Promise<void> {\n    await Promise.all(\n      nodes.map((nodeList) => {\n        if (nodeList !== null) {\n          return nodeList.setAttribute('layoutable', true);\n        }\n      })\n    );\n  }\n\n  /**\n   * Get all the raw nodes part of the transformation\n   * @private\n   */\n  private _getAllTransformationRawNodes(): Array<NodeList | null> {\n    const virtualNodes = this._getVirtualNodesOfTransformation();\n    return virtualNodes.getSubNodes();\n  }\n\n  /**\n   * Get the virtual nodes of the transformation\n   * @private\n   */\n  private _getVirtualNodesOfTransformation(): NodeList<LkNodeData, LkEdgeData> {\n    // @ts-ignore getContext exists on the transformation but hidden by the types\n    return this.transformation.getContext().virtualNodes;\n  }\n}\n"]}

package/dist/ogma/features/styles.d.ts

@@ -40,6 +40,7 @@ export declare class StylesViz {
             shape?: OgmaEdgeShape;
             text?: TextOptions;
         };
+        baseUrl?: string;
     });
     /**
      * Set nodes default styles based on the configuration

package/dist/ogma/features/styles.js

@@ -43,6 +43,7 @@ class StylesViz {
         this._edgeAttributes = new __1.EdgeAttributes({});
         this._ogma = ogma;
         this._defaultConfiguration = configuration;
+        this._nodeAttributes.setBaseUrl(configuration.baseUrl);
     }
     /**
      * Set nodes default styles based on the configuration
@@ -105,6 +106,7 @@ class StylesViz {
      * Set edges default styles based on the configuration
      */
     setEdgesDefaultStyles() {
+        var _a;
         // setting selection and hover attributes
         this._ogma.styles.setHoveredEdgeAttributes(HOVERED_SELECTED_EDGE_STYLE);
         this._ogma.styles.setSelectedEdgeAttributes(HOVERED_SELECTED_EDGE_STYLE);
@@ -128,8 +130,7 @@ class StylesViz {
                         this._defaultConfiguration.edge.text.font !== undefined
                         ? this._defaultConfiguration.edge.text.font
                         : "'roboto', sans-serif",
-                    color: this._defaultConfiguration.edge !== undefined &&
-                        this._defaultConfiguration.edge.text !== undefined &&
+                    color: ((_a = this._defaultConfiguration.edge) === null || _a === void 0 ? void 0 : _a.text) !== undefined &&
                         this._defaultConfiguration.edge.text.color !== undefined
                         ? this._defaultConfiguration.edge.text.color
                         : 'black',
@@ -242,7 +243,13 @@ class StylesViz {
             name: 'filtered',
             nodeAttributes: {
                 opacity: exports.FILTER_OPACITY,
-                layer: -1,
+                layer: (node) => {
+                    // if the node is part of a virtual node, it should be on top
+                    if (node.getMetaNode() !== undefined) {
+                        return 1;
+                    }
+                    return -1;
+                },
                 detectable: false,
                 badges: {
                     topRight: {
@@ -266,7 +273,17 @@ class StylesViz {
             },
             edgeAttributes: {
                 opacity: exports.FILTER_OPACITY,
-                layer: -1,
+                layer: (edge) => {
+                    const isEdgeInsideNodeGroup = edge
+                        .getExtremities()
+                        .getMetaNode()
+                        .some((node) => node !== null);
+                    // if the edge is part of a virtual node, it should be on top
+                    if (!edge.isVirtual() && isEdgeInsideNodeGroup) {
+                        return 1;
+                    }
+                    return -1;
+                },
                 detectable: false,
                 text: null,
                 color: __1.BASE_GREY,
@@ -490,7 +507,7 @@ class StylesViz {
                         }
                     },
                     image: (node) => {
-                        if (node !== undefined) {
+                        if (node !== undefined && !node.isVirtual()) {
                             return this._nodeAttributes.icon(node.getData()).image;
                         }
                     }
@@ -500,7 +517,7 @@ class StylesViz {
         }
         else {
             this._nodeAttributes.refresh({ icon: iconStyleRules });
-            this._ogmaNodeIcon.refresh();
+            void this._ogmaNodeIcon.refresh();
         }
     }
     /**
@@ -543,6 +560,7 @@ class StylesViz {
                         }
                     }
                 },
+                nodeSelector: (node) => node !== undefined && !node.isVirtual(),
                 nodeDependencies: { self: { data: true } }
             });
         }