Network Graph Component

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?

• Vulnerability fixes

This plugin is not available for download. Could you please suggest where to get it or if there is any alternative?

Looking at this usability visjs.github.io/.../

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.