Introduce behaviour prop object with reFocus prop

README.npm.md

@@ -140,6 +140,9 @@
       tag: {
         enabled: {companies: true}
       },
+      modeOptions: { 
+        reFocus: true,
+      },
       theme: "dark"
     }}
 />
@@ -161,6 +164,8 @@
 | `sidebar`                  | boolean                                                                            | true                                                     | Show/Hide Sidebar and action toolbar                                                                                                                          |
 | `zoomToolbar`              | boolean                                                                            | true                                                     | Show/Hide zoom-in, zoom-out and zoom reset buttons together                                                                                                   |
 | options.expandAllPipelines | boolean                                                                            | false                                                    | Expand/Collapse Modular pipelines on first load                                                                                                               |
+| options.modeOptions            |                                                                                    |                                                          |                                                                                                                                                               |
+| `reFocus`       | boolean                                                                            | true                                                     | Enable/Disable node re-focus on click 
 | options.nodeType           | `{disabled: {parameters: boolean,task: boolean,data: boolean}}`                    | `{disabled: {parameters: true,task: false,data: false}}` | Configuration for node type options                                                                                                                           |
 | options.tag                | `{enabled: {<tagName>: boolean}}`                                                  | -                                                        | Configuration for tag options                                                                                                                                 |
 | options.theme              | string                                                                             | dark                                                     | select `Kedro-Viz` theme : dark/light                                                                                                                         |

RELEASE.md

@@ -11,6 +11,7 @@ Please follow the established format:
 ## Major features and improvements
 
 - Update Kedro-Viz telemetry for opt-out model (#2022)
+- Introduce `modeOptions` prop object with `reFocus` prop (#2161)
 
 ## Bug fixes and other changes
 

src/components/app/app.js

@@ -119,6 +119,12 @@ App.propTypes = {
     tag: PropTypes.shape({
       enabled: PropTypes.objectOf(PropTypes.bool),
     }),
+    /**
+     * Whether to re-focus the graph when a node is clicked
+     */
+    modeOptions: PropTypes.shape({
+      reFocus: PropTypes.bool,
+    }),
     /**
      * Override the default enabled/disabled node types
      */

src/components/flowchart/flowchart.js

@@ -220,22 +220,28 @@ export class FlowChart extends Component {
 
     if (changed('edges', 'nodes', 'layers', 'chartSize', 'clickedNode')) {
       // Don't zoom out when the metadata or code panels are opened or closed
-      if (prevProps.visibleMetaSidebar !== this.props.visibleMetaSidebar) {
+      const metaSidebarChanged =
+        prevProps.visibleMetaSidebar !== this.props.visibleMetaSidebar;
+
+      const codeChangedWithoutMetaSidebar =
+        prevProps.visibleCode !== this.props.visibleCode &&
+        !this.props.visibleMetaSidebar;
+
+      // Don't zoom out when the clicked node changes and the nodeReFocus is disabled
+      const clickedNodeChangedWithoutReFocus =
+        prevProps.clickedNode !== this.props.clickedNode &&
+        !this.props.nodeReFocus;
+
+      if (
+        metaSidebarChanged ||
+        codeChangedWithoutMetaSidebar ||
+        clickedNodeChangedWithoutReFocus
+      ) {
         drawNodes.call(this, changed);
         drawEdges.call(this, changed);
-
         return;
       }
 
-      if (prevProps.visibleCode !== this.props.visibleCode) {
-        if (!this.props.visibleMetaSidebar) {
-          drawNodes.call(this, changed);
-          drawEdges.call(this, changed);
-
-          return;
-        }
-      }
-
       this.resetView(preventZoom);
     } else {
       this.onChartZoomChanged(chartZoom);
@@ -1000,6 +1006,7 @@ export const mapStateToProps = (state, ownProps) => ({
   slicedPipeline: getSlicedPipeline(state),
   isSlicingPipelineApplied: state.slice.apply,
   visibleSlicing: state.visible.slicing,
+  nodeReFocus: state.modeOptions.reFocus,
   runCommand: getRunCommand(state),
   ...ownProps,
 });

src/components/flowchart/flowchart.test.js

@@ -492,6 +492,7 @@ describe('FlowChart', () => {
       runCommand: expect.any(Object),
       modularPipelineIds: expect.any(Object),
       visibleSlicing: expect.any(Boolean),
+      nodeReFocus: expect.any(Boolean),
     };
     expect(mapStateToProps(mockState.spaceflights)).toEqual(expectedResult);
   });

src/reducers/index.js

@@ -89,6 +89,7 @@ const combinedReducer = combineReducers({
   // These props don't have any actions associated with them
   display: createReducer(null),
   dataSource: createReducer(null),
+  modeOptions: createReducer({}),
   edge: createReducer({}),
   // These props have very simple non-nested actions
   chartSize: createReducer({}, UPDATE_CHART_SIZE, 'chartSize'),

src/store/initial-state.js

@@ -58,6 +58,9 @@ export const createInitialState = () => ({
     zoomToolbar: true,
     metadataPanel: true,
   },
+  modeOptions: {
+    reFocus: true,
+  },
   zoom: {},
   runsMetadata: {},
 });