refactor: remove adapted layout (#549)

This solves some problems like the reordering of dimensions in layout
and simplifies the whole codebase as we can always just get the current
layout from the store.

packages/app/package.json

@@ -13,9 +13,9 @@
     },
     "dependencies": {
         "@dhis2/analytics": "^2.8.2",
-        "@dhis2/d2-ui-core": "^6.4.0",
-        "@dhis2/d2-ui-file-menu": "^6.4.0",
-        "@dhis2/d2-ui-interpretations": "^6.4.0",
+        "@dhis2/d2-ui-core": "^6.5.0",
+        "@dhis2/d2-ui-file-menu": "^6.5.0",
+        "@dhis2/d2-ui-interpretations": "^6.5.0",
         "@dhis2/data-visualizer-plugin": "^33.1.6",
         "@material-ui/core": "^3.1.2",
         "@material-ui/icons": "^3.0.1",

packages/app/src/components/DimensionsPanel/DimensionsPanel.js

@@ -10,13 +10,12 @@ import {
 import PropTypes from 'prop-types'
 
 import DialogManager from './Dialogs/DialogManager'
-import { SOURCE_DIMENSIONS, getInverseLayout } from '../../modules/layout'
+import { SOURCE_DIMENSIONS } from '../../modules/layout'
 import { setDataTransfer } from '../../modules/dnd'
 import * as fromReducers from '../../reducers'
 import * as fromActions from '../../actions'
 
 import { styles } from './styles/DimensionsPanel.style'
-import { getAdaptedUiByType } from '../../modules/ui'
 import { AXIS_SETUP_DIALOG_ID } from '../AxisSetup/AxisSetup'
 import {
     acSetUiActiveModalDialog,
@@ -59,12 +58,6 @@ export class Dimensions extends Component {
     lockedDimension = dimensionId =>
         this.props.lockedDimensions.includes(dimensionId)
 
-    getUiAxisId = () => {
-        const adaptedUi = getAdaptedUiByType(this.props.ui)
-        const inverseLayout = getInverseLayout(adaptedUi.layout)
-        return inverseLayout[this.state.dimensionId]
-    }
-
     getNumberOfDimensionItems = () =>
         (this.props.itemsByDimension[this.state.dimensionId] || []).length
 
@@ -90,16 +83,18 @@ export class Dimensions extends Component {
                 />
                 <DimensionMenu
                     dimensionId={this.state.dimensionId}
-                    currentAxisId={this.getUiAxisId()}
+                    currentAxisId={this.props.getCurrentAxisId(
+                        this.state.dimensionId
+                    )}
                     visType={this.props.ui.type}
                     numberOfDimensionItems={this.getNumberOfDimensionItems()}
                     dualAxisItemHandler={this.props.dualAxisItemHandler}
                     isAssignedCategoriesInLayout={
-                        this.props.adaptedLayoutHasAssignedCategories
+                        this.props.layoutHasAssignedCategories
                     }
                     assignedCategoriesItemHandler={destination =>
                         this.props.assignedCategoriesItemHandler(
-                            this.props.adaptedLayoutHasAssignedCategories,
+                            this.props.layoutHasAssignedCategories,
                             destination
                         )
                     }
@@ -123,13 +118,14 @@ const getLockedDimensionsMemo = createSelector([sGetUiType], type =>
 )
 
 Dimensions.propTypes = {
-    adaptedLayoutHasAssignedCategories: PropTypes.bool,
     assignedCategoriesItemHandler: PropTypes.func,
     axisItemHandler: PropTypes.func,
     dimensions: PropTypes.object,
     disallowedDimensions: PropTypes.array,
     dualAxisItemHandler: PropTypes.func,
+    getCurrentAxisId: PropTypes.func,
     itemsByDimension: PropTypes.object,
+    layoutHasAssignedCategories: PropTypes.bool,
     lockedDimensions: PropTypes.array,
     recommendedIds: PropTypes.array,
     removeItemHandler: PropTypes.func,
@@ -138,23 +134,21 @@ Dimensions.propTypes = {
     onDimensionClick: PropTypes.func,
 }
 
-const mapStateToProps = state => {
-    return {
-        ui: fromReducers.fromUi.sGetUi(state),
-        dimensions: fromReducers.fromDimensions.sGetDimensions(state),
-        selectedIds: fromReducers.fromUi.sGetDimensionIdsFromLayout(state),
-        recommendedIds: fromReducers.fromRecommendedIds.sGetRecommendedIds(
-            state
-        ),
-        layout: fromReducers.fromUi.sGetUiLayout(state),
-        itemsByDimension: fromReducers.fromUi.sGetUiItems(state),
-        disallowedDimensions: getDisallowedDimensionsMemo(state),
-        lockedDimensions: getLockedDimensionsMemo(state),
-        adaptedLayoutHasAssignedCategories: fromReducers.fromUi.sAdaptedLayoutHasAssignedCategories(
-            state
-        ),
-    }
-}
+const mapStateToProps = state => ({
+    ui: fromReducers.fromUi.sGetUi(state),
+    dimensions: fromReducers.fromDimensions.sGetDimensions(state),
+    selectedIds: fromReducers.fromUi.sGetDimensionIdsFromLayout(state),
+    recommendedIds: fromReducers.fromRecommendedIds.sGetRecommendedIds(state),
+    layout: fromReducers.fromUi.sGetUiLayout(state),
+    itemsByDimension: fromReducers.fromUi.sGetUiItems(state),
+    disallowedDimensions: getDisallowedDimensionsMemo(state),
+    lockedDimensions: getLockedDimensionsMemo(state),
+    layoutHasAssignedCategories: fromReducers.fromUi.sLayoutHasAssignedCategories(
+        state
+    ),
+    getCurrentAxisId: dimensionId =>
+        fromReducers.fromUi.getAxisIdByDimensionId(state, dimensionId),
+})
 
 const mapDispatchToProps = dispatch => ({
     onDimensionClick: id =>

packages/app/src/components/DimensionsPanel/__tests__/DimensionsPanel.spec.js

@@ -26,7 +26,7 @@ describe('The Dimensions component ', () => {
             dualAxisItemHandler: () => {},
             axisItemHandler: () => {},
             removeItemHandler: () => {},
-            adaptedLayoutHasDimension: () => {},
+            getCurrentAxisId: () => '',
         }
     })
 

packages/app/src/components/Layout/DefaultLayout/DefaultAxis.js

@@ -5,14 +5,13 @@ import { Droppable, Draggable } from 'react-beautiful-dnd'
 import { getAxisName } from '@dhis2/analytics'
 
 import Chip from '../Chip'
-import { sGetUi } from '../../../reducers/ui'
+import { sGetUi, sGetUiItems, sGetUiType } from '../../../reducers/ui'
 import { decodeDataTransfer } from '../../../modules/dnd'
 import {
     acAddUiLayoutDimensions,
     acSetUiActiveModalDialog,
 } from '../../../actions/ui'
 import { SOURCE_DIMENSIONS } from '../../../modules/layout'
-import { getAdaptedUiByType } from '../../../modules/ui'
 
 import styles from './styles/DefaultAxis.style'
 class Axis extends React.Component {
@@ -109,6 +108,8 @@ Axis.propTypes = {
 
 const mapStateToProps = state => ({
     ui: sGetUi(state),
+    type: sGetUiType(state),
+    itemsByDimension: sGetUiItems(state),
 })
 
 const mapDispatchToProps = dispatch => ({
@@ -120,14 +121,11 @@ const mapDispatchToProps = dispatch => ({
 })
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
-    const adaptedUi = getAdaptedUiByType(stateProps.ui)
-
     return {
-        axis: adaptedUi.layout[ownProps.axisId],
-        itemsByDimension: adaptedUi.itemsByDimension,
-        type: adaptedUi.type,
+        ...stateProps,
         ...dispatchProps,
         ...ownProps,
+        axis: stateProps.ui.layout[ownProps.axisId],
     }
 }
 

packages/app/src/components/Layout/Menu.js

@@ -52,11 +52,11 @@ class ChipMenu extends React.Component {
                     numberOfDimensionItems={this.props.numberOfDimensionItems}
                     dualAxisItemHandler={this.props.dualAxisItemHandler}
                     isAssignedCategoriesInLayout={
-                        this.props.adaptedLayoutHasAssignedCategories
+                        this.props.layoutHasAssignedCategories
                     }
                     assignedCategoriesItemHandler={destination =>
                         this.props.assignedCategoriesItemHandler(
-                            this.props.adaptedLayoutHasAssignedCategories,
+                            this.props.layoutHasAssignedCategories,
                             destination
                         )
                     }
@@ -71,21 +71,21 @@ class ChipMenu extends React.Component {
 }
 
 ChipMenu.propTypes = {
-    adaptedLayoutHasAssignedCategories: PropTypes.bool,
     assignedCategoriesItemHandler: PropTypes.func,
     axisItemHandler: PropTypes.func,
     currentAxisId: PropTypes.string,
     dimensionId: PropTypes.string,
     dualAxisItemHandler: PropTypes.func,
     id: PropTypes.string,
+    layoutHasAssignedCategories: PropTypes.bool,
     numberOfDimensionItems: PropTypes.number,
     removeItemHandler: PropTypes.func,
     visType: PropTypes.string,
 }
 
 const mapStateToProps = state => {
     return {
-        adaptedLayoutHasAssignedCategories: fromReducers.fromUi.sAdaptedLayoutHasAssignedCategories(
+        layoutHasAssignedCategories: fromReducers.fromUi.sLayoutHasAssignedCategories(
             state
         ),
     }

packages/app/src/components/VisualizationTypeSelector/VisualizationTypeSelector.js

@@ -8,10 +8,11 @@ import { visTypeDisplayNames } from '@dhis2/analytics'
 import i18n from '@dhis2/d2-i18n'
 
 import { prepareCurrentAnalyticalObject } from '../../modules/currentAnalyticalObject'
+import { getAdaptedUiByType } from '../../modules/ui'
 import { sGetUi, sGetUiType } from '../../reducers/ui'
 import { sGetCurrent } from '../../reducers/current'
 import { sGetMetadata } from '../../reducers/metadata'
-import { acSetUiType } from '../../actions/ui'
+import { acSetUi } from '../../actions/ui'
 import {
     apiSaveAOInUserDataStore,
     CURRENT_AO_KEY,
@@ -40,7 +41,7 @@ export class VisualizationTypeSelector extends Component {
     }
 
     handleMenuItemClick = type => () => {
-        this.props.onTypeSelect(type)
+        this.props.setUi(getAdaptedUiByType({ ...this.props.ui, type }))
         this.handleClose()
     }
 
@@ -119,9 +120,9 @@ export class VisualizationTypeSelector extends Component {
 VisualizationTypeSelector.propTypes = {
     current: PropTypes.object,
     metadata: PropTypes.object,
+    setUi: PropTypes.func,
     ui: PropTypes.object,
     visualizationType: PropTypes.oneOf(Object.keys(visTypeDisplayNames)),
-    onTypeSelect: PropTypes.func,
 }
 
 VisualizationTypeSelector.contextTypes = {
@@ -136,7 +137,7 @@ const mapStateToProps = state => ({
 })
 
 const mapDispatchToProps = dispatch => ({
-    onTypeSelect: type => dispatch(acSetUiType(type)),
+    setUi: ui => dispatch(acSetUi(ui)),
 })
 
 export default connect(

packages/app/src/reducers/ui.js

@@ -13,7 +13,7 @@ import {
     getRetransfer,
 } from '../modules/layout'
 import { getOptionsForUi } from '../modules/options'
-import { getUiFromVisualization, getAdaptedUiByType } from '../modules/ui'
+import { getAdaptedUiByType, getUiFromVisualization } from '../modules/ui'
 
 export const SET_UI = 'SET_UI'
 export const SET_UI_FROM_VISUALIZATION = 'SET_UI_FROM_VISUALIZATION'
@@ -66,7 +66,9 @@ export default (state = DEFAULT_UI, action) => {
             }
         }
         case SET_UI_FROM_VISUALIZATION: {
-            return getUiFromVisualization(action.value, state)
+            return getAdaptedUiByType(
+                getUiFromVisualization(action.value, state)
+            )
         }
         case SET_UI_TYPE: {
             return {
@@ -270,21 +272,15 @@ export const sGetUiItemsByDimension = (state, dimension) =>
 
 export const sGetDimensionIdsFromLayout = state =>
     Object.values(sGetUiLayout(state)).reduce(
-        (ids, axis) => ids.concat(axis),
+        (ids, axisDimensionIds) => ids.concat(axisDimensionIds),
         []
     )
 
-export const sGetDimensionIdsFromAdaptedLayout = state => {
-    const adaptedUi = getAdaptedUiByType(sGetUi(state))
-    const inverseLayout = getInverseLayout(adaptedUi.layout)
-    return Object.keys(inverseLayout)
-}
-
-export const sAdaptedLayoutHasDimension = (state, dimension) =>
-    sGetDimensionIdsFromAdaptedLayout(state).includes(dimension)
+export const sLayoutHasDimension = (state, dimension) =>
+    sGetDimensionIdsFromLayout(state).includes(dimension)
 
-export const sAdaptedLayoutHasAssignedCategories = state =>
-    sAdaptedLayoutHasDimension(state, DIMENSION_ID_ASSIGNED_CATEGORIES)
+export const sLayoutHasAssignedCategories = state =>
+    sLayoutHasDimension(state, DIMENSION_ID_ASSIGNED_CATEGORIES)
 
 export const sGetAxisSetup = state => {
     const columns = sGetUiLayout(state).columns