Network Graph Component

Overview

Display the connectivity/dependency/relationships between multiple objects in the graph representation.

Some example use cases:

  • Marketing Analytics – this component can be used to figure out the most influential people in your social network. Advertisers and marketers can estimate the biggest bang for the marketing buck by routing their message through the most influential people in your CRM application.
  • Banking Transactions – this component can be used to find unusual patterns helping in mitigating fraudulent transactions.
  • Supply Chain – this component help in identifying optimum routes for your delivery trucks and in identifying locations for warehouses and delivery centers.
  • Field Service – Companies having on-site field agents can optimize the routes of their agents using this component which helps in cutting costs and reducing the travel time.

Key Features & Functionality

  • Supports all configurations a network graph component has, as outlined on https://visjs.github.io/vis-network/docs/network/
  • Easily and quickly configure network graph objects & its edges (dependencies) in "low-code"
  • Having various options for setting edges, nodes, layout, physics, and interaction.
  • Apply different branding to your graphs with different icons, colors, image nodes, & style themes.
Anonymous
  • Hi there! I'm curious how I would be able to access selected node data for the onSelection parameter?

  • We have noticed that when first deploying the Network Graph Plugin into an environment the plugin works fine. However, we have a self-hosted instance on AWS that gets rebuilt each morning and have noticed that when it rebuilds the plugin stops working and only accepts different parameters. The environment is on 22.4 and the plugin is always on the latest version. When we redeploy the plugin the correct parameters appear again and the code works. We have seen this also on our AppianCloud instance after restarts and upgrades.

    Incorrect parameters:

  • Yes - some plugins need the dynamic FQDN for your environment. Use Appian's PDF viewer to look at an Appian document. If you get a similar error, then your organization's IT/networking teams may need to setup the static/dynamic FQDN's.

    This only applies if your organization accesses the site via VPN (or dual configuration) while using a custom domain. AFAIK, the default Appian (*.appiancloud.com) URL's shouldn't have a problem.
    docs.appian.com/.../Using_a_Custom_Domain_in_Appian_Cloud.html

  • is the dynamic content setup mandatory for this plugin?

  • Release Notes - v1.1.2
    • Vulnerability fixes
  • This plugin is not available for download. Could you please suggest where to get it or if there is any alternative?

  • Does this support import of DOT data to render the graphs?

  • Q1. Can we get the dynamic data from external DB's and build network diagram? How to map the nodes and edges respectively for dynamic values?

    Ans: Yes. When we have accurate node details and their corresponding details in DB tables, 

    1. Get the node details and its edge details from DB or view (incase of separate tables for nodes and edges)
    2. Create separate expressions. One for formulating dictionary of nodes and another for formulating dictionary of edges
    3. Pass them to the networkGraphField

    Please find the code snippet at the bottom.

    {
      a!localVariables(
    //Use the expression for preparing the dictionary of nodes in case of database retrieval
        local!nodes:{
          {id: 1,label: "Node 1", hidden: false},
          {id: 2,label: "Node 2", hidden: false},
          {id: 3,label: "Node 3", hidden: false},
          {id: 4,label: "Node 4", hidden: false},
          {id: 5,label: "Node 5", hidden: false},
          {id: 6,label: "Node 6", hidden: false}
        },
    //Use the expression for preparing the dictionary of edges in case of database retrieval
        local!edges:{
          { from: 1, to: 2 },
          { from: 1, to: 3 },
          { from: 1, to: 4 },
          { from: 4, to: 5 },
          { from: 4, to: 6 }
        },
      networkGraphField(
        label: "Network Graph Field",
        labelPosition: "ABOVE",
        validations: {},
        height: "SHORT",
        nodes: local!nodes,
        edges: local!edges,
        nodeOptions: {},
        edgeOptions: {
          arrows: "to"
        },
        groups: {},
        layout: {
          hierarchical: {
            direction: "UD",
            sortMethod: "directed"
          }
        },
        interaction: {},
        physics: {
          barnesHut: {
            springLength: 200
          }
        },
        showBorder: true
      )
      )
    }
    

    Q2. I have a requirement, to show the drill-down level of each node as a separate interface. Is it possible to implement the same by using Network-graph-component Plugin?

    Ans: No. The existing networkGraphField component does not have link facility. If we need we need to customize the component to enable the link facility.

    Q3. Can we show/hide the nodes depends on the requirements? Any examples please share.

    Ans: Yes. We can hide the nodes by using the hidden parameter of the Node. Following code snippet demonstrate this requirement.

    Note: When we hide node, the node will be disappeared. Its associated edges will be removed from it connected nodes.

    …
    
    nodes: {{id: 1, label: "Node 1", hidden:true }}
    
    …

    Image with fully connected nodes.

    {
      a!localVariables(
        /*Use the expression for preparing the dictionary of nodes in case of database retrieval*/
        local!nodes:{
          {id: 1,label: "Node 1", hidden: false},
          {id: 2,label: "Node 2", hidden: false},
          {id: 3,label: "Node 3", hidden: false},
          {id: 4,label: "Node 4", hidden: false},
          {id: 5,label: "Node 5", hidden: false},
          {id: 6,label: "Node 6", hidden: false}
        },
        /*Use the expression for preparing the dictionary of edges in case of database retrieval*/
        local!edges:{
          { from: 1, to: 2 },
          { from: 1, to: 3 },
          { from: 1, to: 4 },
          { from: 4, to: 5 },
          { from: 4, to: 6 }
        },
        networkGraphField(
          label: "Network Graph Field",
          labelPosition: "ABOVE",
          validations: {},
          height: "SHORT",
          nodes: local!nodes,
          edges: local!edges,
          nodeOptions: {},
          edgeOptions: {
            arrows: "to"
          },
          groups: {},
          layout: {
            hierarchical: {
              direction: "UD",
              sortMethod: "directed"
            }
          },
          interaction: {},
          physics: {
            barnesHut: {
              springLength: 200
            }
          },
          showBorder: true
        )
      )
    }
    

    Image with Node 4 hidden

    {
      a!localVariables(
        /*Use the expression for preparing the dictionary of nodes in case of database retrieval*/
        local!nodes:{
          {id: 1,label: "Node 1", hidden: false},
          {id: 2,label: "Node 2", hidden: false},
          {id: 3,label: "Node 3", hidden: false},
          {id: 4,label: "Node 4", hidden: true},
          {id: 5,label: "Node 5", hidden: false},
          {id: 6,label: "Node 6", hidden: false}
        },
        /*Use the expression for preparing the dictionary of edges in case of database retrieval*/
        local!edges:{
          { from: 1, to: 2 },
          { from: 1, to: 3 },
          { from: 1, to: 4 },
          { from: 4, to: 5 },
          { from: 4, to: 6 }
        },
        networkGraphField(
          label: "Network Graph Field",
          labelPosition: "ABOVE",
          validations: {},
          height: "SHORT",
          nodes: local!nodes,
          edges: local!edges,
          nodeOptions: {},
          edgeOptions: {
            arrows: "to"
          },
          groups: {},
          layout: {
            hierarchical: {
              direction: "UD",
              sortMethod: "directed"
            }
          },
          interaction: {},
          physics: {
            barnesHut: {
              springLength: 200
            }
          },
          showBorder: true
        )
      )
    }
    

  • Hi Appcino @Appcino

    Expecting a reply at the earliest. 

    Any reference links and example implementation would be appreciated.