Vega: Cannot get dynamic data into strokeDash field

[ege]

I am in the process of creating a sequence diagram using Vega viz. The following code is the approach I'm using.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "Sequence Diagram",
  "padding": 5,
  "data": [
    {
      "name": "events",
      "values": [
        {
          "label": "message 1",
          "label-position": 100,
          "start": 1,
          "end": 2,
          "arrow-head": "triangle-right",
          "triangle-offset": -2,
          "dash": [0,0],
          "group": 1
        },
        {
          "label": "message 2",
          "label-position": -150,
          "start": 2,
          "end": 1,
          "arrow-head": "triangle-left",
          "triangle-offset": 8,
          "dash": [8,8],
          "group": 2
        }
      ]
    },
    {
      "name": "objects",
      "values": [
        {"name": "Object 1", "position": 1},
        {"name": "Object 2", "position": 2}
      ]
    }
  ],
  "scales": [
    {
      "name": "yscale",
      "type": "band",
      "range": [50, 200],
      "domain": {"data": "events", "field": "label"}
    },
    {
      "name": "xscale",
      "type": "band",
      "range": [0, 500],
      "domain": {"data": "events", "fields": ["start", "end"]}
    },
    {
      "name": "color",
      "type": "linear",
      "range": {"scheme": "set1"},
      "domain": {"data": "events", "field": "group"}
    }
  ],
  "marks": [
    {
      "type": "text",
      "from": {"data": "objects"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "position", "offset": -30},
          "y": {"value": -25},
          "fill": {"value": "#000"},
          "text": {"field": "name"},
          "fontSize": {"value": 15},
          "fontWeight": {"value": "bold"}
        }
      }
    },
    {
      "type": "rect",
      "from": {"data": "objects"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "position", "offset": -45},
          "y": {"value": -45},
          "width": {"value": 90},
          "height": {"value": 30},
          "stroke": {"value": "#000"}
        }
      }
    },
    {
      "type": "rect",
      "from": {"data": "objects"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "position"},
          "y": {"value": -15},
          "width": {"value": 5},
          "height": {"value": 200},
          "fill": {"value": "#999"}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "events"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "start"},
          "y": {"scale": "yscale", "field": "label", "offset": -4},
          "dx": {"field": "label-position"},
          "fill": {"value": "#000"},
          "text": {"field": "label"},
          "fontSize": {"value": 13}
        }
      }
    },
    {
      "type": "rect",
      "from": {"data": "events"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "start"},
          "x2": {"scale": "xscale", "field": "end"},
          "y": {"scale": "yscale", "field": "label"},
          "stroke": {"scale": "color", "field": "group"},
          "strokeWidth": {"value": 2},
          "strokeDash": {"field": "dash"}
        }
      }
    },
    {
      "type": "symbol",
      "from": {"data": "events"},
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "end",
            "offset": {"field": "triangle-offset"}
          },
          "x2": {"scale": "xscale"},
          "y": {"scale": "yscale", "field": "label"},
          "height": {"value": 4},
          "fill": {"scale": "color", "field": "group"},
          "shape": {"field": "arrow-head"}
        }
      }
    }
  ]
}

The following is the result of the above code.

I wanted to make message2 a dashed-line using dynamic values. I have used the strokeDash field as seen in the 3rd rect mark in the above code.

According to the documentation, the strokeDash field needs to have an array of two values; stroke and space. Adding an array to the data-set in the Vega code works fine, as you can see from the above code (see dash field in the data-set).

However, the problem arises when I try to transfer the same data to an index as I cannot find a way to add the dash field into the index. I tried adding the two values as separate fields; stroke & space, in the data-set of the above code and read it using strokeDash field as follows.

"strokeDash": {"fields": ["stroke", "space"]}

It won't show any errors and apparently, it won't read the values at all as the diagram turns out to be like the following.

How can I make the message2 a dashed-line using dynamic data which can also be added to an index? Any help would be appreciated.

[markov00 (Marco Vettorello)]

Hi,
have you tried to add the dash field using a scripted field? https://www.elastic.co/guide/en/kibana/current/scripted-fields.html

[ege]

Hi @markov00 , thank you so much for the reply. No, I did not try using scripted-fields. I will try that out too.

[aaron-nimocks]

You might be able to use Extent Transform to create this depending on that different variations you are expecting to use.

{"type": "extent", "field": "message1", "signal": "dash1"}
{"type": "extent", "field": "message2", "signal": "dash2"}

If your incoming data from message1 has a min of 0 and max 0 then it will create a signal with the value of [0,0] and then it can be used in strokeDash.

[ege]

Hi again @aaron-nimocks! Thank you for the reply. I will try Extent Transform too to check if it is possible to achieve it.

[ege]

Adding scripted fields worked! Added it to a Painless script Vega code itself to create the array. Thank you so much @markov00!

I tried adding Extent Transform too as you said, @aaron-nimocks. The data which create the messages come from one index and according to what I understood about Extent Transform, I need to add it per message and it becomes a problem when all the data for messages comes from one index. But, thank you for the suggestion and I learnt something new from it too!