Issues with signals in VEGA visualization

Hey all,

I'm using ELK version 7.13.3

Using the code below, I'm trying to draw nodes connected to networks.
The default fill of the nodes is blue, but when a user is clicking a node, it will be filled with red and the nodes connected to it are supposed to be filled with white (double click to reset).

I have 2 issues, which may be related:

  1. When trying to use the inspect option, I can't see the "link-data" data set, or the "selected" signal (although, if I comment out the "marks", I will be able to see the "link-data" data set).
  2. When clicking a node, the nodes connected to it aren't filled in white...

I think the issue is somewhere with the force transform...

I should also note that using the same code did work on ELK 7.7, so I'm not too sure what changed...

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "background": "black",
  "config": {"kibana":{"hideWarnings":"true"}}
  "padding": {"top": 150, "left": 100, "bottom": 150, "right": 100},
  "signals": [
		{
          "name": "active",
          "on": [
            {"events": "symbol:click", "update": "datum.node_id"},
            {"events": "symbol:dblclick", "update": "{}"}
          ]
        },
        {"name": "colorIn", "value": "firebrick"},
        {"name": "colorOut", "value": "white"},
   
   
  ],
  "data": [
    {
      "name": "network_properties",
      "values": [
        {
          "NetName": "NetType1",
          "net_level": 1,
          "color": "#FDFEFE",
          "width": 2,
          "dashes": [4, 4]
        },
		 {
          "NetName": "NetType2",
          "net_level": 1,
          "color": "#FDFEFE",
          "width": 2,
          "dashes": [4, 4]
        },
  ]
    },
     
     {
      "name": "node-data",
      "values": [
	   {
          "key": {
            "Net": "NetType1",
            "node_id": "1"
          },
          "doc_count": 8,
          "node_id": "1",
          "Net": "NetType1",
          "net_level": 1,
        }, 
		{
          "key": {
            "Net": "NetType2",
            "node_id": "1"
          },
          "doc_count": 8,
          "node_id": "1",
          "Net": "NetType2",
          "net_level": 1,
        },
        {
          "key": {
            "Net": "NetType1",
            "node_id": "2"
          },
          "doc_count": 8,
          "node_id": "2",
          "Net": "NetType1",
          "net_level": 1,
        }
      {
          "key": {
            "Net": "NetType2",
            "node_id": "3"
          },
          "doc_count": 8,
          "node_id": "3",
          "Net": "NetType2",
          "net_level": 1,
        }
	  ]
      "transform": [
        {"type": "formula", "expr": "datum.key.node_id", "as": "node_id"},
        {"type": "formula", "expr": "datum.key.Net", "as": "Net"},
        {
          "type": "aggregate",
          "groupby": ["node_id"],
          "fields": ["net_level"],
          "ops": ["max"],
          "as": ["net_level"]
        },
        {"type": "identifier", "as": "index"},
        {"type": "formula", "expr": "datum.index-1", "as": "index"},
        
      ]
    },
    {
      "name": "link-data",
	  "values":[
		{
			"Net":"NetType1",
			"fromNode":"1"
			"toNode":"2"
		},
		{
			"Net":"NetType1",
			"fromNode":"2"
			"toNode":"1"
		},
		{
			"Net":"NetType2",
			"fromNode":"1"
			"toNode":"3"
		},
		{
			"Net":"NetType2",
			"fromNode":"3"
			"toNode":"1"
		}
		
	  ]
	  
    
      "transform": [
          {
          "type": "formula",
          "expr": "datum.Net + ' ' + datum.fromNode + ' ' + datum.toNode",
          "as": "lookUpKey"
        },
        {
          "type": "lookup",
          "from": "network_properties",
          "key": "NetName",
          "fields": ["Net"],
          "as": ["net_properties"],
          "default": 0
        },
        {
          "type": "lookup",
          "from": "node-data",
          "key": "node_id",
          "fields": ["toNode"],
          "values": ["index"],
          "as": ["target"],
          "default": 0
        },
        {
          "type": "lookup",
          "from": "node-data",
          "key": "node_id",
          "fields": ["fromNode"],
          "values": ["index"],
          "as": ["source"],
          "default": 0
        },
       
      ]
    }
	{
          "name": "selected",
          "source": "link-data",
          "transform": [
            {
              "type": "filter",
              "expr": "datum.fromNode === active || datum.toNode === active"
            }
          ]
        }
  ],
       "scales": [
      
        {
          "name": "x-scale",
          "type": "linear",
          "domain": {"data": "node-data", "field": "index"},
          "range": "width"
        },
        {
          "name": "y-scale",
          "type": "linear",
          "domain": {"data": "node-data", "field": "net_level"},
          "range": [390, 0]
        }
      ],

    
    
       "marks": [
        {
          "name": "nodes",
          "type": "symbol",
          "zindex": 1,
          "from": {"data": "node-data"},
          "encode": {
            "enter": {
              "fill": {"value": "blue"},
              "stroke": {"value": "white"},
              "x": {"scale": "x-scale", "field": "index"},
              "y": {"scale": "y-scale", "field": "net_level"}
            },
            "update": {
              "size": [
                {"test": "datum.node_id === active", "value": 500},
                {
                  "test": "indata('selected', 'fromNode', datum.node_id)",
                  "value": 250
                },
                {"value": 100}
              ],
              "fill": [
                {"test": "datum.node_id === active", "signal": "colorIn"},
                {
                  "test": "indata('selected', 'fromNode', datum.node_id)",
                  "signal": "colorOut"
                },
                {"value": "blue"}
              ],
              "cursor": {"value": "pointer"},
              "x": {"scale": "x-scale", "field": "index"},
              "y": {"scale": "y-scale", "field": "net_level"}
            },
            "hover": {
              "tooltip": {"signal": "{'node_id':datum.node_id,'Hier':datum.net_level}"},
              "strokeWidth": [{"value": 1}]
            }
          },
          "transform": [
            {
              "type": "force",
              "iterations": 10,
              "restart": false,
              "static": true,
              "signal": "force",
              "forces": [
                {"force": "nbody"},
                {
                  "force": "link",
                  "links": "link-data",
                  "distance": {"value": 1}
                }
              ]
            }
          ]
        },
        {
          "type": "path",
          "from": {"data": "link-data"},
          "interactive": false,
          "encode": {
            "update": {
              "stroke": [
                
                {"field": "net_properties.color"}
              ],
              "strokeWidth": [
                {
                  "test": "datum.fromNode === active || datum.toNode === active",
                  "value": 5
                },
                {"field": "net_properties.width"}
              ],
              "strokeDash": [
                {"field": "net_properties.dashes"}
              ]
            },
            "hover": {"strokeWidth": [{"value": 2}]}
          },
          "transform": [
            {
              "type": "linkpath",
              "require": {"signal": "force"},
              "shape": "curve",
              "sourceX": "datum.source.x",
              "sourceY": "datum.source.y",
              "targetX": "datum.target.x",
              "targetY": "datum.target.y"
            }
          ]
        }
        ]
    
}

