Introduce metadataPanel prop in Kedro-Viz react component

RELEASE.md

@@ -13,6 +13,7 @@ Please follow the established format:
 - Enable/disable preview for all the datasets when publishing Kedro-Viz from UI. (#1895)
 - Display published URLs. (#1907)
 - Conditionally move session store and stats file to .viz directory. (#1915)
+- Introduce `metadataPanel` in `display` prop in Kedro-Viz react component. (#1965)
 
 ## Bug fixes and other changes
 

src/components/app/app.js

@@ -108,6 +108,7 @@ App.propTypes = {
     sidebar: PropTypes.bool,
     miniMap: PropTypes.bool,
     expandAllPipelines: PropTypes.bool,
+    metadataPanel: PropTypes.bool,
   }),
 };
 

src/components/flowchart-wrapper/flowchart-wrapper.js

@@ -58,6 +58,7 @@ export const FlowChartWrapper = ({
   pipelines,
   sidebarVisible,
   activePipeline,
+  displayMetadataPanel,
 }) => {
   const history = useHistory();
   const { pathname, search } = useLocation();
@@ -309,7 +310,7 @@ export const FlowChartWrapper = ({
     return (
       <div className="kedro-pipeline">
         <Sidebar />
-        <MetaData />
+        {displayMetadataPanel && <MetaData />}
         <PipelineWarning
           errorMessage={errorMessage}
           invalidUrl={isInvalidUrl}
@@ -321,7 +322,7 @@ export const FlowChartWrapper = ({
     return (
       <div className="kedro-pipeline">
         <Sidebar />
-        <MetaData />
+        {displayMetadataPanel && <MetaData />}
         <div className="pipeline-wrapper">
           <PipelineWarning />
           <FlowChart />
@@ -366,6 +367,7 @@ export const mapStateToProps = (state) => ({
   pipelines: state.pipeline.ids,
   activePipeline: state.pipeline.active,
   sidebarVisible: state.visible.sidebar,
+  displayMetadataPanel: state.display.metadataPanel,
 });
 
 export const mapDispatchToProps = (dispatch) => ({

src/components/flowchart/flowchart.js

@@ -4,7 +4,11 @@ import classnames from 'classnames';
 import { select } from 'd3-selection';
 import { updateChartSize, updateZoom } from '../../actions';
 import { toggleSingleModularPipelineExpanded } from '../../actions/modular-pipelines';
-import { loadNodeData, toggleNodeHovered } from '../../actions/nodes';
+import {
+  loadNodeData,
+  toggleNodeHovered,
+  toggleNodeClicked,
+} from '../../actions/nodes';
 import {
   getNodeActive,
   getNodeSelected,
@@ -446,11 +450,24 @@ export class FlowChart extends Component {
    * @param {Object} node Datum for a single node
    */
   handleNodeClick = (event, node) => {
-    if (node.type === 'modularPipeline') {
-      this.props.onClickToExpandModularPipeline(node.id);
+    const { type, id } = node;
+    const {
+      onClickToExpandModularPipeline,
+      displayMetadataPanel,
+      onLoadNodeData,
+      toSelectedNode,
+      onToggleNodeClicked,
+    } = this.props;
+
+    if (type === 'modularPipeline') {
+      onClickToExpandModularPipeline(id);
     } else {
-      this.props.onLoadNodeData(node.id);
-      this.props.toSelectedNode(node);
+      if (displayMetadataPanel) {
+        onLoadNodeData(id);
+        toSelectedNode(node);
+      } else {
+        onToggleNodeClicked(id);
+      }
     }
     event.stopPropagation();
   };
@@ -690,6 +707,7 @@ export const mapStateToProps = (state, ownProps) => ({
   chartSize: getChartSize(state),
   chartZoom: getChartZoom(state),
   displayGlobalToolbar: state.display.globalToolbar,
+  displayMetadataPanel: state.display.metadataPanel,
   edges: state.graph.edges || emptyEdges,
   focusMode: state.visible.modularPipelineFocusMode,
   graphSize: state.graph.size || emptyGraphSize,
@@ -718,6 +736,9 @@ export const mapDispatchToProps = (dispatch, ownProps) => ({
   onLoadNodeData: (nodeClicked) => {
     dispatch(loadNodeData(nodeClicked));
   },
+  onToggleNodeClicked: (id) => {
+    dispatch(toggleNodeClicked(id));
+  },
   onToggleNodeHovered: (nodeHovered) => {
     dispatch(toggleNodeHovered(nodeHovered));
   },

src/components/flowchart/flowchart.test.js

@@ -486,6 +486,7 @@ describe('FlowChart', () => {
       inputOutputDataEdges: expect.any(Object),
       focusMode: expect.any(Object),
       displayGlobalToolbar: expect.any(Boolean),
+      displayMetadataPanel: expect.any(Boolean),
     };
     expect(mapStateToProps(mockState.spaceflights)).toEqual(expectedResult);
   });

src/selectors/metadata.js

@@ -3,6 +3,7 @@ import { getNodeLabel, getNodeFullName, getNodeName } from './nodes';
 import { prettifyName, stripNamespace } from '../utils';
 
 const getClickedNode = (state) => state.node.clicked;
+const getDisplayMetadataPanel = (state) => state.display.metadataPanel;
 /**
  * Comparison for sorting alphabetically by name, otherwise by value
  */
@@ -12,8 +13,8 @@ const sortAlpha = (a, b) => (a.name || a).localeCompare(b.name || b);
  * Returns true if metadata sidebar is visible
  */
 export const getVisibleMetaSidebar = createSelector(
-  [getClickedNode],
-  (nodeClicked) => Boolean(nodeClicked)
+  [getClickedNode, getDisplayMetadataPanel],
+  (nodeClicked, metadataPanel) => (metadataPanel ? Boolean(nodeClicked) : false)
 );
 
 /**

src/store/initial-state.js

@@ -51,6 +51,7 @@ export const createInitialState = () => ({
     sidebar: true,
     miniMap: true,
     expandAllPipelines: false,
+    metadataPanel: true,
   },
   zoom: {},
   runsMetadata: {},