Viz flowchart re-focus on every click

[noklam]

Description

The flowchart shouldn't refocus at the center. Maybe either center the chart with the clicked node, or do nothing at all.

Context

This make the navigation very hard to use

[jitu5]

To achieve this, we need to disable the node re-focus on click when Kedro-Viz is used in embedded mode or within a VSCode setup. However, we currently don't have a flag in the code that indicates whether Kedro-Viz is being used in normal or embedded mode. I would like to know the team's opinion on what the optimal prop structure would be, one that not only fulfils the current requirement but is also scalable for future use cases.

1. Here I added mode as new prop which accept vscode, default or test. We can pass additional props as options with modeOptions

   
   <KedroViz
   options={{
   mode: 'embed', // or 'vscode', 'default', etc.
   display: {
     globalNavigation: true,
     sidebar: true,
     metadataPanel: false,
   },
   modeOptions: { 
     nodeFocus: true,
     showPipelineList: true, 
     xyzList: [1, 2, 3], 
   }, 
   }}
   data={getPipelineData()}
   />

2. Here I added `vscode` as single flag which can be use whenever we do VSCode specific task.

<KedroViz options={{ display: { globalNavigation: true, sidebar: true, metadataPanel: false, }, vscode: true, }} data={getPipelineData()} />

Let me know wdyt and if you have any other opinion on this.
@rashidakanchwala @ravi-kumar-pilla @Huongg @SajidAlamQB        

[Huongg]

hey @jitu5 thanks for the summary! My initial thought is, why not pass it directly through the mode? For example:

modeOptions: { 
     reFocus: false, // default is true
     nodeFocus: true,
     showPipelineList: true, 
     xyzList: [1, 2, 3],
},

I think this approach offers more flexibility, allowing users to customize the Kedro-Viz standalone app more easily. I can imagine a scenario where we're building an extension for a different code editor—adding new props for every new tool could become cumbersome. What do you think?

[jitu5]

hey @jitu5 thanks for the summary! My initial thought is, why not pass it directly through the mode? For example:

modeOptions: { 
     reFocus: false, // default is true
     nodeFocus: true,
     showPipelineList: true, 
     xyzList: [1, 2, 3],
},

I think this approach offers more flexibility, allowing users to customize the Kedro-Viz standalone app more easily. I can imagine a scenario where we're building an extension for a different code editor—adding new props for every new tool could become cumbersome. What do you think?

@Huongg Okay I will drop mode prop and only use modeOptions as main prop object for mode related options. So for this ticket below props will used.

modeOptions: { 
     reFocus: false, // default is true
}