Page MenuHomePhabricator

Fix dimensions of rendered HTML to fit the dynamic contents
Closed, ResolvedPublic

Description

Currently a graph tag needs to manually be provided with the correct dimensions. These dimensions can only be derived from the JS rendered graph. But there is no easy way for editors to find these dimensions unless you know how to use a web inspector.

Add a piece of JS which checks the provided dimensions with the actual dimensions after load and then throw a mw.notify when the code is being previewed, to tell the user about the correct dimensions. It's ugly, but I see no better way.

Investigation: Right this cannot work, because Vega2 doesn't support it yet. When we switch to newer versions, we should inject:

"autosize": {
  "type": "fit",
  "contains": "padding"
},

That should make it adhere to specified width and height. We also need to consider responsive sizing (width="contains") and how to handle that in the future.

Event Timeline

TheDJ renamed this task from Add dimensions mismatch check to JS loader of graphs to Fix dimensions of rendered HTML to fit the dynamic contents.Jan 21 2022, 12:40 PM
TheDJ updated the task description. (Show Details)

@TheDJ what would this task look like in Vega 5+?

@Jdlrobson it means that any Vega graph spec to be rendered has to enforce/override the autosize options listed in the description. I believe that is at a the main level of the graph specification (where we also look at width and version).

https://vega.github.io/vega-lite/docs/size.html
https://vega.github.io/vega/docs/specification/

The option will force it to fit within the dimensions specified using width/height in the graph specification. If we do so, we no longer need the fallbackWidth/fallbackHeight on the graph, as you'd be able to know that it will fit within the width and height specified for the graph, unlike now, where it will draw all legends and axis info outside those dimensions giving you a 'random' / unpredictable size after the JS loads the graph. Before when we had graphoid, graphoid would render the graph, we would retrieve the final image dimensions from Graphoid and using that information would ensure that the generated HTML reserved the appropriate space for both the image and the live graph. Now it just uses width/height from the spec and will bleed outside of it, or you have to override width/height with these fallback attributes.

fallbackWidth and fallbackHeight always were a clutch that we wanted to get rid of long term. It could be considered to allow you to specify width/height on the tag, and have that override the width/height in the graph spec, but I'm not sure that is needed (we are dealing with vector definitions here, scaling shouldn't really matter much as long as A/R is preserved).

Change 910796 had a related patch set uploaded (by Jdlrobson; author: TheDJ):

[mediawiki/extensions/Graph@master] Restrict graph to fit within the specified dimensions

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

Jdlrobson updated Other Assignee, added: Jdlrobson.

Change 910796 merged by jenkins-bot:

[mediawiki/extensions/Graph@master] Restrict graph to fit within the specified dimensions

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