fix(web): templates store - update the workflow editor position when selecting the blueprint template #3487

LetItRock · 2023-05-23T18:34:59Z

What change does this PR introduce?

In this PR:

update the Workflow Editor position when selecting the template from the Templates Store modal
fixed the issue with wrong-positioned tree nodes when the new node is added (check screenshot)

Why was this change needed?

Templates Store PRD.

Other information (Screenshots)

Wrong-positioned nodes
Fixes

Screen.Recording.2023-05-23.at.20.29.10.mov

Screen.Recording.2023-05-23.at.20.29.42.mov

…selecting the blueprint template

linear · 2023-05-23T18:35:02Z

NV-2376 🏪 [Template store] Update Workflow Editor position

Reproduction Steps

Right now if you select template and scroll the Workflow Editor and click on any other blueprint template, then the Workflow Editor position is preserved, we want to update it and re-render basically on the tree from the top-centered, like it is initialised in the beginning.

Expected Behaviour

Update the Workflow Editor position when clicking on the blueprint template in the Templates Store modal.

LetItRock · 2023-05-23T18:35:55Z

apps/web/src/components/workflow/FlowEditor.tsx

+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<IEdge>([]);


by default we don't set the initial nodes and edges

LetItRock · 2023-05-23T18:36:22Z

apps/web/src/components/workflow/FlowEditor.tsx

-    reactFlowInstance?.project({ x: middle, y: 10 });
-    setViewport({ x: middle, y: 10, zoom: zoomView });
+
+    reactFlowInstance.setViewport({ x: middle, y: 10, zoom: zoomView });


then we update the viewport to be top-centered

LetItRock · 2023-05-23T18:39:24Z

apps/web/src/components/workflow/FlowEditor.tsx

+    setTimeout(() => {
+      initializeWorkflowTree();
+    }, 0);


After the viewport is updated we render the nodes and edges. This way we are skipping the initial blink that can be noticed here:

Screen.Recording.2023-05-23.at.20.38.33.mov

LetItRock · 2023-05-23T18:39:45Z

