'select node by id' dropdown selector does not show all node IDs

[jeyendranbalakrishnan]

I want to display a graph with over 100 nodes by rendering to HTML and displaying via Chrome. This works. :-) But the "Select a Node by ID" dropdown selector at the top of the page only shows the top 50 node IDs by lexicographic order. The graph visualization itself correctly shows all the nodes and edges. How can I work around this? [I'm not a Javascript dev]. Thanks!

[BTFspooner]

Check where you're generating the dropdown, and make sure there's no limit on how many nodes get added. If it's sorting by default (lexicographically or anything else), you might just need to remove that sorting.

var selectElement = document.getElementById('nodeSelect'); nodes.forEach(node => { var option = document.createElement('option'); option.value = node.id; option.text = node.id; selectElement.add(option); });

If you’re limiting the size of the dropdown somewhere (like with slice(0, 50)), remove that.

Also, if you’ve got a ton of nodes, make the dropdown scrollable so it doesn’t take up too much space:

#nodeSelect { height: 300px; overflow-y: auto; }

If you want users to pick nodes faster without overcrowding, consider using a library like Select2 for an auto-searchable dropdown.

[jeyendranbalakrishnan]

This is happening in the HTML generated by pyvis, not in any code I wrote.

On Tue, May 20, 2025 at 12:07 PM BTFspooner @.***> wrote:

BTFspooner left a comment (WestHealth/pyvis#309) https://github.com/WestHealth/pyvis/issues/309#issuecomment-2895517386

Check where you're generating the dropdown, and make sure there's no limit on how many nodes get added. If it's sorting by default (lexicographically or anything else), you might just need to remove that sorting.

var selectElement = document.getElementById('nodeSelect'); nodes.forEach(node => { var option = document.createElement('option'); option.value = node.id; option.text = node.id; selectElement.add(option); });

If you’re limiting the size of the dropdown somewhere (like with slice(0, 50)), remove that.

Also, if you’ve got a ton of nodes, make the dropdown scrollable so it doesn’t take up too much space:

#nodeSelect { height: 300px; overflow-y: auto; }

If you want users to pick nodes faster without overcrowding, consider using a library like Select2 for an auto-searchable dropdown.

— Reply to this email directly, view it on GitHub https://github.com/WestHealth/pyvis/issues/309#issuecomment-2895517386, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACLOUK67WGWSYTWYPRIVHGD27N4O3AVCNFSM6AAAAAB5BKCGFKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQOJVGUYTOMZYGY . You are receiving this because you authored the thread.Message ID: @.***>

[BTFspooner]

What you can do is inject a little custom JavaScript after pyvis has generated the HTML. That way, you can override the default sorting, limit, and even make the dropdown scrollable so it doesn't take up too much space.

Here’s a simple way to do that:

`var selectElement = document.getElementById('nodeSelect'); nodes.forEach(node => { var option = document.createElement('option'); option.value = node.id; option.text = node.id; selectElement.add(option); });

// Remove any sorting if it's happening by default: selectElement.sort = null; // or handle sorting explicitly if needed.

// If you have too many nodes, make it scrollable: selectElement.style.height = '300px'; selectElement.style.overflowY = 'auto'; `

This will fix the node dropdown display and allow you to make it scrollable if you have a lot of nodes. If you still want users to pick nodes faster, consider adding an auto-search feature (you could use something like Select2).

Hope that helps! Just add this JavaScript after pyvis generates the HTML, and it should do the trick.