N8N-4143 Variables and expressions for pin data nodes without execution #3738

alexgrozav · 2022-07-20T08:20:51Z

https://linear.app/n8n/issue/N8N-4143/make-node-parameter-variables-and-expressions-available-when-using

…t execution.

ivov

Thanks for taking this on!

If we pin a node, connect the next, reference from next to previous using expression, the expression works. If then we add a third node standalone (unconnected), run this third node, and go back to inspect the expression, it now says [invalid (workflowRunData[parentNode[0]] is undefined)]

If we pin a node, connect the next, run the next, when opening the NDV or the expression edit modal, there are Vue store state mutation warnings and watcher callback error warnings in the console. These fire multiple times when selecting any option (pindata-based or not) from the variable selector.

ivov · 2022-07-20T09:22:08Z

packages/editor-ui/src/components/VariableSelector.vue

@@ -491,7 +520,7 @@ export default mixins(
 					}
 				}

-				let tempOutputData;
+				let tempOutputData: IVariableSelectorOption[] | null;


This is undefined here.

Updated types.

ivov · 2022-07-20T09:22:39Z

packages/editor-ui/src/components/VariableSelector.vue

+			 * @param {string} nodeName The name of the node to get the data of
+			 * @param {INodeExecutionData} outputData The data of the run to get the data of
+			 * @param {string} filterText Filter text for parameters
+			 * @param {boolean} [useShort=false] Use short notation


Nit: I would add a small example here. Not immediately obvious what short notation stands for.

Added description.

ivov · 2022-07-20T09:44:19Z

packages/editor-ui/src/components/VariableSelector.vue