Your issues seem to be caused by bugs in your Vega spec. I pasted your spec into the online Vega editor and was able to see exactly the same issues you described, including that link-data is missing because it's empty. I suggest looking through the online Vega editor to find the problems.

Edit: I think your problem is that {"force": "link", "links": "link-data", "distance": {"value": 1}} needs to be {"force": "link", "links": "link-data", "distance": 1} instead.

Link:

You're right that the VEGA editor is more... "sensitive", but I don't think that's the issue.
just to clear the point- when clicking one of the symbols using the editor, the x-y locations are completely lost... this doesn't happen when using Kibana.
I really think there's something funky going on after applying the force transform...

Ok, I just figured it out- the link-info is effected whenever a signal is generated.
for now I patched it by creating a duplicate data set.
not ideal, but it works

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "background": "black",
  "config": {"kibana": {"hideWarnings": "true"}},
  "padding": {"top": 150, "left": 100, "bottom": 150, "right": 100},
  "signals": [
    {
      "name": "active",
      "on": [
        {"events": "symbol:click", "update": "datum.node_id"},
        {"events": "symbol:dblclick", "update": "{}"}
      ]
    },
    {"name": "colorIn", "value": "firebrick"},
    {"name": "colorOut", "value": "white"}
  ],
  "data": [
    {
      "name": "network_properties",
      "values": [
        {
          "NetName": "NetType1",
          "net_level": 1,
          "color": "#FDFEFE",
          "width": 2,
          "dashes": [4, 4]
        },
        {
          "NetName": "NetType2",
          "net_level": 1,
          "color": "#FDFEFE",
          "width": 2,
          "dashes": [4, 4]
        }
      ]
    },
    {
      "name": "node-data",
      "values": [
        {
          "key": {"Net": "NetType1", "node_id": "1"},
          "doc_count": 8,
          "node_id": "1",
          "Net": "NetType1",
          "net_level": 1
        },
        {
          "key": {"Net": "NetType2", "node_id": "1"},
          "doc_count": 8,
          "node_id": "1",
          "Net": "NetType2",
          "net_level": 1
        },
        {
          "key": {"Net": "NetType1", "node_id": "2"},
          "doc_count": 8,
          "node_id": "2",
          "Net": "NetType1",
          "net_level": 1
        },
        {
          "key": {"Net": "NetType2", "node_id": "3"},
          "doc_count": 8,
          "node_id": "3",
          "Net": "NetType2",
          "net_level": 1
        }
      ],
      "transform": [
        {"type": "formula", "expr": "datum.key.node_id", "as": "node_id"},
        {"type": "formula", "expr": "datum.key.Net", "as": "Net"},
        {
          "type": "aggregate",
          "groupby": ["node_id"],
          "fields": ["net_level"],
          "ops": ["max"],
          "as": ["net_level"]
        },
        {"type": "identifier", "as": "index"},
        {"type": "formula", "expr": "datum.index-1", "as": "index"}
      ]
    },
    {
      "name": "link-info",
      "values": [
        {"Net": "NetType1", "fromNode": "1", "toNode": "2"},
        {"Net": "NetType1", "fromNode": "2", "toNode": "1"},
        {"Net": "NetType2", "fromNode": "1", "toNode": "3"},
        {"Net": "NetType2", "fromNode": "3", "toNode": "1"}
      ],
      "transform": [
        {
          "type": "formula",
          "expr": "datum.Net + ' ' + datum.fromNode + ' ' + datum.toNode",
          "as": "lookUpKey"
        },
        {
          "type": "lookup",
          "from": "network_properties",
          "key": "NetName",
          "fields": ["Net"],
          "as": ["net_properties"],
          "default": 0
        },
        {
          "type": "lookup",
          "from": "node-data",
          "key": "node_id",
          "fields": ["toNode"],
          "values": ["index"],
          "as": ["target"],
          "default": 0
        },
        {
          "type": "lookup",
          "from": "node-data",
          "key": "node_id",
          "fields": ["fromNode"],
          "values": ["index"],
          "as": ["source"],
          "default": 0
        }
      ]
    },
    {"name": "link-data", "source": "link-info"},
    {
      "name": "selected",
      "source": "link-info",
      "transform": [
        {
          "type": "filter",
          "expr": "datum.fromNode === active || datum.toNode === active"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x-scale",
      "type": "linear",
      "domain": {"data": "node-data", "field": "index"},
      "range": "width"
    },
    {
      "name": "y-scale",
      "type": "linear",
      "domain": {"data": "node-data", "field": "net_level"},
      "range": [390, 0]
    }
  ],
  "marks": [
    {
      "name": "nodes",
      "type": "symbol",
      "zindex": 1,
      "from": {"data": "node-data"},
      "encode": {
        "enter": {
          "fill": {"value": "blue"},
          "stroke": {"value": "white"},
          "x": {"scale": "x-scale", "field": "index"},
          "y": {"scale": "y-scale", "field": "net_level"}
        },
        "update": {
          "size": [
            {"test": "datum.node_id === active", "value": 500},
            {
              "test": "indata('selected', 'fromNode', datum.node_id)",
              "value": 250
            },
            {"value": 100}
          ],
          "fill": [
            {"test": "datum.node_id === active", "signal": "colorIn"},
            {
              "test": "indata('selected', 'fromNode', datum.node_id)",
              "signal": "colorOut"
            },
            {"value": "blue"}
          ],
          "cursor": {"value": "pointer"}
        },
        "hover": {
          "tooltip": {
            "signal": "{'node_id':datum.node_id,'Hier':datum.net_level}"
          },
          "strokeWidth": [{"value": 1}]
        }
      },
      "transform": [
        {
          "type": "force",
          "iterations": 10,
          "restart": false,
          "static": true,
          "signal": "force",
          "forces": [
            {"force": "nbody"},
            {"force": "link", "links": "link-data"}
          ]
        }
      ]
    },
    {
      "type": "path",
      "from": {"data": "link-data"},
      "interactive": false,
      "encode": {
        "update": {
          "stroke": [{"field": "net_properties.color"}],
          "strokeWidth": [
            {
              "test": "datum.fromNode === active || datum.toNode === active",
              "value": 5
            },
            {"field": "net_properties.width"}
          ],
          "strokeDash": [{"field": "net_properties.dashes"}]
        },
        "hover": {"strokeWidth": [{"value": 2}]}
      },
      "transform": [
        {
          "type": "linkpath",
          "require": {"signal": "force"},
          "shape": "curve",
          "sourceX": "datum.source.x",
          "sourceY": "datum.source.y",
          "targetX": "datum.target.x",
          "targetY": "datum.target.y"
        }
      ]
    }
  ]
}

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.