apps/web/src/components/workflow/FlowEditor.tsx


    if (steps.length) {
      for (let i = 0; i < steps.length; i++) {
        const step = steps[i];
-        const oldNode = nodes[i + 1] || { position: { x: 0, y: 120 } };
+        const oldNode = nodes[i + 1];
+        const position = oldNode && oldNode.type !== 'addNode' ? oldNode.position : { x: 0, y: 120 };


fixed the nodes positioning issue

LetItRock · 2023-05-23T18:40:09Z

apps/web/src/components/workflow/FlowEditor.tsx

+    setNodes(finalNodes);
+    setEdges(finalEdges);


set all the nodes and edges at the end

LetItRock · 2023-05-23T18:40:50Z

apps/web/src/pages/templates/components/templates-store/TemplatesStoreModal.tsx

@@ -106,6 +106,7 @@ export const TemplatesStoreModal = ({ general, isOpened, onClose }: ITemplatesSt
          <CanvasHolder>
            <ReactFlowProvider>
              <FlowEditor
+                key={selectedTemplate._id}


this way we can update the Workflow Editor position when another blueprint template is selected

By the react rerender?

If the selectedTemplate._id has changed, the rerender aka reconciliation algorithm will unmount FlowEditor and mount it again because the key prop has changed.
Basically, when React does rerender the same element in the tree it checks if the type is the same, or the key is the same, if any of these changes it does unmount for the old component, and mounts for the new one.

djabarovgeorge

Looks good left a couple of comments, on the things I was not sure about.

djabarovgeorge · 2023-05-24T09:22:06Z

apps/web/src/components/workflow/FlowEditor.tsx

        const newId = (step._id || step.id) as string;

        await onStepInit?.(step);

-        const newNode = buildNewNode(newId, oldNode, parentId, step, i);
-        setNodes((nds) => nds.concat(newNode));


I wonder why there was a concat 😅

because before at the beginning of this function call initializeWorkflowTree we were resetting the nodes state to [trigger, addNode]. And I guess it only worked because we have the await in the line 168, the React setState is async.

djabarovgeorge · 2023-05-24T09:27:25Z

apps/web/src/components/workflow/FlowEditor.tsx

-    initializeWorkflowTree();
+    setTimeout(() => {
+      initializeWorkflowTree();
+    }, 0);


Why do we need a setTimeout of 0? did you face race or something else while development?

The set timeout is like saying after the viewport is updated. We have two useEffects, the first one is adjusting the viewport to top-center, and in the second we are saying with the timeout: "when the viewport is updated, then build all the nodes".
The setTimeout(callback, 0) Web API puts the callback in the callback queue, which is executed right away when the JS callstack is empty (like when JS/React finishes it's job), so at that time, we are sure that the viewport is updated.

djabarovgeorge · 2023-05-24T09:30:55Z

apps/web/src/components/workflow/FlowEditor.tsx


    if (steps.length) {
      for (let i = 0; i < steps.length; i++) {
        const step = steps[i];
-        const oldNode = nodes[i + 1] || { position: { x: 0, y: 120 } };
+        const oldNode = nodes[i + 1];
+        const position = oldNode && oldNode.type !== 'addNode' ? oldNode.position : { x: 0, y: 120 };


You remember where is { x: 0, y: 120 } pointing?

from what I do remember it says to put the new node 120px below the old one

djabarovgeorge · 2023-05-24T09:32:54Z

apps/web/src/pages/templates/components/templates-store/TemplatesStoreModal.tsx

@@ -106,6 +106,7 @@ export const TemplatesStoreModal = ({ general, isOpened, onClose }: ITemplatesSt
          <CanvasHolder>
            <ReactFlowProvider>
              <FlowEditor
+                key={selectedTemplate._id}


By the react rerender?

…pdate-workflow-editor-position

fix(web): templates store - update the workflow editor position when …

9dc6cda

…selecting the blueprint template

LetItRock requested review from ainouzgali and djabarovgeorge May 23, 2023 18:34

LetItRock self-assigned this May 23, 2023

github-actions bot added the @novu/web label May 23, 2023

LetItRock commented May 23, 2023

View reviewed changes

djabarovgeorge approved these changes May 24, 2023

View reviewed changes

Merge branch 'nv-2234-template-store-hover-on-popular' into nv-2376-u…

f548edd

…pdate-workflow-editor-position

Base automatically changed from nv-2234-template-store-hover-on-popular to next May 24, 2023 12:52

Merge branch 'next' into nv-2376-update-workflow-editor-position

3e010f2

LetItRock added this pull request to the merge queue May 24, 2023

Merged via the queue into next with commit d4ee8f6 May 24, 2023
25 checks passed

LetItRock deleted the nv-2376-update-workflow-editor-position branch May 24, 2023 14:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(web): templates store - update the workflow editor position when selecting the blueprint template #3487

fix(web): templates store - update the workflow editor position when selecting the blueprint template #3487

LetItRock commented May 23, 2023

linear bot commented May 23, 2023

Reproduction Steps

Expected Behaviour

LetItRock May 23, 2023

LetItRock May 23, 2023

LetItRock May 23, 2023

LetItRock May 23, 2023

LetItRock May 23, 2023

LetItRock May 23, 2023

djabarovgeorge May 24, 2023

LetItRock May 24, 2023

djabarovgeorge left a comment

djabarovgeorge May 24, 2023

LetItRock May 24, 2023

djabarovgeorge May 24, 2023

LetItRock May 24, 2023

djabarovgeorge May 24, 2023

LetItRock May 24, 2023

djabarovgeorge May 24, 2023

		const [nodes, setNodes, onNodesChange] = useNodesState([]);
		const [edges, setEdges, onEdgesChange] = useEdgesState<IEdge>([]);

fix(web): templates store - update the workflow editor position when selecting the blueprint template #3487

fix(web): templates store - update the workflow editor position when selecting the blueprint template #3487

Conversation

LetItRock commented May 23, 2023

What change does this PR introduce?

Why was this change needed?

Other information (Screenshots)

linear bot commented May 23, 2023

Reproduction Steps

Expected Behaviour

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

Choose a reason for hiding this comment

djabarovgeorge 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

Choose a reason for hiding this comment