Page MenuHomePhabricator

Interactive graphs are not loading due to resourceloader core changes
Closed, ResolvedPublic

Description

When using "Show preview" on a page with a graph, a blank space is shown in the space where the graph should be. An error also shows up: "TypeError: Cannot read property 'svg' of undefined" or "ReferenceError: d3 is not defined".

To reproduce: Go to https://www.mediawiki.org/w/index.php?title=Extension:Graph/Demo&action=edit and press "Show preview".

Alternative repo (good for local dev): navigate to Special:GraphSandbox and if four-panel view loads ok and the text editor initializes, copy/paste sample code to it. You might need to add "version": 2 at the top.

Proposed patch partially fixes it, but its not fully initializing yet.

Event Timeline

I can confirm seeing no graph in preview but no error as well.

Aklapper renamed this task from Graphs don't display on preview to Graphs don't display on preview: "TypeError: Cannot read property 'svg' of undefined" or "ReferenceError: d3 is not defined".May 2 2016, 6:54 AM

You'll need to add a small compatibility script to the affected ResourceLoader modules, like bc4e07b6f63b0865a14aef981366a79d10329c87 did for Moment and OOjs.

(Or start using the new style with mw.loader.require rather than the global.)

Change 286474 had a related patch set uploaded (by Yurik):
Match modern module loading in core

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

The above patch partially solves it, but still does not work because vg.util is still not being initialized. Some help from js gurus?

To test, navigate to Special:GraphSandbox and if four-panel view loads ok and the text editor initializes (which it doesn't at the moment), copy/paste sample code to it. You might need to add "version": 2 at the top.

Yurik renamed this task from Graphs don't display on preview: "TypeError: Cannot read property 'svg' of undefined" or "ReferenceError: d3 is not defined" to Interactive graphs are not loading due to resourceloader core changes.May 2 2016, 4:47 PM
Yurik updated the task description. (Show Details)
Yurik added a subscriber: Jdlrobson.

There seems to be 2 problems here:

  1. You are sharing a module registration across multiple libraries - split up topojson, vega and d3 into separate ResourceLoaders. That is likely to be confusing things.
  1. Vega seems to create its own module loading system. I think it's likely that somewhere in the code rather than use it's local variable module it uses the global module and as a result exporting overrides anything previously defined. This will take a bit longer to debug as I'm unfamiliar with Vega.

Note: I'm at an offsite this week so not show how much I'm going to be able to debug #2 @Krinkle do you have any bandwidth?

Aklapper triaged this task as High priority.May 3 2016, 6:26 PM

Change 286474 merged by jenkins-bot:
Match modern module loading in core

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

Change 286774 had a related patch set uploaded (by Dereckson):
Match modern module loading in core

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

Change 286775 had a related patch set uploaded (by Dereckson):
Match modern module loading in core

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

Change 286774 merged by jenkins-bot:
Match modern module loading in core

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

Change 286775 merged by jenkins-bot:
Match modern module loading in core

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

Yurik claimed this task.

Did you test debug mode?
Also the modules still mix libraries e.g. "ext.graph.vega2" has topojson and Vega
That's gonna bite you in the bottom in future. I would strongly advise you split those into separate reusable libraries (and share dependencies between ext.graph.vega2 and ext.graph.Vega)

@Jdlrobson I did - see https://www.mediawiki.org/wiki/Extension:Graph/Demo?debug=true

Jon, i will refactor it in master. We needed an urgent fix that would solve the immediate issue that everyone was having with the minimal code changes. The moment patch worked, I deployed it.

Is there a proper way to wrap external libs so that they can be shared between extensions? I'm sure there are other ext that might benefit from both d3 and topojson libs.

Understood! Just wanted to check that comment hadn't been lost and I had issues locally replicating the fix.

I'd suggest for the time being just creating ext.graph.d3 and ext.graph.topojson

If any other extensions start using d3 we might want to consider promoting it to core given it fulfills a need not fulfilled elsewhere!