Exposing internal state via Kedro Viz React component props

RELEASE.md

@@ -14,6 +14,7 @@ Please follow the established format:
 - Display published URLs. (#1907)
 - Conditionally move session store and stats file to .viz directory. (#1915)
 - Refactor namespace pipelines. (#1897)
+- Expose the internal Redux state through `options` prop while using Kedro-Viz as a React component. (#1969)
 
 ## Bug fixes and other changes
 

src/actions/index.js

@@ -331,3 +331,16 @@ export function updateRunNotes(notes, runId) {
     runId,
   };
 }
+
+export const UPDATE_STATE_FROM_OPTIONS = 'UPDATE_STATE_FROM_OPTIONS';
+
+/**
+ * Update state with latest options prop coming from the react component
+ * @param {Object} updatedOptions
+ */
+export const updateStateFromOptions = (updatedOptions) => {
+  return {
+    type: UPDATE_STATE_FROM_OPTIONS,
+    payload: updatedOptions,
+  };
+};

src/components/app/app.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import 'what-input';
 import configureStore from '../../store';
-import { resetData } from '../../actions';
+import { isEqual } from 'lodash/fp';
+import { resetData, updateStateFromOptions } from '../../actions';
 import { loadInitialPipelineData } from '../../actions/pipelines';
 import Wrapper from '../wrapper';
 import getInitialState, {
@@ -38,6 +39,9 @@ class App extends React.Component {
     if (prevProps.data !== this.props.data) {
       this.updatePipelineData();
     }
+    if (!isEqual(prevProps.options, this.props.options)) {
+      this.store.dispatch(updateStateFromOptions(this.props.options));
+    }
   }
 
   /**
@@ -85,29 +89,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,
@@ -58,6 +59,8 @@ export const FlowChartWrapper = ({
   pipelines,
   sidebarVisible,
   activePipeline,
+  tag,
+  nodeType,
 }) => {
   const history = useHistory();
   const { pathname, search } = useLocation();
@@ -97,18 +100,14 @@ export const FlowChartWrapper = ({
           }
         },
         tag: (value) => {
-          if (!searchParams.has(params.tags)) {
-            const enabledKeys = getKeysByValue(value.enabled, true);
-            enabledKeys && toSetQueryParam(params.tags, enabledKeys);
-          }
+          const enabledKeys = getKeysByValue(value.enabled, true);
+          enabledKeys && toSetQueryParam(params.tags, enabledKeys);
         },
         nodeType: (value) => {
-          if (!searchParams.has(params.types)) {
-            const disabledKeys = getKeysByValue(value.disabled, false);
-            // Replace task with node to keep UI label & the URL consistent
-            const mappedDisabledNodes = mapNodeTypes(disabledKeys);
-            disabledKeys && toSetQueryParam(params.types, mappedDisabledNodes);
-          }
+          const disabledKeys = getKeysByValue(value.disabled, false);
+          // Replace task with node to keep UI label & the URL consistent
+          const mappedDisabledNodes = mapNodeTypes(disabledKeys);
+          disabledKeys && toSetQueryParam(params.types, mappedDisabledNodes);
         },
         expandAllPipelines: (value) => {
           if (!searchParams.has(params.expandAll)) {
@@ -128,7 +127,7 @@ export const FlowChartWrapper = ({
   useEffect(() => {
     setParamsFromLocalStorage(activePipeline);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activePipeline]);
+  }, [activePipeline, tag, nodeType]);
 
   const resetErrorMessage = () => {
     setErrorMessage({});
@@ -308,7 +307,7 @@ export const FlowChartWrapper = ({
   if (isInvalidUrl) {
     return (
       <div className="kedro-pipeline">
-        <Sidebar />
+        {displaySidebar && <Sidebar />}
         <MetaData />
         <PipelineWarning
           errorMessage={errorMessage}
@@ -320,7 +319,7 @@ export const FlowChartWrapper = ({
   } else {
     return (
       <div className="kedro-pipeline">
-        <Sidebar />
+        {displaySidebar && <Sidebar />}
         <MetaData />
         <div className="pipeline-wrapper">
           <PipelineWarning />
@@ -358,6 +357,7 @@ export const FlowChartWrapper = ({
 
 export const mapStateToProps = (state) => ({
   fullNodeNames: getNodeFullName(state),
+  displaySidebar: state.display.sidebar,
   graph: state.graph,
   loading: isLoading(state),
   metadataVisible: getVisibleMetaSidebar(state),
@@ -366,6 +366,8 @@ export const mapStateToProps = (state) => ({
   pipelines: state.pipeline.ids,
   activePipeline: state.pipeline.active,
   sidebarVisible: state.visible.sidebar,
+  tag: state.tag.enabled,
+  nodeType: state.nodeType.disabled,
 });
 
 export const mapDispatchToProps = (dispatch) => ({

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,
 } 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) {
+    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;