+						}
+					});
+
+					if (pinDataOptions.length > 0) {


Out of scope: I find this hard to follow without spending longer, which makes it difficult to properly check the logic. In the future, we should make an effort to refactor this section and ideally this whole 250-line method. Since we are looking to release, now is probably not the time.

I found it very hard to follow as well. The code there is very complicated and requires deep business-logic understanding.

I've been doing a lot of trial-and-error work to get to understand what this does and how it interacts with the data.

alexgrozav · 2022-07-20T10:31:13Z

Thanks for taking this on!

If we pin a node, connect the next, reference from next to previous using expression, the expression works. If then we add a third node standalone (unconnected), run this third node, and go back to inspect the expression, it now says [invalid (workflowRunData[parentNode[0]] is undefined)]

Good catch! Found it as well after more thorough testing. Added a fix for it.

If we pin a node, connect the next, run the next, when opening the NDV or the expression edit modal, there are Vue store state mutation warnings and watcher callback error warnings in the console. These fire multiple times when selecting any option (pindata-based or not) from the variable selector.

Updated. Rebuilding workflow run data using spreading to be able to manipulate it.

alexgrozav · 2022-07-20T10:32:10Z

Further update:

Found an issue that appeared after you have an execution and add another node with pin data (also related to Iván's finding). Also fixed.

ivov

Confirmed, those cases are fixed. FYI pushed a small build fix.

…om:n8n-io/n8n into n8n-4143-make-node-parameter-variables-and

alexgrozav · 2022-07-20T12:57:47Z

@ivov Green connector lines changes are ready to be reviewed.

ivov

This does not seem to work:

Pin test data to Start, connect to next → connector still grey, no items label
Pin test data to standalone node, connect to next → connector still grey, no items label
Pin test data to standalone node, connect to next, keep building chain with every node pinned → all connectors still grey, no items label in any node

Reviewed: 7feed12

ivov · 2022-07-20T13:22:11Z

packages/editor-ui/src/store.ts

@@ -214,6 +215,8 @@ export const store = new Vuex.Store({
 			}

 			state.stateIsDirty = true;
+
+			dataPinningEventBus.$emit('pin-data', { [payload.node.name]: payload.data });


If I understand, we only need the node name to create the connection, so why do we need to send the payload? Same for others.

We also need the number of items. See total: pinData[nodeName].length. Thought we'll reuse this at some point so made it a general-purpose event.

ivov · 2022-07-20T13:24:08Z

packages/editor-ui/src/views/NodeView.vue

+					connections.forEach((connection) => {
+						CanvasHelpers.resetConnection(connection);
+					});


Suggestion: connections.forEach(CanvasHelpers.resetConnection);

ivov · 2022-07-20T13:25:19Z

packages/editor-ui/src/views/NodeView.vue

+			dataPinningEventBus.$on('pin-data', (pinData: PinData) => {
+				this.addPinDataConnections(pinData);
+			});
+
+			dataPinningEventBus.$on('unpin-data', (pinData: PinData) => {
+				this.removePinDataConnections(pinData);
+			});


Suggestion: dataPinningEventBus.$on('event-bus', this.method);

Why no $off in destroyed()?

Done.

Because I forgot. 🥲

ivov

Amazing work!

alexgrozav added 2 commits July 18, 2022 16:33

fix: Showing pin data without executing the node only in output pane.

ed3dceb

fix: Updated no data message when previous node not executed.

7d8e39f

alexgrozav requested review from mutdmour and ivov July 20, 2022 08:20

alexgrozav changed the base branch from master to n8n-3750-redesign-button-component-2 July 20, 2022 08:21

feat: Added expression input and evaluation for pin data nodes withou…

84c598a

…t execution.

alexgrozav force-pushed the n8n-4143-make-node-parameter-variables-and branch from 62e9b67 to 84c598a Compare July 20, 2022 08:22

alexgrozav added 2 commits July 20, 2022 11:24

chore: Fixed linting issues and removed remnant console.log().

8d1ee92

chore: Undone package-lock changes.

eb7fa9b

alexgrozav changed the title ~~N8N-4143 make node parameter variables and expressions for pin data nodes work without execution~~ N8N-4143 Variables and expressions for pin data nodes without execution Jul 20, 2022

fix: Removed pin data store changes.

fdf2392

n8n-assistant bot added n8n team Authored by the n8n team ui Enhancement in /editor-ui or /design-system labels Jul 20, 2022

fix: Created a new object using vuex runExecutionData.

e51d126

mutdmour approved these changes Jul 20, 2022

View reviewed changes

ivov reviewed Jul 20, 2022

View reviewed changes

fix: Fixed bug appearing when adding a new node after executing.

0f92213

fix: Fix editor-ui build

95365f3

ivov approved these changes Jul 20, 2022

View reviewed changes

alexgrozav added 2 commits July 20, 2022 15:16

feat: Added green node connectors when having pin data output.

cf0568c

Merge branch 'n8n-4143-make-node-parameter-variables-and' of github.c…

7feed12

…om:n8n-io/n8n into n8n-4143-make-node-parameter-variables-and

chore: Fixed linting errors.

3cd16c3

ivov reviewed Jul 20, 2022

View reviewed changes

alexgrozav added 2 commits July 20, 2022 16:31

fix: Added pin data eventBus unsubscribe.

b18309f

fix: Added pin data color check after adding a connection.

030c9fa

alexgrozav force-pushed the n8n-4143-make-node-parameter-variables-and branch from 43c5670 to 030c9fa Compare July 20, 2022 14:00

ivov approved these changes Jul 20, 2022

View reviewed changes

alexgrozav merged commit e1c12ba into n8n-3750-redesign-button-component-2 Jul 20, 2022

alexgrozav deleted the n8n-4143-make-node-parameter-variables-and branch July 20, 2022 14:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

N8N-4143 Variables and expressions for pin data nodes without execution #3738

N8N-4143 Variables and expressions for pin data nodes without execution #3738

alexgrozav commented Jul 20, 2022 •

edited

Loading

ivov left a comment

ivov Jul 20, 2022

alexgrozav Jul 20, 2022

ivov Jul 20, 2022

alexgrozav Jul 20, 2022

ivov Jul 20, 2022

alexgrozav Jul 20, 2022

alexgrozav commented Jul 20, 2022

alexgrozav commented Jul 20, 2022

ivov left a comment

alexgrozav commented Jul 20, 2022

ivov left a comment •

edited

Loading

ivov Jul 20, 2022

alexgrozav Jul 20, 2022 •

edited

Loading

ivov Jul 20, 2022

alexgrozav Jul 20, 2022

ivov Jul 20, 2022

alexgrozav Jul 20, 2022

ivov left a comment

N8N-4143 Variables and expressions for pin data nodes without execution #3738

N8N-4143 Variables and expressions for pin data nodes without execution #3738

Conversation

alexgrozav commented Jul 20, 2022 • edited Loading

ivov left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexgrozav commented Jul 20, 2022

alexgrozav commented Jul 20, 2022

ivov left a comment

Choose a reason for hiding this comment

alexgrozav commented Jul 20, 2022

ivov left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexgrozav Jul 20, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ivov left a comment

Choose a reason for hiding this comment

alexgrozav commented Jul 20, 2022 •

edited

Loading

ivov left a comment •

edited

Loading

alexgrozav Jul 20, 2022 •

edited

Loading