From cbb35d2eb4a034c14006a663fe786ba647ce0a1d Mon Sep 17 00:00:00 2001 From: Jitendra Gundaniya Date: Tue, 29 Oct 2024 15:20:30 +0000 Subject: [PATCH 1/7] Introduce modeOptions prop object with reFocus prop Signed-off-by: Jitendra Gundaniya --- src/components/flowchart/flowchart.js | 30 +++++++++++++++++---------- src/reducers/index.js | 1 + src/store/initial-state.js | 3 +++ 3 files changed, 23 insertions(+), 11 deletions(-) diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js index 1afc5c4b93..87c8ac3623 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 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); @@ -467,6 +473,7 @@ export class FlowChart extends Component { * Zoom and scale to fit graph and any selected node in view */ resetView(preventZoom) { + console.log('resetView, preventZoom', preventZoom); const { chartSize, graphSize, clickedNode, nodes } = this.props; const { width: chartWidth, height: chartHeight } = chartSize; const { width: graphWidth, height: graphHeight } = graphSize; @@ -1000,6 +1007,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, }); diff --git a/src/reducers/index.js b/src/reducers/index.js index d2608fa252..fee11314b9 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), + modeOptions: 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..c82de20d68 100644 --- a/src/store/initial-state.js +++ b/src/store/initial-state.js @@ -58,6 +58,9 @@ export const createInitialState = () => ({ zoomToolbar: true, metadataPanel: true, }, + modeOptions: { + reFocus: true, + }, zoom: {}, runsMetadata: {}, }); From 3e8101a8489ddc4a91bdda8f05ef6f3a81756b7b Mon Sep 17 00:00:00 2001 From: Jitendra Gundaniya Date: Tue, 29 Oct 2024 15:24:05 +0000 Subject: [PATCH 2/7] test fix Signed-off-by: Jitendra Gundaniya --- src/components/flowchart/flowchart.test.js | 1 + 1 file changed, 1 insertion(+) 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); }); From 07e2ebf6688f478125b2b314c8c0afb97455589a Mon Sep 17 00:00:00 2001 From: Jitendra Gundaniya Date: Tue, 29 Oct 2024 15:43:22 +0000 Subject: [PATCH 3/7] Release note added Signed-off-by: Jitendra Gundaniya --- RELEASE.md | 1 + src/components/flowchart/flowchart.js | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/RELEASE.md b/RELEASE.md index 66d6a51a24..0559097d54 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 `modeOptions` prop object with `reFocus` prop (#2161) ## Bug fixes and other changes diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js index 87c8ac3623..927bcb0572 100644 --- a/src/components/flowchart/flowchart.js +++ b/src/components/flowchart/flowchart.js @@ -473,7 +473,6 @@ export class FlowChart extends Component { * Zoom and scale to fit graph and any selected node in view */ resetView(preventZoom) { - console.log('resetView, preventZoom', preventZoom); const { chartSize, graphSize, clickedNode, nodes } = this.props; const { width: chartWidth, height: chartHeight } = chartSize; const { width: graphWidth, height: graphHeight } = graphSize; From be54fa50815eda5d88491343a6de9a67f5a7d6c2 Mon Sep 17 00:00:00 2001 From: Jitendra Gundaniya Date: Tue, 29 Oct 2024 16:43:39 +0000 Subject: [PATCH 4/7] Documentation Signed-off-by: Jitendra Gundaniya --- README.npm.md | 5 +++++ src/components/app/app.js | 6 ++++++ 2 files changed, 11 insertions(+) diff --git a/README.npm.md b/README.npm.md index f4632b88de..0ef5efe0ff 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} }, + modeOptions: { + reFocus: true, + }, theme: "dark" }} /> @@ -161,6 +164,8 @@ 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.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: {: boolean}}` | - | Configuration for tag options | | options.theme | string | dark | select `Kedro-Viz` theme : dark/light | diff --git a/src/components/app/app.js b/src/components/app/app.js index 340dc1e44e..108eb80de0 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 + */ + modeOptions: PropTypes.shape({ + reFocus: PropTypes.bool, + }), /** * Override the default enabled/disabled node types */ From d52cdc98ec4320d731b9499caad7fd216e2c81c8 Mon Sep 17 00:00:00 2001 From: Jitendra Gundaniya Date: Thu, 31 Oct 2024 14:47:36 +0000 Subject: [PATCH 5/7] Code review change Signed-off-by: Jitendra Gundaniya --- src/components/flowchart/flowchart.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js index 927bcb0572..1b3d3f49b2 100644 --- a/src/components/flowchart/flowchart.js +++ b/src/components/flowchart/flowchart.js @@ -220,10 +220,10 @@ 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 - const metaSidebarChanged = + const metaSidebarViewChanged = prevProps.visibleMetaSidebar !== this.props.visibleMetaSidebar; - const codeChangedWithoutMetaSidebar = + const codeViewChangedWithoutMetaSidebar = prevProps.visibleCode !== this.props.visibleCode && !this.props.visibleMetaSidebar; @@ -233,8 +233,8 @@ export class FlowChart extends Component { !this.props.nodeReFocus; if ( - metaSidebarChanged || - codeChangedWithoutMetaSidebar || + metaSidebarViewChanged || + codeViewChangedWithoutMetaSidebar || clickedNodeChangedWithoutReFocus ) { drawNodes.call(this, changed); From b8d1cf1fe7f5019eb2d1d1e1e43743ef67572fd4 Mon Sep 17 00:00:00 2001 From: Jitendra Gundaniya Date: Fri, 1 Nov 2024 10:29:16 +0000 Subject: [PATCH 6/7] Prop renamed to behaviour from modeOptions Signed-off-by: Jitendra Gundaniya --- README.npm.md | 7 ++++--- RELEASE.md | 2 +- src/components/app/app.js | 2 +- src/components/container/container.js | 14 +++++++++++++- src/components/flowchart/flowchart.js | 2 +- src/reducers/index.js | 2 +- src/store/initial-state.js | 2 +- 7 files changed, 22 insertions(+), 9 deletions(-) diff --git a/README.npm.md b/README.npm.md index 0ef5efe0ff..6ef817bc4b 100644 --- a/README.npm.md +++ b/README.npm.md @@ -140,7 +140,7 @@ The example below demonstrates how to configure your kedro-viz using different ` tag: { enabled: {companies: true} }, - modeOptions: { + behaviour: { reFocus: true, }, theme: "dark" @@ -164,8 +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.modeOptions | | | | -| `reFocus` | boolean | true | Enable/Disable node re-focus on click +| 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 788fc7cafb..bf9e4cff8b 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -11,7 +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) +- 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 108eb80de0..b1469854b6 100644 --- a/src/components/app/app.js +++ b/src/components/app/app.js @@ -122,7 +122,7 @@ App.propTypes = { /** * Whether to re-focus the graph when a node is clicked */ - modeOptions: PropTypes.shape({ + behaviour: PropTypes.shape({ reFocus: PropTypes.bool, }), /** diff --git a/src/components/container/container.js b/src/components/container/container.js index e533211e1a..c3c80f5d8f 100644 --- a/src/components/container/container.js +++ b/src/components/container/container.js @@ -9,7 +9,19 @@ import './container.scss'; */ const Container = () => ( <> - + ); diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js index 1b3d3f49b2..58d300c30d 100644 --- a/src/components/flowchart/flowchart.js +++ b/src/components/flowchart/flowchart.js @@ -1006,7 +1006,7 @@ export const mapStateToProps = (state, ownProps) => ({ slicedPipeline: getSlicedPipeline(state), isSlicingPipelineApplied: state.slice.apply, visibleSlicing: state.visible.slicing, - nodeReFocus: state.modeOptions.reFocus, + nodeReFocus: state.behaviour.reFocus, runCommand: getRunCommand(state), ...ownProps, }); diff --git a/src/reducers/index.js b/src/reducers/index.js index fee11314b9..79af193f24 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -89,7 +89,7 @@ const combinedReducer = combineReducers({ // These props don't have any actions associated with them display: createReducer(null), dataSource: createReducer(null), - modeOptions: createReducer({}), + 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 c82de20d68..60f2423310 100644 --- a/src/store/initial-state.js +++ b/src/store/initial-state.js @@ -58,7 +58,7 @@ export const createInitialState = () => ({ zoomToolbar: true, metadataPanel: true, }, - modeOptions: { + behaviour: { reFocus: true, }, zoom: {}, From f04975d2afd8e5ffa1ccb3099b3c61512d56f59e Mon Sep 17 00:00:00 2001 From: Jitendra Gundaniya Date: Fri, 1 Nov 2024 10:35:16 +0000 Subject: [PATCH 7/7] Revert container changes Signed-off-by: Jitendra Gundaniya --- src/components/container/container.js | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/src/components/container/container.js b/src/components/container/container.js index c3c80f5d8f..e533211e1a 100644 --- a/src/components/container/container.js +++ b/src/components/container/container.js @@ -9,19 +9,7 @@ import './container.scss'; */ const Container = () => ( <> - + );