diff --git a/src/actions/index.js b/src/actions/index.js index 973e16d531..a10372ec7b 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -24,6 +24,19 @@ export function toggleLayers(visible) { }; } +export const TOGGLE_EXPAND_ALL_PIPELINES = 'TOGGLE_EXPAND_ALL_PIPELINES'; + +/** + * Toggle whether to expand all modular pipelines or collapse all + * @param {Boolean} shouldExpandAllPipelines + */ +export function toggleExpandAllPipelines(shouldExpandAllPipelines) { + return { + type: TOGGLE_EXPAND_ALL_PIPELINES, + shouldExpandAllPipelines, + }; +} + export const TOGGLE_EXPORT_MODAL = 'TOGGLE_EXPORT_MODAL'; /** diff --git a/src/actions/pipelines.js b/src/actions/pipelines.js index 06e1bc30e6..8882b425d8 100644 --- a/src/actions/pipelines.js +++ b/src/actions/pipelines.js @@ -99,7 +99,7 @@ export function loadInitialPipelineData() { // obtain the status of expandAllPipelines to decide whether it needs to overwrite the // list of visible nodes const expandAllPipelines = - state.display.expandAllPipelines || state.flags.expandAllPipelines; + state.display.expandAllPipelines || state.expandAllPipelines; let newState = await loadJsonData(url).then((data) => preparePipelineState(data, true, expandAllPipelines) ); @@ -122,7 +122,7 @@ export function loadInitialPipelineData() { */ export function loadPipelineData(pipelineID) { return async function (dispatch, getState) { - const { dataSource, pipeline, display, flags } = getState(); + const { dataSource, pipeline, display, expandAllPipelines } = getState(); if (pipelineID && pipelineID === pipeline.active) { return; @@ -136,10 +136,10 @@ export function loadPipelineData(pipelineID) { active: pipelineID, }); - const expandAllPipelines = - display.expandAllPipelines || flags.expandAllPipelines; + const shouldExpandAllPipelines = + display.expandAllPipelines || expandAllPipelines; const newState = await loadJsonData(url).then((data) => - preparePipelineState(data, false, expandAllPipelines) + preparePipelineState(data, false, shouldExpandAllPipelines) ); // Set active pipeline here rather than dispatching two separate actions, diff --git a/src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.js b/src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.js index 844fc7ec90..d40e6ecfeb 100644 --- a/src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.js +++ b/src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.js @@ -5,7 +5,7 @@ import { toggleLayers, toggleSidebar, toggleTextLabels, - changeFlag, + toggleExpandAllPipelines, } from '../../actions'; import { loadInitialPipelineData } from '../../actions/pipelines'; import IconButton from '../ui/icon-button'; @@ -110,7 +110,7 @@ export const mapStateToProps = (state) => ({ textLabels: state.textLabels, visible: state.visible, visibleLayers: Boolean(getVisibleLayerIDs(state).length), - expandedPipelines: state.flags.expandAllPipelines, + expandedPipelines: state.expandAllPipelines, }); export const mapDispatchToProps = (dispatch) => ({ @@ -127,7 +127,7 @@ export const mapDispatchToProps = (dispatch) => ({ dispatch(toggleTextLabels(Boolean(value))); }, onToggleExpandAllPipelines: (isExpanded) => { - dispatch(changeFlag('expandAllPipelines', isExpanded)); + dispatch(toggleExpandAllPipelines(isExpanded)); dispatch(loadInitialPipelineData()); }, }); diff --git a/src/components/flowchart-wrapper/flowchart-wrapper.js b/src/components/flowchart-wrapper/flowchart-wrapper.js index b305bc73ea..02750f59fc 100644 --- a/src/components/flowchart-wrapper/flowchart-wrapper.js +++ b/src/components/flowchart-wrapper/flowchart-wrapper.js @@ -110,9 +110,9 @@ export const FlowChartWrapper = ({ disabledKeys && toSetQueryParam(params.types, mappedDisabledNodes); } }, - flags: (value) => { + expandAllPipelines: (value) => { if (!searchParams.has(params.expandAll)) { - toSetQueryParam(params.expandAll, value.expandAllPipelines); + toSetQueryParam(params.expandAll, value); } }, }; diff --git a/src/reducers/index.js b/src/reducers/index.js index af858fdc50..606077d8d9 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -20,6 +20,7 @@ import { TOGGLE_THEME, UPDATE_CHART_SIZE, UPDATE_ZOOM, + TOGGLE_EXPAND_ALL_PIPELINES, } from '../actions'; import { TOGGLE_PARAMETERS_HOVERED } from '../actions'; @@ -95,6 +96,11 @@ const combinedReducer = combineReducers({ TOGGLE_HOVERED_FOCUS_MODE, 'hoveredFocusMode' ), + expandAllPipelines: createReducer( + false, + TOGGLE_EXPAND_ALL_PIPELINES, + 'shouldExpandAllPipelines' + ), }); const rootReducer = (state, action) => diff --git a/src/store/initial-state.js b/src/store/initial-state.js index 32ad432683..eefa121c79 100644 --- a/src/store/initial-state.js +++ b/src/store/initial-state.js @@ -18,9 +18,10 @@ import { */ export const createInitialState = () => ({ chartSize: {}, - flags: { ...Flags.defaults(), expandAllPipelines: false }, + flags: { ...Flags.defaults() }, textLabels: true, theme: 'dark', + expandAllPipelines: false, isPrettyName: settings.isPrettyName.default, showFeatureHints: settings.showFeatureHints.default, ignoreLargeWarning: false, @@ -67,6 +68,7 @@ const parseUrlParameters = () => { nodeTagInUrl: search.get(params.tags) ? search.get(params.tags).split(',') : [], + expandAllPipelinesInUrl: search.get(params.expandAll), }; }; @@ -86,6 +88,7 @@ const applyUrlParametersToState = (state, urlParams) => { nodeNameFromUrl, nodeTypeInUrl, nodeTagInUrl, + expandAllPipelinesInUrl, } = urlParams; let newState = { ...state }; @@ -127,6 +130,10 @@ const applyUrlParametersToState = (state, urlParams) => { }); } + if (expandAllPipelinesInUrl) { + newState.expandAllPipelines = JSON.parse(expandAllPipelinesInUrl); + } + return newState; }; @@ -142,7 +149,7 @@ export const mergeLocalStorage = (state) => { localStorageRunsMetadata ); Object.keys(localStorageState).forEach((key) => { - if (!state[key]) { + if (!(key in state)) { delete localStorageState[key]; } }); @@ -214,7 +221,7 @@ const getInitialState = (props = {}) => { const expandAllPipelines = nonPipelineState.display.expandAllPipelines || - nonPipelineState.flags.expandAllPipelines; + nonPipelineState.expandAllPipelines; const pipelineState = preparePipelineState( props.data, diff --git a/src/store/store.js b/src/store/store.js index bbac8d2722..01bf864cf8 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -58,6 +58,7 @@ const saveStateToLocalStorage = (state) => { isPrettyName: state.isPrettyName, showFeatureHints: state.showFeatureHints, flags: state.flags, + expandAllPipelines: state.expandAllPipelines, }); // Store Run's metadata to localstorage