Using React + Redux, whenever i change something in my store in redux, and it renders the change (for example opening a drawer) , an additional event listener for both mouseover and mouseout seems to be added, slowing down the rendered graphs significantly with each change.
const WorldMap = ({data}) => {
return {
<Vega spec={spec} data={data}>
}
}
const spec = {
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": "width.value",
"height": 400,
"autosize": "none",
"encode": {
"update": {
"fill": {"signal": "background"}
}
},
"signals": [
{
"name": "width",
"value": 400,
"update": "(containerSize()[0] || 400)",
"on": [{
"events": {"source": "window", "type": "resize"},
"update": "containerSize()[0]"
}]
},
{
"name": "type",
"value": "mercator"
},
{
"name": "scale", "value": 300,
"on": [{
"events": {"type": "wheel", "consume": true},
"update": "clamp(scale * pow(1.0005, -event.deltaY * pow(16, event.deltaMode)), 200, 1000)"
}]
},
{
"name": "cloned",
"value": null,
"on": [{
"events": "mousedown",
"update": "copy('projection')"
}]
},
{
"name": "start",
"value": null,
"on": [{
"events": "mousedown",
"update": "invert(cloned, xy())"
}]
},
{
"name": "angles",
"value": [0, 0],
"on": [{
"events": "mousedown",
"update": "[rotateX, centerY]"
}]
},
{
"name": "drag", "value": null,
"on": [{
"events": "[mousedown, window:mouseup] > window:mousemove",
"update": "invert(cloned, xy())"
}]
},
{
"name": "delta", "value": null,
"on": [{
"events": {"signal": "drag"},
"update": "[drag[0] - start[0], start[1] - drag[1]]"
}]
},
{
"name": "rotateX", "value": 0,
"on": [{
"events": {"signal": "delta"},
"update": "angles[0] + delta[0]"
}]
},
{
"name": "centerY", "value": 50,
"on": [{
"events": {"signal": "delta"},
"update": "clamp(angles[1] + delta[1], -60, 60)"
}]
},
{"name": "tx", "update": "width / 2"},
{"name": "ty", "update": "height / 2"},
{"name": "graticuleDash", "value": 0},
{"name": "borderWidth", "value": 1},
{"name": "background", "value": "#ffffff"}
],
"projections": [
{
"name": "projection",
"type": {"signal": "type"},
"scale": {"signal": "scale"},
"rotate": [{"signal": "rotateX"}, 0, 0],
"center": [0, {"signal": "centerY"}],
"translate": [{"signal": "tx"}, {"signal": "ty"}]
}
],
"data": [{"name": "states"},
{
"name": "world",
"url": "world-110m.json",
"format": {
"type": "topojson",
"feature": "countries"
},
"transform": [
{"type": "lookup", "from": "states", "key": "id", "fields": ["id"], "values": ["state"]}
]
},
{
"name": "graticule",
"transform": [
{"type": "graticule"}
]
}
],
"marks": [
{
"type": "shape",
"from": {"data": "world"},
"encode": {
"update": {
"strokeWidth": {"signal": "+borderWidth"},
"stroke": {"value": "#ffffff"},
"fill": [
{"test": "datum.state === null", "value": "#03ABE5"},
{"test": "datum.state", "value": "#6CC74B"},
{"test": "!datum.state", "value": "red"},
{"value": "#03ABE5"}],
"zindex": {"value": 0}
},
"hover": {
"strokeWidth": {"value": "2"},
"stroke": {"value": "black"},
"zindex": {"value": 1}
}
},
"transform": [
{"type": "geoshape", "projection": "projection"}
]
}
]
}