Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

Image nodes in network are square until interacted with #3203

Closed
lucaswerkmeister opened this issue Jun 23, 2017 · 10 comments
Closed

Image nodes in network are square until interacted with #3203

lucaswerkmeister opened this issue Jun 23, 2017 · 10 comments
Milestone
Patch Release v4...

Comments

@lucaswerkmeister
Copy link

After upgrading from vis 4.19.1 to 4.20.0, images in the network visualization are squeezed to square aspect ratio until the network is somehow interacted with, at which point they assume their correct aspect ratio. (Usually the switch happens as soon as you select a node, sometimes only upon deselection.)

We can reproduce this on Firefox and Chromium (both Ubuntu Xenial).

Small reproducer:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vis Network Image Aspect Ratio Test</title>
    <script src="node_modules/vis/dist/vis.js"></script>
    <link rel="stylesheet" href="node_modules/vis/dist/vis.css">
  </head>
  <body>
    <div id="mynetwork"></div>
    <script>
      new vis.Network(
        document.getElementById('mynetwork'),
        {
          nodes: new vis.DataSet([
            { id: 1, label: 'Test node', shape: 'image', image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Aspect-ratio-16x9.svg/320px-Aspect-ratio-16x9.svg.png' }
          ]),
          edges: new vis.DataSet([])
        },
        {}
      );
    </script>
  </body>
</html>

(Assumes that vis is in node_modules; adjust the paths in <head> if necessary.)

Before interacting with the graph:
screenshot from 2017-06-23 13-32-57
After selecting and deselecting the node:
screenshot from 2017-06-23 13-33-04

From a quick glance over the release notes, #3010 sounds like it might be responsible for this.
@lucaswerkmeister
Copy link
Author

Here’s a live example with a slightly larger graph on query.wikidata.org: http://tinyurl.com/yazbfwy8 – as soon as you click one of the nodes, all of the images correct their aspect ratio (so it’s not per-node – I forgot to mention that in the issue description).

(Note that we might roll back to 4.19.1, which would break the live example. See T168714 for more information on what we’re doing about this bug.)

@wimrijnders
Copy link
Contributor

Confirmed. I've seen this happen as well with SVG's.

@wimrijnders
Copy link
Contributor

Analysis:

  1. The Network instance is loaded and running before the images actually load. this can be due to the delayed loading through the network connection. When the images are actually loaded, an event is emitted to the renderer, which doesn't honor the event, because it thinks it's redrawing already.

  2. Due to the delayed loading of the images, the nodes initially take the default node sizes. Because the previous event never gets processed, the sizes aren't recalculated until there is a reason to.

I've tried forcing the event, without success. I think the next thing to try is to force the resizing within the nodes until the images are there. I still have trouble fathoming why it's going wrong. Will keep you posted.

@wimrijnders
Copy link
Contributor

OK, have a fix for this. Are you capable of patching it in the vis source? This would be the quickest way to fix the issue for you.

@lucaswerkmeister
Copy link
Author

I’m not sure if that’s possible, I’m not responsible for deployment – let’s ask @smalyshev :)

@wimrijnders
Copy link
Contributor

The alternative is that I supply you with an interim version with a fix. Is that acceptable? You will have to wait till monday, though.

wimrijnders added a commit to wimrijnders/vis that referenced this issue Jun 24, 2017
@wimrijnders
Set dimensions properly of images on initialization.
aa91d65 
Fix for almende#3203

Image nodes were assigned the default size on initialization, leading to very compressed images.
This fix adjusts the default size as soon as the images used have been loaded.

The approach for dealing with this has been adapted from `CircularImage`.
@wimrijnders wimrijnders mentioned this issue Jun 24, 2017
Merged
@wimrijnders
Copy link
Contributor

wimrijnders commented Jun 24, 2017 •
edited
Loading

I've submitted a PR for this issue in the hope that it can be accepted for the release planned this weekend. This would avoid any problems with deployment on your side.

Update: The fix made it into the next release, which is planned to go live this week.

yotamberk pushed a commit that referenced this issue Jun 24, 2017
@wimrijnders @yotamberk
Set dimensions properly of images on initialization. (#3205)
ff5916d 
* Set dimensions properly of images on initialization.

Fix for #3203

Image nodes were assigned the default size on initialization, leading to very compressed images.
This fix adjusts the default size as soon as the images used have been loaded.

The approach for dealing with this has been adapted from `CircularImage`.

* Fixed tabs
@lucaswerkmeister
Copy link
Author

Thanks, now I can confirm that the issue seems to be fixed.

@wimrijnders
Copy link
Contributor

OK, great! You must have gotten a notification of the new release, TIL.

@lucaswerkmeister
Copy link
Author

No, just a notification that this issue was closed :)

primozs pushed a commit to primozs/vis that referenced this issue Jan 3, 2019
@wimrijnders
Set dimensions properly of images on initialization. (almende#3205)
12a5ab6 
* Set dimensions properly of images on initialization.

Fix for almende#3203

Image nodes were assigned the default size on initialization, leading to very compressed images.
This fix adjusts the default size as soon as the images used have been loaded.

The approach for dealing with this has been adapted from `CircularImage`.

* Fixed tabs
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
Patch Release v4.20.1
Development

No branches or pull requests
3 participants
@wimrijnders @lucaswerkmeister @yotamberk