Page MenuHomePhabricator

Vega's Graph extension on wiki not handling "test" in "update" correctly (apparently)
Closed, ResolvedPublic

Description

The following graph works in Vega Editor but not on Wiki. Specifically - when you hover mouse over line, it should switch width from 2px to 5px and label should pop up in the top. But the line is 1px wide always and no text appears. It works correclty in Vega editor.

It looks like there's an issue with the "test" part in the update clause (a guess but based on some trial and error).

{
  "version": 2,
  "width": 1000,
  "height": 500,
  "signals": [
    {
      "name": "tooltip",
      "init": {},
      "streams": [
        {"type": "line:mouseover", "expr": "datum"},
        {"type": "line:mouseout", "expr": "{}"}
      ]
    }
  ],
  "data": [
    {
      "name": "stocks",
      "values": [

 {"date": "2008-09-20T00:00:00","points": 1984.733, "symbol": "Dino"},
 {"date": "2009-04-04T00:00:00","points": 2001.437, "symbol": "Dino"},
 {"date": "2009-05-01T00:00:00","points": 1984.988, "symbol": "Dino"},
 {"date": "2009-06-20T00:00:00","points": 1969.684, "symbol": "Dino"},
 {"date": "2009-06-28T00:00:00","points": 1955.428, "symbol": "Dino"},
 {"date": "2009-08-08T00:00:00","points": 1957.466, "symbol": "Dino"},
 {"date": "2009-08-16T00:00:00","points": 1984.000, "symbol": "Fide"},
 {"date": "2009-09-19T00:00:00","points": 1976.940, "symbol": "Fide"},
 {"date": "2009-09-27T00:00:00","points": 1954.666, "symbol": "Dino"},
 {"date": "2010-07-17T00:00:00","points": 1964.047, "symbol": "Fide"},
 {"date": "2010-08-21T00:00:00","points": 1948.917, "symbol": "Fide"},
 {"date": "2010-09-04T00:00:00","points": 1951.207, "symbol": "Fide"},
 {"date": "2010-10-09T00:00:00","points": 1949.366, "symbol": "Fide"},
 {"date": "2011-04-17T00:00:00","points": 1946.346, "symbol": "Fide"},
 {"date": "2012-01-14T00:00:00","points": 1938.398, "symbol": "Fide"}
        ],
      "format": {"parse": {"points":"number", "date":"date"}}
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "time",
      "range": "width",
      "domain": {"data": "stocks", "field": "date"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": false,
      "domain": {"data": "stocks", "field": "points"}
    },
    {
      "name": "color", 
      "type": "ordinal", 
      "domain": {"data": "stocks", "field": "symbol"},
      "range": "category10"
    }
  ],
  "axes": [
    {"type": "x", "scale": "x", "tickSizeEnd": 0},
    {"type": "y", "scale": "y"}
  ],
  "marks": [
    {
		"type": "group",
		"from": {
			"data": "stocks",
			"transform": [{"type": "facet", "groupby": ["symbol"]}]
		},
		"marks": [
			{
				"type": "line",
				"properties": {
					"enter": 
					{
						"x": {"scale": "x", "field": "date"},
						"y": {"scale": "y", "field": "points"},
						"stroke": {"scale": "color", "field": "symbol"}
					},
					"update": 
					{
						"strokeWidth": [
							{
								"test": "datum._id == tooltip._id",
						    "value": 5
							},
							{
								"value": 2
							}
						]
				}
				}
			},
			{
				"type": "text",
				
				"properties": {
					"enter": {
						"x": {"value": 500},
						"y": {"scale": "y", "field": "price"},
            "align": {"value": "center"},
            "fontSize": {"value": 24},
						"fill": {"scale": "color", "field": "symbol"},
						
						"baseline": {"value": "middle"}
					},
					"update": {
					  "text": [
					   {
					    "field": "symbol",
							"test": "datum._id == tooltip._id"
					  },
					  {"value": ""}
					  ]
					}
					  
				}
			}
		]	
    }
  ]
}

Event Timeline

Does it work in the graph sandbox? (Special page)

I don't know as I wasn't able to make

https://www.mediawiki.org/wiki/Special:GraphSandbox

work with any graph whether taken from mediawiki tutorial or Vega's sample.

Make sure you remove the surrounding <graph> tags. Try copying the simplest
data containing sample graph from Vega Editor to it. I won't be able to
check for another 10 hrs.

I didn't use <graph> and I already did that with simplest. Here (I just removed some line breaks to fit everything in 1 screenshot):

I don't know.

nograph.png (1×1 px, 156 KB)

Ah, your special page didn't initialize. I suspect this is because you have
enabled debugging via a cookie. Try it in privacy mode without the magic
debug cookies or headers. Also see if enwiki or others have that problem.
The nonfunctioning graph sandbox in debug mode is a resource loader graph
bug that I will need to fix

Actually this is mediawiki and I tried it also on i.e. Edge. I don't know what is debug cookie but privacy mode doesn't change anything

@Nimdil , looks like it is a bug in Vega core that was fixed in upstream. We need to update vega lib version that we use.

Can I for my wiki update Vega files so that it will work? Like should I replace 4 files mentioned in your link and it will work or it's not just as smiple?

@Nimdil you could try, but I will update it fairly soon, so don't think its worth the bother. If you want to help, any graph-related documentation or templates are welcome :)

Change 287295 had a related patch set uploaded (by Yurik):
Updated upstream dependencies

https://gerrit.wikimedia.org/r/287295

Change 287295 merged by jenkins-bot:
Updated upstream dependencies

https://gerrit.wikimedia.org/r/287295

Nice! Should I just fetch master branch from git now?

Either I did s.t. wrong or it doesn't work, at least for me:
http://pl.dogsportpedia.org/wiki/Obedience/ELO
I saw there is some kind of error in JS console but I might not be able to look into it before late evening (also my JS is rusty). Any suggestions would be welcome.

Worth to note I get a warning OutputPage::getModuleStyles: style module should define its position explicitly: ext.graph.styles ResourceLoaderFileModule but that's almost surely irrelevant for this matter.

TheDJ claimed this task.
TheDJ added a subscriber: TheDJ.

I think this was resolved back in 2016 with the update.