Refactor modular pipeline expansions to instantly update UI

src/actions/modular-pipelines.js

@@ -55,3 +55,12 @@ export function toggleModularPipelinesExpanded(expandedIDs) {
     expandedIDs,
   };
 }
+
+export const TOGGLE_ALL_MODULAR_PIPELINES_EXPANDED =
+  'TOGGLE_ALL_MODULAR_PIPELINES_EXPANDED';
+export function toggleAllModularPipelinesExpanded(expandAllPipelines) {
+  return {
+    type: TOGGLE_ALL_MODULAR_PIPELINES_EXPANDED,
+    expandAllPipelines,
+  };
+}

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

@@ -7,7 +7,10 @@ import {
   toggleTextLabels,
   toggleExpandAllPipelines,
 } from '../../actions';
-import { loadInitialPipelineData } from '../../actions/pipelines';
+import {
+  toggleModularPipelinesExpanded,
+  toggleAllModularPipelinesExpanded,
+} from '../../actions/modular-pipelines';
 import IconButton from '../ui/icon-button';
 import LabelIcon from '../icons/label';
 import ExportIcon from '../icons/export';
@@ -24,6 +27,7 @@ import { useGeneratePathname } from '../../utils/hooks/use-generate-pathname';
  * @param {Boolean} textLabels Whether text labels are displayed
  */
 export const FlowchartPrimaryToolbar = ({
+  modularPipelineIDs,
   disableLayerBtn,
   onToggleExportModal,
   onToggleLayers,
@@ -34,6 +38,7 @@ export const FlowchartPrimaryToolbar = ({
   display,
   visibleLayers,
   expandedPipelines,
+  onToggleExpandPipelines,
   onToggleExpandAllPipelines,
 }) => {
   const { toSetQueryParam } = useGeneratePathname();
@@ -103,6 +108,7 @@ export const FlowchartPrimaryToolbar = ({
 };
 
 export const mapStateToProps = (state) => ({
+  modularPipelineIDs: state?.modularPipeline?.ids,
   disableLayerBtn: !state.layer.ids.length,
   textLabels: state.textLabels,
   visible: state.visible,
@@ -124,9 +130,12 @@ export const mapDispatchToProps = (dispatch) => ({
   onToggleTextLabels: (value) => {
     dispatch(toggleTextLabels(Boolean(value)));
   },
+  onToggleExpandPipelines: (ids) => {
+    dispatch(toggleModularPipelinesExpanded(ids));
+  },
   onToggleExpandAllPipelines: (isExpanded) => {
     dispatch(toggleExpandAllPipelines(isExpanded));
-    dispatch(loadInitialPipelineData());
+    dispatch(toggleAllModularPipelinesExpanded(isExpanded));
   },
 });
 

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

@@ -59,6 +59,8 @@ describe('PrimaryToolbar', () => {
         visible: mockState.spaceflights.visible,
         display: mockState.spaceflights.display,
         [callback]: mockFn,
+        modularPipelineIDs: ['pipeline1', '__root__'],
+        onToggleExpandPipelines: jest.fn(),
       };
       const wrapper = setup.mount(<FlowchartPrimaryToolbar {...props} />);
       expect(mockFn.mock.calls.length).toBe(0);
@@ -72,6 +74,7 @@ describe('PrimaryToolbar', () => {
       disableLayerBtn: expect.any(Boolean),
       textLabels: expect.any(Boolean),
       expandedPipelines: expect.any(Boolean),
+      modularPipelineIDs: expect.any(Array),
       visible: expect.objectContaining({
         exportModal: expect.any(Boolean),
         metadataModal: expect.any(Boolean),

src/reducers/modular-pipelines.js

@@ -3,6 +3,7 @@ import {
   TOGGLE_MODULAR_PIPELINES_EXPANDED,
   TOGGLE_SINGLE_MODULAR_PIPELINE_EXPANDED,
   TOGGLE_MODULAR_PIPELINE_DISABLED,
+  TOGGLE_ALL_MODULAR_PIPELINES_EXPANDED,
 } from '../actions/modular-pipelines';
 
 function modularPipelineReducer(modularPipelineState = {}, action) {
@@ -110,6 +111,37 @@ function modularPipelineReducer(modularPipelineState = {}, action) {
         visible: newVisibleState,
       });
     }
+    case TOGGLE_ALL_MODULAR_PIPELINES_EXPANDED: {
+      let newVisibleState = {};
+
+      // Determine which IDs should be expanded based on the action
+      const expandedIDs = action.expandAllPipelines
+        ? modularPipelineState.ids
+        : [];
+
+      if (action.expandAllPipelines) {
+        // If expanding all pipelines, set visibility for each pipeline and its children
+        modularPipelineState.ids.forEach((modularPipelineID) => {
+          newVisibleState[modularPipelineID] = false;
+          modularPipelineState.tree[modularPipelineID].children.forEach(
+            (child) => (newVisibleState[child.id] = true)
+          );
+        });
+      } else {
+        // If not expanding all, only set visibility for the children of the root pipeline
+        if (modularPipelineState.tree['__root__']) {
+          for (const child of modularPipelineState.tree['__root__'].children ||
+            []) {
+            newVisibleState[child.id] = true;
+          }
+        }
+      }
+
+      return updateState({
+        expanded: expandedIDs,
+        visible: newVisibleState,
+      });
+    }
 
     default:
       return modularPipelineState;