Network with 100% height set does not render correctly

[ghost]

I'm trying to use Network where the height/width needs to be dynamic for a responsive layout.

If I set the Network to a fixed height/width all works as expected, except resizing (obviously) won't change the canvas to fit.

But if I set height/width to 100%, the canvas correctly sizes to the width (including autoResize set to true) but I always end up with a 150px height canvas, whereas the height of the container div could comfortably be > 800px.

I've created a demo plunker to show the problem.

[abcbaby]

I've made a tweak to your code; Basically, you can't use %, you need to "px". Here is the new code example from your fork, look at your script.js:

http://plnkr.co/edit/B73VN9Kbew9KfCzYxUKs?p=preview

[ghost]

Problem is this isn't dynamic - my understanding is that to get the network autoResize to work, it needs to be in % not px - otherwise it won't think to resize (as it's still rendering at the fixed width). I assume on resize I could try to recalculate, but I need it to fill 100% of the container, rather than window size.

I'm using this in bootstrap where it's inside a 9 col div (where the full 12 col set are nested inside a 9 col div). I know from prior experience that trying to render svg/canvas to fill 100% of a container is not the easiest thing though.

[mojoaxel]

I'm closing this issue due to inactivity.
If you think this issue is still relevant please feel free to reopen!

[pjeutr]

I still see this happening with 4.20.1
Also using it within a bootstrap grid and see the canvas size set to height="150" initially
I can overwrite it in options with something like 500px, but 100% is not working

[pjeutr]

http://plnkr.co/edit/2FGTOd8v2GbmwGgeYAVu?p=preview
shows the problem. I also use GraphJs which scales fine.
Part of the problem for me of getting unreadable results is that visjs takes full width but only 150px height. If there would be a definable aspect ratio or something like height = .8 * width. It would look a lot better for me.

[wimrijnders]

@pjeutr Thanks for demo, that's useful. Makes it much easier to examine the issue.

[wimrijnders]

@pjeutr the funny thing is, I can't reproduce it on my computer. The layout looks just fine to me, even if I resize the browser window (linux+ firefox/chrome).

The plunker demo does display the autoscaling problem, though. Any way to force it?

[pjeutr]

@wimrijnders Thanks for looking into this. Just to be clear this is what I see on osx ( firefox / safari / chrome ) The red border is the size of the VisJS canvas.

What I'm looking for is something like this. In this case achieved by height:"350px" because
height:"100%" is not working for me.

[wimrijnders]

Yeah, my bad. I neglected to copy the CSS from plunker. I see it now as well.

Sorry to correct you, but you are using Chart.js in the second panel, not GraphJs. it had me confused for a while.

[pjeutr]

Sorry! Must have been because I use Graph as model name. Never heard of GraphJS before.

[wimrijnders]

OK, I can see it happening, so: Confirmed.

It's actually useful that you added the other module; since they are doing something right, I might be able to peek in their code and find out how they fix it. I'll keep you up to date.

[wimrijnders]

Here is where the magic happens. I think. Will verify.

For comparison, this is what Network does.

[wimrijnders]

This is essentially the problem. We need to ensure that the defaults for the canvas size, 300x150 px, do not get used. Canvas.js deals with it, Network must deal with it also.

[pjeutr]

Wow, w3c? Good find!
I grepped for 150 in de vis code and couldn't find it 😄

[wimrijnders]

Hehe, now we know where that 150 comes from. This headache will be solved soon.

[abcbaby]

I had this issue awhile back and here is how it resolved it. By default vis.js network height is 100% which is correct. However the default height for canvas, like @wimrijnders says, is 150px. Since the canvas is inside the 'mynetwork' div (default height: auto) tag, it's can only expand as big as the canvas, which is 150px height. In order to adjust to 100% of what YOU want, you have to calculate and adjust the height of the 'mynetwork' div tag, then the canvas can fully resize to whatever you want.

Here is a fork of your @pjeutr code, where i adjust the height of the div tag. You can take a look at: http://plnkr.co/edit/Kkz8SZDgv93yPRpRxckZ?p=preview

Hope this helps!

[wimrijnders]

@dragonzone Great, thanks. But where is the fix exactly in the demo? I can't seem to find it.

[wimrijnders]

The flicker is not too bad (not always, heartbeat frequency)

Aha. This is a giveaway of what's happening. Autoresize is refreshing about once per second, so you really are seeing this happening. There must be better solutions. I have a one-liner idea for this...

...also stops the resizing

Meaning, that the networks are still visible on screen but it doesn't resize along? This is something that can be focused on.

[pjeutr]

Correct, networks are still visible. But doesn't resize.
Throw in the one-liner and it's fixed!?

Testing MS browser behaviour is great using vm's. MS provides images themselves
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

[wimrijnders]

OK, my initial hunch was incorrect. I've been doing some online snooping with respect to Safari compatibility, it appears to be OK from Safari 6.1 onwards.

The only thing I can think of is that the canvas rendering is slower on safari, causing the redraw to go over a frame. I'm looking for a benchmark to test this. This looks hopeful, but I can't get it to run.

---

Update: Running now. I think the page got the hint after I furiously kept on tapping F5.

Would you mind running that test on Safari? To see if the canvas rendering time could be an issue.

These are my scores:

• The 'itty bitty' machine: CanvasMark Score: 6308 (Firefox 52 on Linux)
• The i7 workstation: CanvasMark Score: 13833 (Chrome 59 on Linux)
• The Raspberry Pi: just kidding, that is the equivalent of torturing a kitten

Network runs without flickering on the first two. I don't dare to try it on the third.

[pjeutr]

Seems all OK. This is me:
MB pro i5

• CanvasMark Score: 8658 (Firefox 55 on Mac)
• CanvasMark Score: 8695 (Safari 11 on Mac)
• CanvasMark Score: 13038 (Chrome 60 on Mac)
• CanvasMark Score: 10912 (Chrome 63 on Mac)

iPhone SE

• CanvasMark Score: 11641 (Safari 11 on iOS)
  also shows flickering running the demo

Rasberry Pi (the first) + Raspbian ( kitties like to be challenged! )

• CanvasMark Score: 34416 (Chrome 60 on Linux)
  Not joking. I suppose something is wrong with the test. If the hardware is to slow

[wimrijnders]

So I finally read the instructions on the benchmark page:

The results can only be compared to other browsers running on the same machine - as each machine with different CPU or graphics will produce difference results.

So it's not an absolute measure. The only thing that can be looked at is your results for the different browsers on the MB.

I was hoping for a clear indication that Safari is slower with the rendering. It's clearly slower than chrome, but comparable to firefox, of which you said there is no flicker problem. So I'm inclined to conclude that this test is moot.

---

For completeness:

• i7 workstation: CanvasMark Score: 13954 (Firefox 52 on Linux)
• (previous, for comparison): CanvasMark Score: 13833 (Chrome 59 on Linux)
• the 'kitten' (RPi 3): CanvasMark Score: 7711 (Chrome 51 on Linux)

Seeing that the i7 was +-60FPS and the RPi +-12FPS, it's safe to say that comparing values between machines is meaningless. Apologies if I have wasted your time.

[wimrijnders]

IMHO, the flickering comes from here:

Canvas.js:

 setOptions(options) {
    if (options !== undefined) {
      let fields = ['width','height','autoResize'];
      util.selectiveDeepExtend(fields,this.options, options);
    }

    if (this.options.autoResize === true) {
      // automatically adapt to a changing size of the browser.
      this._cleanUp();
      this.resizeTimer = setInterval(() => {  // <=== Timer resizing every second!!
        let changed = this.setSize();
        if (changed === true) {
          this.body.emitter.emit("_requestRedraw");
        }
      }, 1000);                               // <=== End timer
      this.resizeFunction = this._onResize.bind(this);
      util.addEventListener(window,'resize',this.resizeFunction);
    }
  }

This thing looks dated to me, more so since addEventListener has nearly universal support, and it's easy to make a fall-back. I'm going to prepare an interim build for you with this disabled, see if it fares better.

---

New demo. The only thing changed from previous is the reference to vis.js (added version postfix).
This should bury the flickering, can you verify?

[pjeutr]

Yup, it works. Also tried it locally by removing the timer. That was the culprit.
Not sure why it was there, but it looks brute force.

[wimrijnders]

Yay! That means we're done with the fix.

One thing to do for me: add unit tests.
Also, reminder: This will not make it into next release due to code freeze. I might try whining a bit, you never know....

(Anything I missed? Just checking)

[pjeutr]

Nope, thanks!
I downloaded your version. I'll be fine for the next decade 😄

[wimrijnders]

Hehe. Decade is like an epoch in the javascript world. I wouldn't count on it.

OK, until next time! I believe you'll get a notification here when the PR has been published.

[wimrijnders]

@pjeutr I'm rounding off the PR here.

Question: Would you mind if I added the last demo you gave me to the examples? This to showcase that the dynamic sizing works. It's pretty complete and visually enticing.

TIA!

[pjeutr]

Sure, No problem. Glad I could contribute.

…

On 23 Oct 2017, at 08:57, wimrijnders ***@***.***> wrote: @pjeutr <https://github.com/pjeutr> I'm rounding off the PR here. Question: Would you mind if I added the last demo you gave me to the examples? This to showcase that the dynamic sizing works. It's pretty complete and visually enticing. TIA! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1832 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAlWgBvQ2ZRd87Uik4RuhZAm8-Q3s-wmks5svDjOgaJpZM4IS6kN>.

[wimrijnders]

Thanks for that! I will attribute you in the source code.

[glaggia-larus]

Hi, is there a schedule for when this change will be released?

Was this tested also with bootstrap grid layout (row + col-xx-xx) ?

[pjeutr]

Hi Wim

I just noticed the edge labels are missing, see also the plnkr demo.
When using the original min.vis.js they come back.

@glaggia-larus
Check the demo, we tested there with col-md-6, it's easy to change the test to your usecase

[vletoux]

After 1,5 days of investigation, I found this thread.
+1 for the 150px size.

I manage to do a single test for me using this gist:
https://gist.github.com/anonymous/dc7d6446628650b9153f5f76d8ba017b

If I remove the doctype html (html5) it fit nicely
With HTML5:

Without HTML5:

There is no example for a fullscreen mode. All examples I looked at are boxed.
=> please add a fullscreen example in the documentation
(example of question: should I add a workaround to compute the size in javascript ?)

Also:
=> what was the last working version of vis.js for 100% height ?

[yaitskov]

Ops. Html5 makes it working, but it affects view of many other page elements, so I have to validate and fix all pages. I agreed up on a workaround where parent div using fixed position, because anyway graph view should be as big as possible and it would occupy the entire screen. Sparse buttons would be located inside the view with transparent background.

[mcarf]

@wimrijnders Hi, what is the current state of this issue? I can give a hand if the branch or the PR is published, thanks

[davidhbigelow]

I have been struggling with sizing network canvas based on the height of the available space... and when a user resizes the browser window.

After a bit of testing and playing around -- I figured this out, seems to work. If you have alternative approaches, please post a suggestion or alternative example code.

I hope this helps others as a starting point for their own projects. Note: I am using jQuery to help streamline the resize functions.

IMPORTANT - NON-HMTL5 DOCTYPE

     <!DOCTYPE>

THE HEAD SECTION

  <head>
  
    <!-- JQUERY -->
    <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>

    <style>

        html, body
        {
            height: 100%;
        }

        #header
        {
            width: 100%;
            background: orange;
            vertical-align: middle;
            text-align: center;
            line-height: 100px;
        }

    </style>

</head>

SAMPLE BODY CONTENT

    <div id="header"> Sample header region </div>
    <div id="container">
        <div id="mynetwork" style="border: 1px solid red;">
        </div>
    </div>

THE SCRIPT (bottom of the HTML BODY)

<script>

    function resizeCanvas () {
        $('#mynetwork').height($('body').height()-$('#header').height()-20)
    }

    $(document).ready(function () {
        $(window).resize(function(){
            resizeCanvas();
        });
    });

    resizeCanvas();

</script>

EXAMPLE - PAGE LOAD

EXAMPLE - AFTER RESIZE

[carlpaten]

I'm also affected ;_;

[davidhbigelow]

@LilRed -- did my example NOT help you? It seems to work fine for me across all browsers.

[carlpaten]

I'm using vis to make Grafana panel plug-ins, so I don't have control over the doctype.

[davidhbigelow]

I'm using vis to make Grafana panel plug-ins, so I don't have control over the doctype.

Oh - yea -- that was the only work around I found.... :(

[dherault]

Another workaround:

network.once('afterDrawing', () => {
  container.style.height = '100vh'
})