@dhis2/analytics 26.4.0 → 26.5.0

package/build/es/components/DataDimension/DataDimension.js

@@ -1,20 +1,33 @@
 import { useConfig } from '@dhis2/app-runtime';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { createContext, useContext, useCallback, useEffect, useState } from 'react';
+import { dataTypeMap, DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM } from '../../modules/dataTypes.js';
 import { DIMENSION_ID_DATA } from '../../modules/predefinedDimensions.js';
 import ItemSelector from './ItemSelector.js';
+const DataDimensionCtx = /*#__PURE__*/createContext({});
 const DataDimension = _ref => {
   let {
     onSelect,
     selectedDimensions,
     displayNameProp,
+    enabledDataTypes,
     infoBoxMessage,
-    onCalculationSave
+    onCalculationSave,
+    visType
   } = _ref;
   const {
     serverVersion
   } = useConfig();
-  const supportsEDI = `${serverVersion.major}.${serverVersion.minor}.${serverVersion.patch || 0}` >= '2.40.0';
+  const filterDataTypesByVersion = useCallback(dataTypes => dataTypes.filter(_ref2 => {
+    let {
+      id
+    } = _ref2;
+    return (
+      // Calculations only available from 2.40
+      id !== DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM || serverVersion.minor >= 40
+    );
+  }), [serverVersion.minor]);
+  const [dataTypes, setDataTypes] = useState(filterDataTypesByVersion(enabledDataTypes || Object.values(dataTypeMap)));
   const onSelectItems = selectedItem => onSelect({
     dimensionId: DIMENSION_ID_DATA,
     items: selectedItem.map(item => ({
@@ -24,7 +37,12 @@ const DataDimension = _ref => {
       expression: item.expression
     }))
   });
-  return /*#__PURE__*/React.createElement(ItemSelector, {
+  useEffect(() => enabledDataTypes && setDataTypes(filterDataTypesByVersion(enabledDataTypes)), [enabledDataTypes, filterDataTypesByVersion]);
+  return /*#__PURE__*/React.createElement(DataDimensionCtx.Provider, {
+    value: {
+      visType
+    }
+  }, /*#__PURE__*/React.createElement(ItemSelector, {
     selectedItems: selectedDimensions.map(item => ({
       value: item.id,
       label: item.name,
@@ -37,9 +55,9 @@ const DataDimension = _ref => {
     displayNameProp: displayNameProp,
     infoBoxMessage: infoBoxMessage,
     dataTest: 'data-dimension',
-    supportsEDI: supportsEDI,
+    dataTypes: dataTypes,
     onEDISave: onCalculationSave
-  });
+  }));
 };
 DataDimension.propTypes = {
   displayNameProp: PropTypes.string.isRequired,
@@ -51,11 +69,14 @@ DataDimension.propTypes = {
     type: PropTypes.string
   })).isRequired,
   onSelect: PropTypes.func.isRequired,
+  enabledDataTypes: PropTypes.array,
   infoBoxMessage: PropTypes.string,
+  visType: PropTypes.string,
   onCalculationSave: PropTypes.func
 };
 DataDimension.defaultProps = {
   selectedDimensions: [],
   onSelect: Function.prototype
 };
+export const useDataDimensionContext = () => useContext(DataDimensionCtx);
 export default DataDimension;

package/build/es/components/DataDimension/DataTypeSelector.js

@@ -3,22 +3,43 @@ import { SingleSelectField, SingleSelectOption } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React from 'react';
 import i18n from '../../locales/index.js';
-import { DIMENSION_TYPE_ALL, dataTypeMap as dataTypes, DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM } from '../../modules/dataTypes.js';
+import { DIMENSION_TYPE_ALL, dataTypeMap } from '../../modules/dataTypes.js';
+import { getDisplayNameByVisType } from '../../modules/visTypes.js';
+import { useDataDimensionContext } from './DataDimension.js';
 import styles from './styles/DataTypeSelector.style.js';
 const DataTypeSelector = _ref => {
-  var _dataTypes$currentDat;
   let {
     currentDataType,
+    dataTypes,
     onChange,
-    dataTest,
-    includeCalculations
+    dataTest
   } = _ref;
+  const {
+    visType
+  } = useDataDimensionContext();
+  const label = i18n.t('Data Type');
   return /*#__PURE__*/React.createElement("div", {
     className: `jsx-${styles.__hash}` + " " + "container"
-  }, /*#__PURE__*/React.createElement(SingleSelectField, {
-    label: i18n.t('Data Type'),
+  }, dataTypes.length === 1 ? /*#__PURE__*/React.createElement(SingleSelectField, {
+    label: label,
     dataTest: dataTest,
-    selected: ((_dataTypes$currentDat = dataTypes[currentDataType]) === null || _dataTypes$currentDat === void 0 ? void 0 : _dataTypes$currentDat.id) || DIMENSION_TYPE_ALL,
+    selected: dataTypes[0].id,
+    onChange: ref => onChange(ref.selected),
+    dense: true,
+    disabled: true,
+    helpText: visType ? i18n.t('Only {{dataType}} can be used in {{visType}}', {
+      dataType: dataTypeMap[dataTypes[0].id].getName(),
+      visType: getDisplayNameByVisType(visType)
+    }) : ''
+  }, dataTypes.map(type => /*#__PURE__*/React.createElement(SingleSelectOption, {
+    value: type.id,
+    key: type.id,
+    label: type.getName(),
+    dataTest: `${dataTest}-option-${type.id}`
+  }))) : /*#__PURE__*/React.createElement(SingleSelectField, {
+    label: label,
+    dataTest: dataTest,
+    selected: currentDataType || DIMENSION_TYPE_ALL,
     onChange: ref => onChange(ref.selected),
     dense: true
   }, /*#__PURE__*/React.createElement(SingleSelectOption, {
@@ -26,7 +47,7 @@ const DataTypeSelector = _ref => {
     key: DIMENSION_TYPE_ALL,
     label: i18n.t('All types'),
     dataTest: `${dataTest}-option-all`
-  }), Object.values(dataTypes).filter(type => type.id !== DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM || includeCalculations).map(type => /*#__PURE__*/React.createElement(SingleSelectOption, {
+  }), dataTypes.map(type => /*#__PURE__*/React.createElement(SingleSelectOption, {
     value: type.id,
     key: type.id,
     label: type.getName(),
@@ -39,6 +60,6 @@ DataTypeSelector.propTypes = {
   currentDataType: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   dataTest: PropTypes.string,
-  includeCalculations: PropTypes.bool
+  dataTypes: PropTypes.array
 };
 export default DataTypeSelector;

package/build/es/components/DataDimension/GroupSelector.js

@@ -25,15 +25,15 @@ const GroupSelector = _ref => {
   const [isLoading, setIsLoading] = useState(true);
   const defaultGroup = (_dataTypes$dataType = dataTypes[dataType]) === null || _dataTypes$dataType === void 0 ? void 0 : _dataTypes$dataType.defaultGroup;
   const subGroupType = (_dataTypes$dataType2 = dataTypes[dataType]) === null || _dataTypes$dataType2 === void 0 ? void 0 : _dataTypes$dataType2.subGroup;
-  const fetchGroups = async () => {
-    setIsLoading(true);
-    const result = await apiFetchGroups(dataEngine, dataType, displayNameProp);
-    setGroups(result);
-    setIsLoading(false);
-  };
   useEffect(() => {
+    const fetchGroups = async () => {
+      setIsLoading(true);
+      const result = await apiFetchGroups(dataEngine, dataType, displayNameProp);
+      setGroups(result);
+      setIsLoading(false);
+    };
     fetchGroups();
-  }, [dataType]);
+  }, [dataEngine, dataType, displayNameProp]);
   return /*#__PURE__*/React.createElement("div", {
     className: `jsx-${styles.__hash}` + " " + "container"
   }, /*#__PURE__*/React.createElement(_JSXStyle, {

package/build/es/components/DataDimension/ItemSelector.js

@@ -7,7 +7,7 @@ import React, { useState } from 'react';
 import { apiFetchOptions } from '../../api/dimensions.js';
 import i18n from '../../locales/index.js';
 import { DATA_SETS_CONSTANTS, REPORTING_RATE } from '../../modules/dataSets.js';
-import { dataTypeMap as dataTypes, DIMENSION_TYPE_ALL, DIMENSION_TYPE_DATA_ELEMENT, DIMENSION_TYPE_DATA_SET, DIMENSION_TYPE_EVENT_DATA_ITEM, DIMENSION_TYPE_PROGRAM_INDICATOR, DIMENSION_TYPE_INDICATOR, TOTALS, DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM } from '../../modules/dataTypes.js';
+import { DIMENSION_TYPE_ALL, DIMENSION_TYPE_DATA_ELEMENT, DIMENSION_TYPE_DATA_SET, DIMENSION_TYPE_EVENT_DATA_ITEM, DIMENSION_TYPE_PROGRAM_INDICATOR, DIMENSION_TYPE_INDICATOR, TOTALS, DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM } from '../../modules/dataTypes.js';
 import { getIcon, getTooltipText } from '../../modules/dimensionListItem.js';
 import { TRANSFER_HEIGHT, TRANSFER_OPTIONS_WIDTH, TRANSFER_SELECTED_WIDTH } from '../../modules/dimensionSelectorHelper.js';
 import { useDebounce, useDidUpdateEffect } from '../../modules/utils.js';
@@ -21,14 +21,14 @@ const LeftHeader = _ref => {
     searchTerm,
     setSearchTerm,
     dataType,
+    dataTypes,
     setDataType,
     group,
     setGroup,
     subGroup,
     setSubGroup,
     displayNameProp,
-    dataTest,
-    supportsEDI
+    dataTest
   } = _ref;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: `jsx-${styles.__hash}` + " " + "leftHeader"
@@ -49,8 +49,8 @@ const LeftHeader = _ref => {
     currentDataType: dataType,
     onChange: setDataType,
     dataTest: `${dataTest}-data-types-select-field`,
-    includeCalculations: supportsEDI
-  }), dataTypes[dataType] && dataType !== DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM && /*#__PURE__*/React.createElement(GroupSelector, {
+    dataTypes: dataTypes
+  }), ![DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM, DIMENSION_TYPE_ALL].includes(dataType) && /*#__PURE__*/React.createElement(GroupSelector, {
     dataType: dataType,
     displayNameProp: displayNameProp,
     currentGroup: group,
@@ -65,6 +65,7 @@ const LeftHeader = _ref => {
 LeftHeader.propTypes = {
   dataTest: PropTypes.string,
   dataType: PropTypes.string,
+  dataTypes: PropTypes.array,
   displayNameProp: PropTypes.string,
   group: PropTypes.string,
   searchTerm: PropTypes.string,
@@ -72,8 +73,7 @@ LeftHeader.propTypes = {
   setGroup: PropTypes.func,
   setSearchTerm: PropTypes.func,
   setSubGroup: PropTypes.func,
-  subGroup: PropTypes.string,
-  supportsEDI: PropTypes.bool
+  subGroup: PropTypes.string
 };
 const EmptySelection = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
   className: `jsx-${styles.__hash}` + " " + "emptyList"
@@ -82,22 +82,22 @@ const EmptySelection = () => /*#__PURE__*/React.createElement(React.Fragment, nu
 }, styles));
 const RightHeader = _ref3 => {
   let {
-    infoText
+    infoBoxMessage
   } = _ref3;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
     className: `jsx-${styles.__hash}` + " " + "rightHeader"
-  }, i18n.t('Selected Items')), infoText && /*#__PURE__*/React.createElement("div", {
+  }, i18n.t('Selected Items')), infoBoxMessage && /*#__PURE__*/React.createElement("div", {
     className: `jsx-${styles.__hash}` + " " + "info-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: `jsx-${styles.__hash}`
   }, /*#__PURE__*/React.createElement(IconInfo16, null)), /*#__PURE__*/React.createElement("span", {
     className: `jsx-${styles.__hash}` + " " + "info-text"
-  }, infoText)), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, infoBoxMessage)), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles));
 };
 RightHeader.propTypes = {
-  infoText: PropTypes.string
+  infoBoxMessage: PropTypes.string
 };
 const SourceEmptyPlaceholder = _ref4 => {
   let {
@@ -129,6 +129,9 @@ const SourceEmptyPlaceholder = _ref4 => {
         case DIMENSION_TYPE_PROGRAM_INDICATOR:
           message = i18n.t('No program indicators found');
           break;
+        case DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM:
+          message = i18n.t('No calculations found');
+          break;
         default:
           message = i18n.t('No data');
           break;
@@ -138,32 +141,37 @@ const SourceEmptyPlaceholder = _ref4 => {
     switch (dataType) {
       case DIMENSION_TYPE_INDICATOR:
         message = i18n.t('No indicators found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
         });
         break;
       case DIMENSION_TYPE_DATA_ELEMENT:
         message = i18n.t('No data elements found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
         });
         break;
       case DIMENSION_TYPE_DATA_SET:
         message = i18n.t('No data sets found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
         });
         break;
       case DIMENSION_TYPE_EVENT_DATA_ITEM:
         message = i18n.t('No event data items found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
         });
         break;
       case DIMENSION_TYPE_PROGRAM_INDICATOR:
         message = i18n.t('No program indicators found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
+        });
+        break;
+      case DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM:
+        message = i18n.t('No calculations found for "{{- searchTerm}}"', {
+          searchTerm
         });
         break;
       default:
         message = i18n.t('Nothing found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
         });
         break;
     }
@@ -191,18 +199,27 @@ const ItemSelector = _ref5 => {
     rightFooter,
     displayNameProp,
     infoBoxMessage,
+    dataTypes,
     dataTest,
-    supportsEDI,
     onEDISave
   } = _ref5;
   const [state, setState] = useState({
     searchTerm: '',
+    dataTypes,
     filter: {
-      dataType: DIMENSION_TYPE_ALL
+      dataType: dataTypes.length === 1 ? dataTypes[0].id : DIMENSION_TYPE_ALL,
+      group: null,
+      subGroup: dataTypes.length === 1 && dataTypes[0].id === DIMENSION_TYPE_DATA_ELEMENT ? TOTALS : null
     },
     options: [],
     loading: true,
-    nextPage: 1
+    nextPage: 1,
+    supportsEDI: dataTypes.map(_ref6 => {
+      let {
+        id
+      } = _ref6;
+      return id;
+    }).includes(DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM)
   });
   const [currentCalculation, setCurrentCalculation] = useState();
   const dataEngine = useDataEngine();
@@ -210,15 +227,12 @@ const ItemSelector = _ref5 => {
     ...state,
     searchTerm
   }));
-  const setFilter = filter => setState(state => ({
-    ...state,
-    filter
-  }));
   const debouncedSearchTerm = useDebounce(state.searchTerm, 500);
   const fetchItems = async page => {
     var _result$dimensionItem;
     setState(state => ({
       ...state,
+      nextPage: page === 1 ? 1 : state.nextPage,
       loading: true
     }));
     const result = await apiFetchOptions({
@@ -281,11 +295,6 @@ const ItemSelector = _ref5 => {
     }
   };
   useDidUpdateEffect(() => {
-    setState(state => ({
-      ...state,
-      loading: true,
-      nextPage: 1
-    }));
     fetchItems(1);
   }, [debouncedSearchTerm, state.filter]);
   const onChange = newSelected => {
@@ -314,13 +323,13 @@ const ItemSelector = _ref5 => {
     var _find;
     return (_find = [...state.options, ...selectedItems].find(item => item.value === value)) === null || _find === void 0 ? void 0 : _find.type;
   };
-  const onSaveCalculation = async _ref6 => {
+  const onSaveCalculation = async _ref7 => {
     let {
       id,
       name,
       expression,
       isNew
-    } = _ref6;
+    } = _ref7;
     onEDISave({
       id,
       name,
@@ -343,10 +352,10 @@ const ItemSelector = _ref5 => {
       }]);
     }
   };
-  const onDeleteCalculation = _ref7 => {
+  const onDeleteCalculation = _ref8 => {
     let {
       id
-    } = _ref7;
+    } = _ref8;
     // close the modal
     setCurrentCalculation();
 
@@ -356,11 +365,37 @@ const ItemSelector = _ref5 => {
     // unselect the deleted calculation
     onSelect([...selectedItems.filter(item => item.value !== id)]);
   };
+  const onSetGroup = group => setState(state => ({
+    ...state,
+    nextPage: 1,
+    filter: {
+      ...state.filter,
+      group
+    }
+  }));
+  const onSetSubGroup = subGroup => setState(state => ({
+    ...state,
+    nextPage: 1,
+    filter: {
+      ...state.filter,
+      subGroup
+    }
+  }));
+  const onSetDataType = dataType => setState(state => ({
+    ...state,
+    nextPage: 1,
+    filter: {
+      ...state.filter,
+      dataType,
+      group: null,
+      subGroup: dataType === DIMENSION_TYPE_DATA_ELEMENT ? TOTALS : null
+    }
+  }));
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Transfer, {
-    onChange: _ref8 => {
+    onChange: _ref9 => {
       let {
         selected
-      } = _ref8;
+      } = _ref9;
       return onChange(selected);
     },
     selected: selectedItems.map(item => item.value),
@@ -377,36 +412,19 @@ const ItemSelector = _ref5 => {
     }),
     onEndReached: onEndReached,
     leftHeader: /*#__PURE__*/React.createElement(LeftHeader, {
+      dataTypes: state.dataTypes,
       dataType: state.filter.dataType,
-      setDataType: dataType => {
-        setFilter({
-          ...state.filter,
-          dataType,
-          group: null,
-          subGroup: dataType === DIMENSION_TYPE_DATA_ELEMENT ? TOTALS : null
-        });
-      },
+      setDataType: onSetDataType,
       group: state.filter.group,
-      setGroup: group => {
-        setFilter({
-          ...state.filter,
-          group
-        });
-      },
+      setGroup: onSetGroup,
       subGroup: state.filter.subGroup,
-      setSubGroup: subGroup => {
-        setFilter({
-          ...state.filter,
-          subGroup
-        });
-      },
+      setSubGroup: onSetSubGroup,
       searchTerm: state.searchTerm,
       setSearchTerm: setSearchTerm,
       displayNameProp: displayNameProp,
-      dataTest: `${dataTest}-left-header`,
-      supportsEDI: supportsEDI
+      dataTest: `${dataTest}-left-header`
     }),
-    leftFooter: supportsEDI ? /*#__PURE__*/React.createElement("div", {
+    leftFooter: state.supportsEDI ? /*#__PURE__*/React.createElement("div", {
       className: `jsx-${styles.__hash}` + " " + "calculation-button"
     }, /*#__PURE__*/React.createElement(Button, {
       icon: /*#__PURE__*/React.createElement(IconAdd24, null),
@@ -419,7 +437,7 @@ const ItemSelector = _ref5 => {
     selectedWidth: TRANSFER_SELECTED_WIDTH,
     selectedEmptyComponent: /*#__PURE__*/React.createElement(EmptySelection, null),
     rightHeader: /*#__PURE__*/React.createElement(RightHeader, {
-      infoText: infoBoxMessage
+      infoBoxMessage: infoBoxMessage
     }),
     rightFooter: rightFooter,
     renderOption: props => {
@@ -433,7 +451,7 @@ const ItemSelector = _ref5 => {
           expression: props.expression
         }),
         dataTest: `${dataTest}-transfer-option`,
-        onEditClick: getItemType(props.value) === DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM && !(((_props$access = props.access) === null || _props$access === void 0 ? void 0 : _props$access.write) === false) && supportsEDI ? () => setCurrentCalculation({
+        onEditClick: getItemType(props.value) === DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM && !(((_props$access = props.access) === null || _props$access === void 0 ? void 0 : _props$access.write) === false) && state.supportsEDI ? () => setCurrentCalculation({
           id: props.value,
           name: props.label,
           expression: props.expression
@@ -443,7 +461,7 @@ const ItemSelector = _ref5 => {
     },
 
     dataTest: `${dataTest}-transfer`
-  }), currentCalculation && supportsEDI && /*#__PURE__*/React.createElement(CalculationModal, {
+  }), currentCalculation && state.supportsEDI && /*#__PURE__*/React.createElement(CalculationModal, {
     calculation: currentCalculation,
     onSave: onSaveCalculation,
     onClose: () => setCurrentCalculation(),
@@ -457,6 +475,7 @@ ItemSelector.propTypes = {
   displayNameProp: PropTypes.string.isRequired,
   onSelect: PropTypes.func.isRequired,
   dataTest: PropTypes.string,
+  dataTypes: PropTypes.array,
   infoBoxMessage: PropTypes.string,
   noItemsMessage: PropTypes.string,
   rightFooter: PropTypes.node,
@@ -467,7 +486,6 @@ ItemSelector.propTypes = {
     type: PropTypes.string,
     expression: PropTypes.string
   })),
-  supportsEDI: PropTypes.bool,
   onEDISave: PropTypes.func
 };
 ItemSelector.defaultProps = {

package/build/es/components/Interpretations/InterpretationModal/InterpretationModal.js

@@ -64,7 +64,7 @@ const InterpretationModal = _ref2 => {
   });
   const interpretation = data === null || data === void 0 ? void 0 : data.interpretation;
   const shouldRenderModalContent = !error && interpretation;
-  const shouldCssHideModal = loading || isVisualizationLoading;
+  const loadingInProgress = loading || isVisualizationLoading;
   const handleClose = () => {
     if (isDirty) {
       onInterpretationUpdate();
@@ -80,6 +80,14 @@ const InterpretationModal = _ref2 => {
       id: interpretationId
     });
   };
+  const onLikeToggled = _ref3 => {
+    let {
+      likedBy
+    } = _ref3;
+    setIsDirty(true);
+    interpretation.likedBy = likedBy;
+    interpretation.likes = likedBy.length;
+  };
   const onInterpretationDeleted = () => {
     setIsDirty(false);
     onInterpretationUpdate();
@@ -92,11 +100,11 @@ const InterpretationModal = _ref2 => {
       });
     }
   }, [interpretationId, refetch]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, shouldCssHideModal && /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(CenteredContent, null, /*#__PURE__*/React.createElement(CircularLoader, null))), /*#__PURE__*/React.createElement(Modal, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, loadingInProgress && /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(CenteredContent, null, /*#__PURE__*/React.createElement(CircularLoader, null))), /*#__PURE__*/React.createElement(Modal, {
     fluid: true,
     onClose: handleClose,
     className: cx(modalCSS.className, {
-      hidden: shouldCssHideModal
+      hidden: loadingInProgress
     }),
     dataTest: "interpretation-modal"
   }, /*#__PURE__*/React.createElement("h1", {
@@ -134,7 +142,8 @@ const InterpretationModal = _ref2 => {
     onInterpretationDeleted: onInterpretationDeleted,
     onThreadUpdated: onThreadUpdated,
     initialFocus: initialFocus,
-    downloadMenuComponent: downloadMenuComponent
+    downloadMenuComponent: downloadMenuComponent,
+    onLikeToggled: onLikeToggled
   }))))), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(Button, {
     disabled: fetching,
     onClick: handleClose

package/build/es/components/Interpretations/InterpretationModal/InterpretationThread.js

@@ -14,6 +14,7 @@ const InterpretationThread = _ref => {
     fetching,
     interpretation,
     onInterpretationDeleted,
+    onLikeToggled,
     initialFocus,
     onThreadUpdated,
     downloadMenuComponent: DownloadMenu,
@@ -48,6 +49,7 @@ const InterpretationThread = _ref => {
   }, /*#__PURE__*/React.createElement(Interpretation, {
     currentUser: currentUser,
     interpretation: interpretation,
+    onLikeToggled: onLikeToggled,
     onReplyIconClick: interpretationAccess.comment ? () => {
       var _focusRef$current;
       return (_focusRef$current = focusRef.current) === null || _focusRef$current === void 0 ? void 0 : _focusRef$current.focus();
@@ -79,6 +81,7 @@ InterpretationThread.propTypes = {
   fetching: PropTypes.bool.isRequired,
   interpretation: PropTypes.object.isRequired,
   onInterpretationDeleted: PropTypes.func.isRequired,
+  onLikeToggled: PropTypes.func.isRequired,
   dashboardRedirectUrl: PropTypes.string,
   downloadMenuComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   initialFocus: PropTypes.bool,

package/build/es/components/Interpretations/InterpretationsUnit/InterpretationList.js

@@ -21,6 +21,7 @@ export const InterpretationList = _ref => {
     currentUser,
     interpretations,
     onInterpretationClick,
+    onLikeToggled,
     onReplyIconClick,
     refresh,
     disabled,
@@ -58,6 +59,7 @@ export const InterpretationList = _ref => {
     interpretation: interpretation,
     currentUser: currentUser,
     onClick: onInterpretationClick,
+    onLikeToggled: onLikeToggled,
     onReplyIconClick: onReplyIconClick,
     onDeleted: refresh,
     onUpdated: refresh,
@@ -73,6 +75,7 @@ InterpretationList.propTypes = {
   interpretations: PropTypes.array.isRequired,
   refresh: PropTypes.func.isRequired,
   onInterpretationClick: PropTypes.func.isRequired,
+  onLikeToggled: PropTypes.func.isRequired,
   onReplyIconClick: PropTypes.func.isRequired,
   dashboardRedirectUrl: PropTypes.string,
   disabled: PropTypes.bool

package/build/es/components/Interpretations/InterpretationsUnit/InterpretationsUnit.js

@@ -35,14 +35,15 @@ export const InterpretationsUnit = /*#__PURE__*/forwardRef((_ref2, ref) => {
     dashboardRedirectUrl
   } = _ref2;
   const [isExpanded, setIsExpanded] = useState(true);
+  const [interpretations, setInterpretations] = useState([]);
   const showNoTimeDimensionHelpText = type === 'eventVisualization' && !visualizationHasTimeDimension;
   const {
-    data,
     loading,
     fetching,
     refetch
   } = useDataQuery(interpretationsQuery, {
-    lazy: true
+    lazy: true,
+    onComplete: data => setInterpretations(data.interpretations.interpretations)
   });
   const onCompleteAction = useCallback(() => {
     refetch({
@@ -61,6 +62,15 @@ export const InterpretationsUnit = /*#__PURE__*/forwardRef((_ref2, ref) => {
       });
     }
   }, [type, id, renderId, refetch]);
+  const onLikeToggled = _ref3 => {
+    let {
+      id,
+      likedBy
+    } = _ref3;
+    const interpretation = interpretations.find(interp => interp.id === id);
+    interpretation.likedBy = likedBy;
+    interpretation.likes = likedBy.length;
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["4120713286", [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]]]) + " " + (cx('container', {
       expanded: isExpanded
@@ -82,7 +92,7 @@ export const InterpretationsUnit = /*#__PURE__*/forwardRef((_ref2, ref) => {
     className: _JSXStyle.dynamic([["4120713286", [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]]]) + " " + "loader"
   }, /*#__PURE__*/React.createElement(CircularLoader, {
     small: true
-  })), data && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InterpretationForm, {
+  })), interpretations && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InterpretationForm, {
     currentUser: currentUser,
     type: type,
     id: id,
@@ -91,8 +101,9 @@ export const InterpretationsUnit = /*#__PURE__*/forwardRef((_ref2, ref) => {
     showNoTimeDimensionHelpText: showNoTimeDimensionHelpText
   }), /*#__PURE__*/React.createElement(InterpretationList, {
     currentUser: currentUser,
-    interpretations: data.interpretations.interpretations,
+    interpretations: interpretations,
     onInterpretationClick: onInterpretationClick,
+    onLikeToggled: onLikeToggled,
     onReplyIconClick: onReplyIconClick,
     refresh: onCompleteAction,
     disabled: disabled,