Node Opacity #554

Tyler-Maclachlan · 2020-03-19T12:44:06Z

Hey I added a node option for overall node opacity (it will set border, shadows and images).

I also added ordering for hovered nodes in the renderer for: #226

Tyler-Maclachlan · 2020-03-19T14:47:06Z

Hey @Thomaash @mojoaxel

Can you guys give this a look

Thomaash

Could you provide an example for this?

lib/network/modules/components/Node.js

lib/network/modules/components/nodes/shapes/Image.js

Change import to only import overrideOpacity

Tyler-Maclachlan · 2020-03-20T10:50:06Z

Hey @Thomaash

I've added an example and fixed up the things.

Thomaash

Thanks for the example and some of the other changes are also great. However it doesn't seem to work. When I set opacity for one node it affects some other too, sometimes all of them. If I set it on a group it just behaves weirdly (it's either ignored or it affects even some nodes that don't belong into the group). Also opacity zero behaves weirdly (I guess because it's falsy and you somewhere test it for truthiness instead of nullness). Also this should be mentioned in the docs (also in the Korean docs, TODO text instead of Korean is okay if you don't speak Korean).

Add groups to example

KR Docs todo

Tyler-Maclachlan · 2020-03-20T20:50:41Z

Hey @Thomaash

Fixed the issues, they were all because of a falseness check.

Tyler-Maclachlan · 2020-03-20T20:51:28Z

Oops, clicked close and comment by accident

Thomaash

Seems much better but there are still some things that need polishing:

NaN, infinity etc. should be ignored and reported (console.error). Now it misbehaves with them.
Values outside of <0, 1> should also be ignored and reported.
Explicitly set opacity on a node seems to be ignored when the node is selected.
The example should say something more than “Display nodes as images”.
Your branch is out of date. It's necessary to merge changes from the master before merging into the master.

Fix problems with values invalid for opacity

Tyler-Maclachlan · 2020-03-22T19:22:45Z

NaN, infinity etc. should be ignored and reported (console.error). Now it misbehaves with them. - done
Values outside of <0, 1> should also be ignored and reported. - done
Explicitly set opacity on a node seems to be ignored when the node is selected. - I have one in the example and it's working as it should, can you provide a codepen?
The example should say something more than “Display nodes as images”. - done
Your branch is out of date. It's necessary to merge changes from the master before merging into the master. - done

Thomaash

Try setting the Main node's opacity to 7, Number.POSITIVE_INFINITY, Number.NaN etc. and see what happens. There are no errors in the console, the node has initially opacity 1 but if you click it, it becomes transparent.

Also don't use isNaN and isFinite. They're quite funky in their behavior and often return unexpected results (due to type coercion). Use Number.isNaN and Number.isFinite instead.

Fix error logging for invalid node opacity options

Thomaash

It seems to work now, there are just some minor code quality issues before it can be shipped.

lib/network/modules/NodesHandler.js

lib/network/modules/components/Node.js

Clear up comment on opacity option

Thomaash

It still seems that you're leaking the options between nodes somehow.

Check the following example (the main node has opacity 1 and there's no opacity set for all). The main node has opacity 1 and no group but it's transparent unless selected.

<!doctype html>
<html>
<head>
  <title>Vis Network | Node Styles | Images with Opacity</title>

  <style type="text/css">
    #mynetwork {
      width: 600px;
      height: 600px;
      border: 1px solid lightgray;
    }
  </style>

  <script type="text/javascript" src="../../../standalone/umd/vis-network.min.js"></script>

  <script type="text/javascript">
    var nodes = null;
    var edges = null;
    var network = null;

    var DIR = '../img/refresh-cl/';
    var EDGE_LENGTH_MAIN = 150;
    var EDGE_LENGTH_SUB = 50;

    // Called when the Visualization API is loaded.
    function draw() {
      // Create a data table with nodes.
      nodes = [];

      // Create a data table with links.
      edges = [];

      nodes.push({id: 1, label: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image', opacity: .7});
      nodes.push({id: 2, label: 'Office', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
      nodes.push({id: 3, label: 'Wireless', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
      nodes.push({id: 22, label: 'Normal', opacity: 1});
      edges.push({from: 1, to: 2, length: EDGE_LENGTH_MAIN});
      edges.push({from: 1, to: 3, length: EDGE_LENGTH_MAIN});
      edges.push({from: 1, to: 22, length: EDGE_LENGTH_MAIN});

      for (var i = 4; i <= 7; i++) {
        nodes.push({id: i, label: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', shape: 'image', group: 'computer'});
        edges.push({from: 2, to: i, length: EDGE_LENGTH_SUB});
      }

      nodes.push({id: 101, label: 'Printer', image: DIR + 'Hardware-Printer-Blue-icon.png', shape: 'image'});
      edges.push({from: 2, to: 101, length: EDGE_LENGTH_SUB});

      nodes.push({id: 102, label: 'Laptop', image: DIR + 'Hardware-Laptop-1-icon.png', shape: 'image'});
      edges.push({from: 3, to: 102, length: EDGE_LENGTH_SUB});

      nodes.push({id: 103, label: 'network drive', image: DIR + 'Network-Drive-icon.png', shape: 'image'});
      edges.push({from: 1, to: 103, length: EDGE_LENGTH_SUB});

      nodes.push({id: 104, label: 'Internet', image: DIR + 'System-Firewall-2-icon.png', shape: 'image'});
      edges.push({from: 1, to: 104, length: EDGE_LENGTH_SUB});

      for (var i = 200; i <= 201; i++ ) {
        nodes.push({id: i, label: 'Smartphone', image: DIR + 'Hardware-My-PDA-02-icon.png', shape: 'image'});
        edges.push({from: 3, to: i, length: EDGE_LENGTH_SUB});
      }

      // create a network
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {
        nodes: {},
        groups: {
          computer: {
            opacity: .3
          }
        }
      };
      network = new vis.Network(container, data, options);
    }
  </script>
  

<body onload="draw()">

<p>
  Display nodes with global opacity, individual opacity, and opacity in a group.
</p>
<div id="mynetwork"></div>

</body>
</html>

Tyler-Maclachlan · 2020-03-30T13:03:27Z

This wasn't a leaking of options between nodes. It was the fact that the context was being changed without being restored.

Thomaash

Yet another issue: Group opacity overrides node opacity. It should be the other way around.

<!doctype html>
<html>
<head>
  <title>Vis Network | Node Styles | Images with Opacity</title>

  <style type="text/css">
    #mynetwork {
      width: 600px;
      height: 600px;
      border: 1px solid lightgray;
    }
  </style>

  <script type="text/javascript" src="../../../standalone/umd/vis-network.min.js"></script>

  <script type="text/javascript">
    var nodes = null;
    var edges = null;
    var network = null;

    var DIR = '../img/refresh-cl/';
    var EDGE_LENGTH_MAIN = 150;
    var EDGE_LENGTH_SUB = 50;

    // Called when the Visualization API is loaded.
    function draw() {
      // Create a data table with nodes.
      nodes = [];

      // Create a data table with links.
      edges = [];

      nodes.push({id: 1, label: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image', opacity: .7});
      nodes.push({id: 2, label: 'Office', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
      nodes.push({id: 3, label: 'Wireless', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
      nodes.push({id: 22, label: 'Normal', opacity: 1})
      edges.push({from: 1, to: 2, length: EDGE_LENGTH_MAIN});
      edges.push({from: 1, to: 3, length: EDGE_LENGTH_MAIN});
      edges.push({from: 1, to: 22, length: EDGE_LENGTH_MAIN});

      for (var i = 4; i <= 7; i++) {
        nodes.push({id: i, label: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', shape: 'image', group: 'computer'});
        edges.push({from: 2, to: i, length: EDGE_LENGTH_SUB, opacity: 0.1});
      }

      nodes.push({id: 101, label: 'Printer', image: DIR + 'Hardware-Printer-Blue-icon.png', shape: 'image'});
      edges.push({from: 2, to: 101, length: EDGE_LENGTH_SUB});

      nodes.push({id: 102, label: 'Laptop', image: DIR + 'Hardware-Laptop-1-icon.png', shape: 'image'});
      edges.push({from: 3, to: 102, length: EDGE_LENGTH_SUB});

      nodes.push({id: 103, label: 'network drive', image: DIR + 'Network-Drive-icon.png', shape: 'image'});
      edges.push({from: 1, to: 103, length: EDGE_LENGTH_SUB});

      nodes.push({id: 104, label: 'Internet', image: DIR + 'System-Firewall-2-icon.png', shape: 'image'});
      edges.push({from: 1, to: 104, length: EDGE_LENGTH_SUB});

      for (var i = 200; i <= 201; i++ ) {
        nodes.push({id: i, label: 'Smartphone', image: DIR + 'Hardware-My-PDA-02-icon.png', shape: 'image'});
        edges.push({from: 3, to: i, length: EDGE_LENGTH_SUB});
      }

      // create a network
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {
        nodes: {
          opacity: .5
        },
        groups: {
          computer: {
            opacity: 0.9
          }
        }
      };
      network = new vis.Network(container, data, options);
    }
  </script>
  

<body onload="draw()">

<p>
  Display nodes with global opacity, individual opacity, and opacity in a group.
</p>
<div id="mynetwork"></div>

</body>
</html>

lib/network/modules/components/Node.js

Tyler-Maclachlan · 2020-03-30T19:43:21Z

@Thomaash
I fixed it, but too many functions take options and overwrite them.

Node.parseOptions should in my opinion only check that options are valid, not set any options.

Check out how chartjs does theirs.

Thomaash · 2020-03-31T12:40:16Z

@Tyler-Maclachlan I'd like to rework the options (in fact I already did a lot of work on this), but the problem is that the options are so complex and I don't have the time to finish it. You can see my work at visjs/vis-util#71, just in case your interested.

In the unlikely case you would have the time to do a complete overhaul of this, that would be incredibly awesome.

Thomaash

Seems to finally work okay. Thank you very much.

vis-bot · 2020-03-31T13:26:13Z

🎉 This PR is included in version 7.5.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Tyler Maclachlan added 5 commits March 19, 2020 14:40

Fix: #226

7ecae91

Add opacity option to nodes

c6d446d

Fix shadow color being mangled

a783f87

Remove console.log

24e251f

Change to use util version of overrideOpacity

c8b1a9a

Thomaash requested changes Mar 19, 2020

View reviewed changes

lib/network/modules/components/Node.js Outdated Show resolved Hide resolved

lib/network/modules/components/nodes/shapes/Image.js Outdated Show resolved Hide resolved

Tyler Maclachlan and others added 9 commits March 20, 2020 00:55

Fix updating groups instead of node

1e06b9c

Change import to only import overrideOpacity

Fix local opacity not being applied

9614ea8

Merge branch 'master' into master

75e8397

Fix wrong property name

b85caaa

Fix drawing selected instead of hovered

a685dd2

Update example

fcc0956

Merge branch 'master' of https://github.com/Tyler-Maclachlan/vis-network

7f317f4

Update example

e67ff7c

Fix opacity of 0 wouldn't pass

b3d588f

Thomaash requested changes Mar 20, 2020

View reviewed changes

Tyler Maclachlan added 2 commits March 20, 2020 22:43

Fix checks for truthiness instead of nullness

125913d

Add groups to example

Added to docs

9e9a3b0

KR Docs todo

Tyler-Maclachlan closed this Mar 20, 2020

Tyler-Maclachlan reopened this Mar 20, 2020

Thomaash requested changes Mar 21, 2020

View reviewed changes

Tyler-Maclachlan and others added 2 commits March 22, 2020 21:07

Merge branch 'master' into master

d5bf563

Update example

1ea800d

Fix problems with values invalid for opacity

Thomaash requested changes Mar 24, 2020

View reviewed changes

Merge branch 'master' into master

dc93c47

Tyler Maclachlan and others added 3 commits March 24, 2020 22:37

Update example

7176cb8

Fix error logging for invalid node opacity options

Merge branch 'master' of https://github.com/Tyler-Maclachlan/vis-network

d26e066

Merge branch 'master' into master

580340e

Thomaash requested changes Mar 25, 2020

View reviewed changes

lib/network/modules/NodesHandler.js Outdated Show resolved Hide resolved

lib/network/modules/components/Node.js Outdated Show resolved Hide resolved

lib/network/modules/components/Node.js Outdated Show resolved Hide resolved

Tyler Maclachlan and others added 4 commits March 28, 2020 20:16

Create function to check opacity

fcfcbad

Clear up comment on opacity option

Merge branch 'master' of https://github.com/Tyler-Maclachlan/vis-network

36309d7

Merge branch 'master' into master

f35518f

Merge branch 'master' into master

780090b

Thomaash requested changes Mar 30, 2020

View reviewed changes

Tyler-Maclachlan and others added 4 commits March 30, 2020 14:12

Merge branch 'master' into master

c3a0f32

Fix image opacity transferring to shapes

1096463

Merge branch 'master' of https://github.com/Tyler-Maclachlan/vis-network

67acdcf

Merge branch 'master' into master

95e33fe

Tyler Maclachlan added 2 commits March 30, 2020 15:11

Remove console.log

088756d

Merge branch 'master' of https://github.com/Tyler-Maclachlan/vis-network

7ad3211

Thomaash requested changes Mar 30, 2020

View reviewed changes

WIP: Fix group opacity overriding node opacity

42af3b9

Tyler-Maclachlan commented Mar 30, 2020

View reviewed changes

lib/network/modules/components/Node.js Outdated Show resolved Hide resolved

Tyler Maclachlan and others added 2 commits March 30, 2020 21:39

Fix group options overriding local options

aeb4c88

Merge branch 'master' into master

2e192c5

Thomaash approved these changes Mar 31, 2020

View reviewed changes

Thomaash merged commit b9ff848 into visjs:master Mar 31, 2020

vis-bot added the released label Mar 31, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Node Opacity #554

Node Opacity #554

Tyler-Maclachlan commented Mar 19, 2020

Tyler-Maclachlan commented Mar 19, 2020

Thomaash left a comment

Tyler-Maclachlan commented Mar 20, 2020

Thomaash left a comment

Tyler-Maclachlan commented Mar 20, 2020

Tyler-Maclachlan commented Mar 20, 2020

Thomaash left a comment

Tyler-Maclachlan commented Mar 22, 2020

Thomaash left a comment

Thomaash left a comment

Thomaash left a comment

Tyler-Maclachlan commented Mar 30, 2020

Thomaash left a comment

Tyler-Maclachlan commented Mar 30, 2020 •

edited

Loading

Thomaash commented Mar 31, 2020

Thomaash left a comment

vis-bot commented Mar 31, 2020

Node Opacity #554

Node Opacity #554

Conversation

Tyler-Maclachlan commented Mar 19, 2020

Tyler-Maclachlan commented Mar 19, 2020

Thomaash left a comment

Choose a reason for hiding this comment

Tyler-Maclachlan commented Mar 20, 2020

Thomaash left a comment

Choose a reason for hiding this comment

Tyler-Maclachlan commented Mar 20, 2020

Tyler-Maclachlan commented Mar 20, 2020

Thomaash left a comment

Choose a reason for hiding this comment

Tyler-Maclachlan commented Mar 22, 2020

Thomaash left a comment

Choose a reason for hiding this comment

Thomaash left a comment

Choose a reason for hiding this comment

Thomaash left a comment

Choose a reason for hiding this comment

Tyler-Maclachlan commented Mar 30, 2020

Thomaash left a comment

Choose a reason for hiding this comment

Tyler-Maclachlan commented Mar 30, 2020 • edited Loading

Thomaash commented Mar 31, 2020

Thomaash left a comment

Choose a reason for hiding this comment

vis-bot commented Mar 31, 2020

Tyler-Maclachlan commented Mar 30, 2020 •

edited

Loading