Vega plots for ZX-diagram

zx_vega.jl

using Vega
vg"""
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 200,
  "height": 100,
  "padding": 20,
  "autosize": "none",

  "signals": [
    {
      "name": "orient", "value": "horizontal",
      "bind": {"input": "select", "options": [ "horizontal", "vertical"]}
    },
    {
      "name": "shape", "value": "diagonal",
      "bind": {"input": "select", "options": ["line", "arc", "curve", "diagonal", "orthogonal"]}
    },
    {
      "name": "vSize", "value": 500,
      "bind": {"input": "range", "min": 100, "max": 1000, "step": 10}
    },
    {
      "name": "strokeWidth", "value": 1.5,
      "bind": {"input": "range", "min": 0, "max": 3, "step": 0.05}
    },
    {
      "name": "edgeWidth", "value": 1.5,
      "bind": {"input": "range", "min": 0, "max": 3, "step": 0.05}
    },
    {
      "name": "whichSymbol",
      "value": {},
      "on": [
        {"events": "symbol:mousedown", "update": "datum"},
        {"events": "*:mouseup", "update": "{}"}
      ]
    },
    {
      "description": "State variable for active node newLoc status.",
      "name": "newLoc", "value": false,
      "on": [
        {
          "events": "symbol:mouseout[!event.buttons], window:mouseup",
          "update": "false"
        },
        {
          "events": "symbol:mouseover",
          "update": "{x: x(), y: y()}"
        },
        {
          "events": "[symbol:mousedown, window:mouseup] > window:mousemove!",
          "update": "{x: x(), y: y()}"
        }
      ]
    }
  ],

  "data": [
    {
      "name": "spiders",
      "values": [
        {"id": 1, "x": 25, "y": 0, "spider_type": "In"},
        {"id": 2, "x": 175, "y": 0, "spider_type": "Out"},
        {"id": 3, "x": 25, "y": 75, "spider_type": "In"},
        {"id": 4, "x": 175, "y": 75, "spider_type": "Out"},
        {"id": 5, "x": 62, "y": 0, "spider_type": "H"},
        {"id": 6, "x": 100, "y": 0, "spider_type": "Z"},
        {"id": 7, "x": 100, "y": 75, "spider_type": "X"}
      ],
      "transform": [
        {
          "type": "formula",
          "expr": "datum.spider_type === 'Z' ? 'circle' : (datum.spider_type === 'X' ? 'circle' : (datum.spider_type === 'H' ? 'square' : 'circle'))",
          "as":   "shape"
        },
        {
          "type": "formula",
          "expr": "datum.spider_type === 'Z' ? '#389826' : (datum.spider_type === 'X' ? '#CB3C33' : (datum.spider_type === 'H' ? 'yellow' : '#9558B2'))",
          "as":   "color"
        }
      ],
      "on": [
        {
          "trigger": "newLoc", "modify": "whichSymbol", "values": "newLoc && {x: newLoc.x, y: newLoc.y}"
        }
      ]
    },
    {
      "name": "edges",
      "values": [
        {"src":2, "dst":6, "isHadamard": true},
        {"src":1, "dst":5, "isHadamard": false},
        {"src":5, "dst":6, "isHadamard": false},
        {"src":6, "dst":7, "isHadamard": false},
        {"src":3, "dst":7, "isHadamard": false},
        {"src":4, "dst":7, "isHadamard": false}
      ],
      "transform": [
        {
          "type": "lookup",
          "from": "spiders",
          "key": "id",
          "fields": ["src", "dst"],
          "as": ["source", "target"]
        },
        {
          "type": "linkpath",
          "sourceX": "source.x",
          "sourceY": "source.y",
          "targetX": "target.x",
          "targetY": "target.y",
          "orient": {"signal": "orient"},
          "shape": {"signal": "shape"}
        },
        {
          "type": "formula",
          "expr": "datum.isHadamard ? '#4063D8' : 'black'",
          "as":   "color"
        }
      ]
    }
  ],

  "marks": [
    {
      "type": "path",
      "from": {"data": "edges"},
      "encode": {
        "enter": {
          "stroke": {"field": "color"}
        },
        "update": {
          "strokeWidth": {"signal": "edgeWidth"},
          "path": {"field": "path"}
        }
      }
    },
    {
      "type": "symbol",
      "from": {"data": "spiders"},
      "encode": {
        "enter": {
          "shape": {"field": "shape"},
          "fill": {"field": "color"}
        },
        "update": {
          "x": {"field": "x"},
          "y": {"field": "y"},
          "size": {"signal": "vSize"},
          "strokeWidth": {"signal": "strokeWidth"},
          "stroke": {"value": "black"}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "spiders"},
      "encode": {
        "enter": {
          "fill": {"value": "lightgray"},
          "text": {"field": "phase"}
        },
        "update": {
          "opacity": {"value": 1},
          "x": {"field": "x"},
          "y": {"field": "y"},
          "dy": {"value": 1},
          "align": {"value": "center"},
          "baseline": {"value": "middle"}
        }
      }
    }
  ]
}
"""