Internal redux state structure refactor

src/actions/pipelines.js

@@ -98,8 +98,7 @@ export function loadInitialPipelineData() {
     const url = getUrl('main');
     // obtain the status of expandAllPipelines to decide whether it needs to overwrite the
     // list of visible nodes
-    const expandAllPipelines =
-      state.display.expandAllPipelines || state.expandAllPipelines;
+    const expandAllPipelines = state.expandAllPipelines;
     let newState = await loadJsonData(url).then((data) =>
       preparePipelineState(data, true, expandAllPipelines)
     );
@@ -122,7 +121,7 @@ export function loadInitialPipelineData() {
  */
 export function loadPipelineData(pipelineID) {
   return async function (dispatch, getState) {
-    const { dataSource, pipeline, display, expandAllPipelines } = getState();
+    const { dataSource, pipeline, expandAllPipelines } = getState();
 
     if (pipelineID && pipelineID === pipeline.active) {
       return;
@@ -136,10 +135,8 @@ export function loadPipelineData(pipelineID) {
         active: pipelineID,
       });
 
-      const shouldExpandAllPipelines =
-        display.expandAllPipelines || expandAllPipelines;
       const newState = await loadJsonData(url).then((data) =>
-        preparePipelineState(data, false, shouldExpandAllPipelines)
+        preparePipelineState(data, false, expandAllPipelines)
       );
 
       // Set active pipeline here rather than dispatching two separate actions,

src/components/app/app.js

@@ -91,24 +91,18 @@ App.propTypes = {
    */
   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
+   * Determines if certain elements are displayed, e.g globalNavigation, sidebar
    */
   display: PropTypes.shape({
-    globalToolbar: PropTypes.bool,
+    globalNavigation: PropTypes.bool,
     sidebar: PropTypes.bool,
     miniMap: PropTypes.bool,
-    expandAllPipelines: PropTypes.bool,
+    expandPipelinesBtn: PropTypes.bool,
+    exportBtn: PropTypes.bool,
+    labelBtn: PropTypes.bool,
+    layerBtn: PropTypes.bool,
   }),
+  expandAllPipelines: PropTypes.bool,
 };
 
 export default App;

src/components/export-modal/export-modal.js

@@ -10,9 +10,6 @@ import './export-modal.scss';
  * Modal to allow users to choose between SVG/PNG export formats
  */
 const ExportModal = ({ graphSize, theme, onToggle, visible }) => {
-  if (!visible.exportBtn) {
-    return null;
-  }
   return (
     <Modal
       closeModal={() => onToggle(false)}

src/components/export-modal/export-modal.test.js

@@ -29,7 +29,6 @@ describe('ExportModal', () => {
       }),
       theme: expect.stringMatching(/light|dark/),
       visible: expect.objectContaining({
-        exportBtn: expect.any(Boolean),
         exportModal: expect.any(Boolean),
         settingsModal: expect.any(Boolean),
       }),

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

@@ -32,6 +32,7 @@ export const FlowchartPrimaryToolbar = ({
   onToggleTextLabels,
   textLabels,
   visible,
+  display,
   visibleLayers,
   expandedPipelines,
   onToggleExpandAllPipelines,
@@ -59,7 +60,7 @@ export const FlowchartPrimaryToolbar = ({
           icon={LabelIcon}
           labelText={`${textLabels ? 'Hide' : 'Show'} text labels`}
           onClick={() => onToggleTextLabels(!textLabels)}
-          visible={visible.labelBtn}
+          visible={display.labelBtn}
         />
         <IconButton
           active={visibleLayers}
@@ -71,7 +72,7 @@ export const FlowchartPrimaryToolbar = ({
           icon={LayersIcon}
           labelText={`${visibleLayers ? 'Hide' : 'Show'} layers`}
           onClick={() => onToggleLayers(!visibleLayers)}
-          visible={visible.layerBtn}
+          visible={display.layerBtn}
         />
         <IconButton
           active={expandedPipelines}
@@ -88,7 +89,7 @@ export const FlowchartPrimaryToolbar = ({
           }
           data-test={'expand-all-pipelines-toggle'}
           onClick={handleToggleExpandAllPipelines}
-          visible={visible.pipelineBtn}
+          visible={display.expandPipelinesBtn}
         />
         <IconButton
           ariaLabel="Export graph as SVG or PNG"
@@ -97,7 +98,7 @@ export const FlowchartPrimaryToolbar = ({
           icon={ExportIcon}
           labelText="Export visualisation"
           onClick={() => onToggleExportModal(true)}
-          visible={visible.exportBtn}
+          visible={display.exportBtn}
         />
       </PrimaryToolbar>
     </>
@@ -109,6 +110,7 @@ export const mapStateToProps = (state) => ({
   displaySidebar: state.display.sidebar,
   textLabels: state.textLabels,
   visible: state.visible,
+  display: state.display,
   visibleLayers: Boolean(getVisibleLayerIDs(state).length),
   expandedPipelines: state.expandAllPipelines,
 });

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

@@ -18,25 +18,25 @@ describe('PrimaryToolbar', () => {
     expect(wrapper.find('.pipeline-icon-toolbar__button').length).toBe(5);
   });
 
-  it('hides all buttons (except menu button) when visible prop is false for each of them', () => {
-    const visible = {
+  it('hides all buttons (except menu button) when display prop is false for each of them', () => {
+    const display = {
       labelBtn: false,
       layerBtn: false,
       exportBtn: false,
-      pipelineBtn: false,
+      expandPipelinesBtn: false,
     };
     const wrapper = setup.mount(<ConnectedFlowchartPrimaryToolbar />, {
-      visible,
+      display,
     });
     expect(wrapper.find('.pipeline-icon-toolbar__button').length).toBe(1);
   });
 
-  it('hides one button when visible prop is false for one of them', () => {
-    const visible = {
+  it('hides one button when display prop is false for one of them', () => {
+    const display = {
       labelBtn: false,
     };
     const wrapper = setup.mount(<ConnectedFlowchartPrimaryToolbar />, {
-      visible,
+      display,
     });
     expect(wrapper.find('.pipeline-icon-toolbar__button').length).toBe(4);
   });
@@ -57,6 +57,7 @@ describe('PrimaryToolbar', () => {
         displaySidebar: true,
         textLabels: mockState.spaceflights.textLabels,
         visible: mockState.spaceflights.visible,
+        display: mockState.spaceflights.display,
         [callback]: mockFn,
       };
       const wrapper = setup.mount(<FlowchartPrimaryToolbar {...props} />);
@@ -73,14 +74,16 @@ describe('PrimaryToolbar', () => {
       expandedPipelines: expect.any(Boolean),
       displaySidebar: true,
       visible: expect.objectContaining({
-        exportBtn: expect.any(Boolean),
         exportModal: expect.any(Boolean),
         metadataModal: expect.any(Boolean),
         settingsModal: expect.any(Boolean),
+        sidebar: expect.any(Boolean),
+      }),
+      display: expect.objectContaining({
+        exportBtn: expect.any(Boolean),
         labelBtn: expect.any(Boolean),
         layerBtn: expect.any(Boolean),
-        pipelineBtn: expect.any(Boolean),
-        sidebar: expect.any(Boolean),
+        expandPipelinesBtn: expect.any(Boolean),
       }),
       visibleLayers: expect.any(Boolean),
     };

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

@@ -58,6 +58,7 @@ export const FlowChartWrapper = ({
   pipelines,
   sidebarVisible,
   activePipeline,
+  displayExportBtn,
 }) => {
   const history = useHistory();
   const { pathname, search } = useLocation();
@@ -349,7 +350,7 @@ export const FlowChartWrapper = ({
           </div>
           {isRunningLocally() ? null : <ShareableUrlMetadata />}
         </div>
-        <ExportModal />
+        {displayExportBtn && <ExportModal />}
         <MetadataModal />
       </div>
     );
@@ -366,6 +367,7 @@ export const mapStateToProps = (state) => ({
   pipelines: state.pipeline.ids,
   activePipeline: state.pipeline.active,
   sidebarVisible: state.visible.sidebar,
+  displayExportBtn: state.display.exportBtn,
 });
 
 export const mapDispatchToProps = (dispatch) => ({

src/components/flowchart/flowchart.js

@@ -596,7 +596,7 @@ export class FlowChart extends Component {
    * Render React elements
    */
   render() {
-    const { chartSize, layers, visibleGraph, displayGlobalToolbar } =
+    const { chartSize, layers, visibleGraph, displayGlobalNavigation } =
       this.props;
     const { outerWidth = 0, outerHeight = 0 } = chartSize;
 
@@ -656,7 +656,7 @@ export class FlowChart extends Component {
           className={classnames('pipeline-flowchart__layer-names', {
             'pipeline-flowchart__layer-names--visible': layers.length,
             'pipeline-flowchart__layer-names--no-global-toolbar':
-              !displayGlobalToolbar,
+              !displayGlobalNavigation,
           })}
           ref={this.layerNamesRef}
         />
@@ -689,7 +689,7 @@ export const mapStateToProps = (state, ownProps) => ({
   clickedNode: state.node.clicked,
   chartSize: getChartSize(state),
   chartZoom: getChartZoom(state),
-  displayGlobalToolbar: state.display.globalToolbar,
+  displayGlobalNavigation: state.display.globalNavigation,
   edges: state.graph.edges || emptyEdges,
   focusMode: state.visible.modularPipelineFocusMode,
   graphSize: state.graph.size || emptyGraphSize,