kedro-org / vscode-kedro

Kedro extension for VSCode including LSP and other features
https://marketplace.visualstudio.com/items?itemName=kedro.Kedro
Apache License 2.0
18 stars 2 forks source link

Viz flowchart re-focus on every click #126

Open noklam opened 1 month ago

noklam commented 1 month ago

Description

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

ui-refocus

Context

This make the navigation very hard to use

jitu5 commented 6 days ago

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 commented 6 days ago

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 commented 1 day ago

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
}