Upgrading from 1.35.0 to 1.36.0 causes visibility values to not set properly

[alexpeverett]

Hi,

We are using vue-flow for rendering graphs of workflows, their components, and the edges that connect them. Currently we have an issue where setting our hidden values for a node no longer has an effect. The issue was noticed when upgrading from 1.35.0 to 1.36.0 so we believe it may be an issue with the changes made in this update. There also appears to be an issue with the connectors not lining up with the nodes when we force the visibility of the node to true (shown below)

Screenshots

1.35.0

1.36.0

Force visibility on presets node:

HTML comparison (left new, right old)

[AlessandroPomponio]

Note: the HTML comparison was done with the following versions:

• New: 1.38.1
• Old: 1.33.8

[bcakmakoglu]

Slightly off-topic but you're going through, imo, unnecessary hoops to achieve what you're trying to do in this code-block

const showHideInputNodes = () => {
  inputNodesVisability.value = !inputNodesVisability.value;
  let Other = nodes.value.find((a) => a.id == "other");
  if (Other != undefined) {
    Other.hidden = !inputNodesVisability.value;
  }
  let Presets = nodes.value.find((a) => a.id == "presets");
  if (Presets != undefined) {
    Presets.hidden = !inputNodesVisability.value;
  }
  showHideButtonTitle.value =
    showHideButtonTitle.value == "Hide presets & other"
      ? "Show all inputs"
      : "Hide presets & other";
};

You can clean this up to something like this and avoid having to loop through n-nodes to do an update on a specific one.

const { updateNode } = useVueFlow()

function showHideInputNodes() {
  const isVisible = inputNodesVisibility.value

	// loop through the different node ids to update
  ;['other', 'presets'].forEach((id) => updateNode(id, { hidden: isVisible }))

	// alternatively use this
	updateNode('other', { hidden: isVisible })
	updateNode('presets', { hidden: isVisible })

  showHideButtonTitle.value = showHideButtonTitle.value === 'Hide presets & other' ? 'Show all inputs' : 'Hide presets & other'
  inputNodesVisibility.value = !inputNodesVisibility.value
}

There are a number of built-in helpers that would make your life much easier like findNode(nodeId) which avoids having to loop through a whole array to get a specific node (using a map internally).

Also helpers like updateNode that can already handle the finding and updating of a nodes properties for you, again without having to loop through a whole array to do so :)

[AlessandroPomponio]

Thank you @bcakmakoglu, this is super helpful! Unfortunately this code was written when some of the people were still getting familiar with your (lovely) framework and Vue/JS in general, so lots of things should be refactored, but time is always way too limited 😢

Hopefully we'll find some time for it soon!

In the meantime, here's a reproducible example for you: https://codesandbox.io/p/devbox/infallible-bose-pvm574
After writing the function, everything seemed to be working and I was already scratching my head, but I noticed that the @vue-flow/core package was pinned to an old version 👍

[bcakmakoglu]

Thanks for the repro, the bug will be fixed in the next patch 👍

[bcakmakoglu]

Fixed with 1.38.2

[bcakmakoglu]

btw you are allowed to open actual issues if you suspect that a bug is happening 😄
Just as an info. I like to keep Issues solely for bugs/problems while Discussions can include anything, so I won't stop you from opening discussions either ^^

[AlessandroPomponio]

Thank you very much @bcakmakoglu !