From 4ec409efe9ab8f4fa72bcd6fa9150c46c3114810 Mon Sep 17 00:00:00 2001 From: Jitendra Gundaniya <38945204+jitu5@users.noreply.github.com> Date: Mon, 4 Nov 2024 11:07:36 +0000 Subject: [PATCH] Introduce `behaviour` prop object with `reFocus` prop (#2161) * Introduce modeOptions prop object with reFocus prop Signed-off-by: Jitendra Gundaniya * test fix Signed-off-by: Jitendra Gundaniya * Release note added Signed-off-by: Jitendra Gundaniya * Documentation Signed-off-by: Jitendra Gundaniya * Code review change Signed-off-by: Jitendra Gundaniya * Prop renamed to behaviour from modeOptions Signed-off-by: Jitendra Gundaniya * Revert container changes Signed-off-by: Jitendra Gundaniya --------- Signed-off-by: Jitendra Gundaniya --- README.npm.md | 6 +++++ RELEASE.md | 1 + src/components/app/app.js | 6 +++++ src/components/flowchart/flowchart.js | 29 ++++++++++++++-------- src/components/flowchart/flowchart.test.js | 1 + src/reducers/index.js | 1 + src/store/initial-state.js | 3 +++ 7 files changed, 36 insertions(+), 11 deletions(-) diff --git a/README.npm.md b/README.npm.md index f4632b88de..6ef817bc4b 100644 --- a/README.npm.md +++ b/README.npm.md @@ -140,6 +140,9 @@ The example below demonstrates how to configure your kedro-viz using different ` tag: { enabled: {companies: true} }, + behaviour: { + reFocus: true, + }, theme: "dark" }} /> @@ -161,6 +164,9 @@ The example below demonstrates how to configure your kedro-viz using different ` | `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.behaviour | | | | +| `reFocus` | boolean | true | In the flowchart, enable or disable the node re-focus behavior when clicking on nodes. + | options.nodeType | `{disabled: {parameters: boolean,task: boolean,data: boolean}}` | `{disabled: {parameters: true,task: false,data: false}}` | Configuration for node type options | | options.tag | `{enabled: {: boolean}}` | - | Configuration for tag options | | options.theme | string | dark | select `Kedro-Viz` theme : dark/light | diff --git a/RELEASE.md b/RELEASE.md index aaed5e9a5f..bf9e4cff8b 100644 --- a/RELEASE.md +++ b/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 `behaviour` prop object with `reFocus` prop (#2161) ## Bug fixes and other changes diff --git a/src/components/app/app.js b/src/components/app/app.js index 340dc1e44e..b1469854b6 100644 --- a/src/components/app/app.js +++ b/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 + */ + behaviour: PropTypes.shape({ + reFocus: PropTypes.bool, + }), /** * Override the default enabled/disabled node types */ diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js index 1afc5c4b93..58d300c30d 100644 --- a/src/components/flowchart/flowchart.js +++ b/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 metaSidebarViewChanged = + prevProps.visibleMetaSidebar !== this.props.visibleMetaSidebar; + + const codeViewChangedWithoutMetaSidebar = + 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 ( + metaSidebarViewChanged || + codeViewChangedWithoutMetaSidebar || + 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.behaviour.reFocus, runCommand: getRunCommand(state), ...ownProps, }); diff --git a/src/components/flowchart/flowchart.test.js b/src/components/flowchart/flowchart.test.js index fa9812df13..d3d8719fd3 100644 --- a/src/components/flowchart/flowchart.test.js +++ b/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); }); diff --git a/src/reducers/index.js b/src/reducers/index.js index d2608fa252..79af193f24 100644 --- a/src/reducers/index.js +++ b/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), + behaviour: createReducer({}), edge: createReducer({}), // These props have very simple non-nested actions chartSize: createReducer({}, UPDATE_CHART_SIZE, 'chartSize'), diff --git a/src/store/initial-state.js b/src/store/initial-state.js index 70e1915b17..60f2423310 100644 --- a/src/store/initial-state.js +++ b/src/store/initial-state.js @@ -58,6 +58,9 @@ export const createInitialState = () => ({ zoomToolbar: true, metadataPanel: true, }, + behaviour: { + reFocus: true, + }, zoom: {}, runsMetadata: {}, });