Exposing internal state via Kedro Viz React component props

RELEASE.md

@@ -14,6 +14,7 @@
 - Display published URLs. (#1907)
 - Conditionally move session store and stats file to .viz directory. (#1915)
 - Refactor namespace pipelines. (#1897)
+- Expose internal Redux state via Kedro-Viz React component props `options`. (#1969)
 
 ## Bug fixes and other changes
 

src/actions/index.js

@@ -331,3 +331,17 @@ export function updateRunNotes(notes, runId) {
     runId,
   };
 }
+
+export const UPDATE_STATE_FROM_OPTIONS_PROPS =
+  'UPDATE_STATE_FROM_OPTIONS_PROPS';
+
+/**
+ * Update state with latest options props coming from the react component
+ * @param {Object} updatedProps
+ */
+export const updateStateFromOptionsProps = (updatedProps) => {
+  return {
+    type: UPDATE_STATE_FROM_OPTIONS_PROPS,
+    payload: updatedProps,
+  };
+};

src/components/app/app.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import 'what-input';
 import configureStore from '../../store';
-import { resetData } from '../../actions';
+import { resetData, updateStateFromOptionsProps } from '../../actions';
 import { loadInitialPipelineData } from '../../actions/pipelines';
 import Wrapper from '../wrapper';
 import getInitialState, {
@@ -38,6 +38,9 @@ class App extends React.Component {
     if (prevProps.data !== this.props.data) {
       this.updatePipelineData();
     }
+    if (prevProps.options !== this.props.options) {
+      this.store.dispatch(updateStateFromOptionsProps(this.props.options));
+    }
   }
 
   /**
@@ -85,29 +88,47 @@ App.propTypes = {
       tags: PropTypes.array,
     }),
   ]),
-  /**
-   * Specify the theme: Either 'light' or 'dark'.
-   * If set, this will override the localStorage value.
-   */
-  theme: PropTypes.oneOf(['dark', 'light']),
-  /**
-   * Override visibility of various features, e.g. icon buttons
-   */
-  visible: PropTypes.shape({
-    labelBtn: PropTypes.bool,
-    layerBtn: PropTypes.bool,
-    exportBtn: PropTypes.bool,
-    pipelineBtn: PropTypes.bool,
-    sidebar: PropTypes.bool,
-  }),
-  /**
-   * Determines if certain elements are displayed, e.g global tool bar, sidebar
-   */
-  display: PropTypes.shape({
-    globalToolbar: PropTypes.bool,
-    sidebar: PropTypes.bool,
-    miniMap: PropTypes.bool,
-    expandAllPipelines: PropTypes.bool,
+  options: PropTypes.shape({
+    /**
+     * Specify the theme: Either 'light' or 'dark'.
+     * If set, this will override the localStorage value.
+     */
+    theme: PropTypes.oneOf(['dark', 'light']),
+    /**
+     * Override visibility of various features, e.g. icon buttons
+     */
+    visible: PropTypes.shape({
+      labelBtn: PropTypes.bool,
+      layerBtn: PropTypes.bool,
+      exportBtn: PropTypes.bool,
+      pipelineBtn: PropTypes.bool,
+      sidebar: PropTypes.bool,
+    }),
+    /**
+     * Determines if certain elements are displayed, e.g global tool bar, sidebar
+     */
+    display: PropTypes.shape({
+      globalToolbar: PropTypes.bool,
+      sidebar: PropTypes.bool,
+      miniMap: PropTypes.bool,
+      expandAllPipelines: PropTypes.bool,
+    }),
+    /**
+     * Override the default enabled/disabled tags
+     */
+    tag: PropTypes.shape({
+      enabled: PropTypes.objectOf(PropTypes.bool),
+    }),
+    /**
+     * Override the default enabled/disabled node types
+     */
+    nodeType: PropTypes.shape({
+      disabled: PropTypes.shape({
+        parameters: PropTypes.bool,
+        task: PropTypes.bool,
+        data: PropTypes.bool,
+      }),
+    }),
   }),
 };
 

src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.js

@@ -25,7 +25,6 @@ import { useGeneratePathname } from '../../utils/hooks/use-generate-pathname';
  */
 export const FlowchartPrimaryToolbar = ({
   disableLayerBtn,
-  displaySidebar,
   onToggleExportModal,
   onToggleLayers,
   onToggleSidebar,
@@ -46,11 +45,7 @@ export const FlowchartPrimaryToolbar = ({
 
   return (
     <>
-      <PrimaryToolbar
-        displaySidebar={displaySidebar}
-        onToggleSidebar={onToggleSidebar}
-        visible={visible}
-      >
+      <PrimaryToolbar onToggleSidebar={onToggleSidebar} visible={visible}>
         <IconButton
           active={textLabels}
           ariaLabel={`${textLabels ? 'Hide' : 'Show'} text labels`}
@@ -106,7 +101,6 @@ export const FlowchartPrimaryToolbar = ({
 
 export const mapStateToProps = (state) => ({
   disableLayerBtn: !state.layer.ids.length,
-  displaySidebar: state.display.sidebar,
   textLabels: state.textLabels,
   visible: state.visible,
   visibleLayers: Boolean(getVisibleLayerIDs(state).length),

src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.test.js

@@ -26,7 +26,7 @@ describe('PrimaryToolbar', () => {
       pipelineBtn: false,
     };
     const wrapper = setup.mount(<ConnectedFlowchartPrimaryToolbar />, {
-      visible,
+      options: { visible },
     });
     expect(wrapper.find('.pipeline-icon-toolbar__button').length).toBe(1);
   });
@@ -36,7 +36,7 @@ describe('PrimaryToolbar', () => {
       labelBtn: false,
     };
     const wrapper = setup.mount(<ConnectedFlowchartPrimaryToolbar />, {
-      visible,
+      options: { visible },
     });
     expect(wrapper.find('.pipeline-icon-toolbar__button').length).toBe(4);
   });
@@ -71,7 +71,6 @@ describe('PrimaryToolbar', () => {
       disableLayerBtn: expect.any(Boolean),
       textLabels: expect.any(Boolean),
       expandedPipelines: expect.any(Boolean),
-      displaySidebar: true,
       visible: expect.objectContaining({
         exportBtn: expect.any(Boolean),
         exportModal: expect.any(Boolean),

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

@@ -45,6 +45,7 @@ import './flowchart-wrapper.scss';
  */
 export const FlowChartWrapper = ({
   fullNodeNames,
+  displaySidebar,
   graph,
   loading,
   metadataVisible,
@@ -308,7 +309,7 @@ export const FlowChartWrapper = ({
   if (isInvalidUrl) {
     return (
       <div className="kedro-pipeline">
-        <Sidebar />
+        {displaySidebar && <Sidebar />}
         <MetaData />
         <PipelineWarning
           errorMessage={errorMessage}
@@ -320,7 +321,7 @@ export const FlowChartWrapper = ({
   } else {
     return (
       <div className="kedro-pipeline">
-        <Sidebar />
+        {displaySidebar && <Sidebar />}
         <MetaData />
         <div className="pipeline-wrapper">
           <PipelineWarning />
@@ -330,7 +331,7 @@ export const FlowChartWrapper = ({
               'pipeline-wrapper__go-back-btn--show':
                 goBackToExperimentTracking?.showGoBackBtn,
               'pipeline-wrapper__go-back-btn--show-sidebar-visible':
-                sidebarVisible,
+                sidebarVisible || displaySidebar,
               'pipeline-wrapper__go-back-btn--show-metadata-visible':
                 metadataVisible,
             })}
@@ -342,7 +343,8 @@ export const FlowChartWrapper = ({
           </div>
           <div
             className={classnames('pipeline-wrapper__loading', {
-              'pipeline-wrapper__loading--sidebar-visible': sidebarVisible,
+              'pipeline-wrapper__loading--sidebar-visible':
+                sidebarVisible || displaySidebar,
             })}
           >
             <LoadingIcon visible={loading} />
@@ -358,6 +360,7 @@ export const FlowChartWrapper = ({
 
 export const mapStateToProps = (state) => ({
   fullNodeNames: getNodeFullName(state),
+  displaySidebar: state.display.sidebar,
   graph: state.graph,
   loading: isLoading(state),
   metadataVisible: getVisibleMetaSidebar(state),

src/components/flowchart/flowchart.js

@@ -596,8 +596,13 @@ export class FlowChart extends Component {
    * Render React elements
    */
   render() {
-    const { chartSize, layers, visibleGraph, displayGlobalToolbar } =
-      this.props;
+    const {
+      chartSize,
+      layers,
+      visibleGraph,
+      displayGlobalToolbar,
+      displaySidebar,
+    } = this.props;
     const { outerWidth = 0, outerHeight = 0 } = chartSize;
 
     return (
@@ -657,6 +662,7 @@ export class FlowChart extends Component {
             'pipeline-flowchart__layer-names--visible': layers.length,
             'pipeline-flowchart__layer-names--no-global-toolbar':
               !displayGlobalToolbar,
+            'pipeline-flowchart__layer-names--no-sidebar': !displaySidebar,
           })}
           ref={this.layerNamesRef}
         />
@@ -690,6 +696,7 @@ export const mapStateToProps = (state, ownProps) => ({
   chartSize: getChartSize(state),
   chartZoom: getChartZoom(state),
   displayGlobalToolbar: state.display.globalToolbar,
+  displaySidebar: state.display.sidebar,
   edges: state.graph.edges || emptyEdges,
   focusMode: state.visible.modularPipelineFocusMode,
   graphSize: state.graph.size || emptyGraphSize,

src/components/flowchart/flowchart.test.js

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

src/components/flowchart/styles/_layers.scss

@@ -46,6 +46,10 @@
     left: -#{variables.$global-toolbar-width};
   }
 
+  &--no-sidebar {
+    left: 0;
+  }
+
   @media print {
     display: none;
   }

src/reducers/index.js

@@ -8,6 +8,7 @@ import node from './nodes';
 import nodeType from './node-type';
 import pipeline from './pipeline';
 import tag from './tags';
+import merge from 'lodash/merge';
 import modularPipeline from './modular-pipelines';
 import visible from './visible';
 import {
@@ -21,6 +22,7 @@ import {
   UPDATE_CHART_SIZE,
   UPDATE_ZOOM,
   TOGGLE_EXPAND_ALL_PIPELINES,
+  UPDATE_STATE_FROM_OPTIONS_PROPS,
 } from '../actions';
 import { TOGGLE_PARAMETERS_HOVERED } from '../actions';
 
@@ -53,6 +55,19 @@ function resetDataReducer(state = {}, action) {
   return state;
 }
 
+/**
+ * Update state from options props coming form react component
+ * @param {Object} state Complete app state
+ * @param {Object} action Redux action
+ * @return {Object} Updated state
+ */
+function updateStateFromPropsReducer(state = {}, action) {
+  if (action.type === UPDATE_STATE_FROM_OPTIONS_PROPS) {
+    return merge({}, state, action.payload);
+  }
+  return state;
+}
+
 const combinedReducer = combineReducers({
   // These props have their own reducers in other files
   flags,
@@ -103,7 +118,10 @@ const combinedReducer = combineReducers({
   ),
 });
 
-const rootReducer = (state, action) =>
-  combinedReducer(resetDataReducer(state, action), action);
+const rootReducer = (state, action) => {
+  let newState = resetDataReducer(state, action);
+  newState = updateStateFromPropsReducer(newState, action);
+  return combinedReducer(newState, action);
+};
 
 export default rootReducer;

src/selectors/layout.js

@@ -13,6 +13,8 @@ import {
 
 const getSizeWarningFlag = (state) => state.flags.sizewarning;
 const getVisibleSidebar = (state) => state.visible.sidebar;
+const getDisplayGlobalToolbar = (state) => state.display.globalToolbar;
+const getDisplaySidebar = (state) => state.display.sidebar;
 const getVisibleCode = (state) => state.visible.code;
 const getIgnoreLargeWarning = (state) => state.ignoreLargeWarning;
 const getGraphHasNodes = (state) => Boolean(state.graph?.nodes?.length);
@@ -70,15 +72,36 @@ export const getSidebarWidth = (visible, { open, closed }) =>
  * and add some useful new ones
  */
 export const getChartSize = createSelector(
-  [getVisibleSidebar, getVisibleMetaSidebar, getVisibleCode, getChartSizeState],
-  (visibleSidebar, visibleMetaSidebar, visibleCodeSidebar, chartSize) => {
+  [
+    getVisibleSidebar,
+    getVisibleMetaSidebar,
+    getVisibleCode,
+    getChartSizeState,
+    getDisplaySidebar,
+    getDisplayGlobalToolbar,
+  ],
+  (
+    visibleSidebar,
+    visibleMetaSidebar,
+    visibleCodeSidebar,
+    chartSize,
+    displaySidebar,
+    displayGlobalToolbar
+  ) => {
     const { left, top, width, height } = chartSize;
     if (!width || !height) {
       return {};
     }
 
+    // Determine if the sidebar is visible and open
+    const shouldDisplaySidebar = displaySidebar && visibleSidebar;
+
     // Get the actual sidebar width
-    const sidebarWidthActual = getSidebarWidth(visibleSidebar, sidebarWidth);
+    const sidebarWidthActual =
+      displaySidebar || displayGlobalToolbar
+        ? getSidebarWidth(shouldDisplaySidebar, sidebarWidth)
+        : 0;
+
     const metaSidebarWidthActual = getSidebarWidth(
       visibleMetaSidebar,
       metaSidebarWidth