@dhis2/analytics 26.4.0 → 26.5.0

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

@@ -10,22 +10,43 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("../../locales/index.js"));
 var _dataTypes = require("../../modules/dataTypes.js");
+var _visTypes = require("../../modules/visTypes.js");
+var _DataDimension = require("./DataDimension.js");
 var _DataTypeSelectorStyle = _interopRequireDefault(require("./styles/DataTypeSelector.style.js"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const DataTypeSelector = _ref => {
-  var _dataTypes$currentDat;
   let {
     currentDataType,
+    dataTypes,
     onChange,
-    dataTest,
-    includeCalculations
+    dataTest
   } = _ref;
+  const {
+    visType
+  } = (0, _DataDimension.useDataDimensionContext)();
+  const label = _index.default.t('Data Type');
   return /*#__PURE__*/_react.default.createElement("div", {
     className: `jsx-${_DataTypeSelectorStyle.default.__hash}` + " " + "container"
-  }, /*#__PURE__*/_react.default.createElement(_ui.SingleSelectField, {
-    label: _index.default.t('Data Type'),
+  }, dataTypes.length === 1 ? /*#__PURE__*/_react.default.createElement(_ui.SingleSelectField, {
+    label: label,
     dataTest: dataTest,
-    selected: ((_dataTypes$currentDat = _dataTypes.dataTypeMap[currentDataType]) === null || _dataTypes$currentDat === void 0 ? void 0 : _dataTypes$currentDat.id) || _dataTypes.DIMENSION_TYPE_ALL,
+    selected: dataTypes[0].id,
+    onChange: ref => onChange(ref.selected),
+    dense: true,
+    disabled: true,
+    helpText: visType ? _index.default.t('Only {{dataType}} can be used in {{visType}}', {
+      dataType: _dataTypes.dataTypeMap[dataTypes[0].id].getName(),
+      visType: (0, _visTypes.getDisplayNameByVisType)(visType)
+    }) : ''
+  }, dataTypes.map(type => /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
+    value: type.id,
+    key: type.id,
+    label: type.getName(),
+    dataTest: `${dataTest}-option-${type.id}`
+  }))) : /*#__PURE__*/_react.default.createElement(_ui.SingleSelectField, {
+    label: label,
+    dataTest: dataTest,
+    selected: currentDataType || _dataTypes.DIMENSION_TYPE_ALL,
     onChange: ref => onChange(ref.selected),
     dense: true
   }, /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
@@ -33,7 +54,7 @@ const DataTypeSelector = _ref => {
     key: _dataTypes.DIMENSION_TYPE_ALL,
     label: _index.default.t('All types'),
     dataTest: `${dataTest}-option-all`
-  }), Object.values(_dataTypes.dataTypeMap).filter(type => type.id !== _dataTypes.DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM || includeCalculations).map(type => /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
+  }), dataTypes.map(type => /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
     value: type.id,
     key: type.id,
     label: type.getName(),
@@ -46,7 +67,7 @@ DataTypeSelector.propTypes = {
   currentDataType: _propTypes.default.string.isRequired,
   onChange: _propTypes.default.func.isRequired,
   dataTest: _propTypes.default.string,
-  includeCalculations: _propTypes.default.bool
+  dataTypes: _propTypes.default.array
 };
 var _default = DataTypeSelector;
 exports.default = _default;

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

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

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

@@ -30,14 +30,14 @@ const LeftHeader = _ref => {
     searchTerm,
     setSearchTerm,
     dataType,
+    dataTypes,
     setDataType,
     group,
     setGroup,
     subGroup,
     setSubGroup,
     displayNameProp,
-    dataTest,
-    supportsEDI
+    dataTest
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "leftHeader"
@@ -58,8 +58,8 @@ const LeftHeader = _ref => {
     currentDataType: dataType,
     onChange: setDataType,
     dataTest: `${dataTest}-data-types-select-field`,
-    includeCalculations: supportsEDI
-  }), _dataTypes.dataTypeMap[dataType] && dataType !== _dataTypes.DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM && /*#__PURE__*/_react.default.createElement(_GroupSelector.default, {
+    dataTypes: dataTypes
+  }), ![_dataTypes.DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM, _dataTypes.DIMENSION_TYPE_ALL].includes(dataType) && /*#__PURE__*/_react.default.createElement(_GroupSelector.default, {
     dataType: dataType,
     displayNameProp: displayNameProp,
     currentGroup: group,
@@ -74,6 +74,7 @@ const LeftHeader = _ref => {
 LeftHeader.propTypes = {
   dataTest: _propTypes.default.string,
   dataType: _propTypes.default.string,
+  dataTypes: _propTypes.default.array,
   displayNameProp: _propTypes.default.string,
   group: _propTypes.default.string,
   searchTerm: _propTypes.default.string,
@@ -81,8 +82,7 @@ LeftHeader.propTypes = {
   setGroup: _propTypes.default.func,
   setSearchTerm: _propTypes.default.func,
   setSubGroup: _propTypes.default.func,
-  subGroup: _propTypes.default.string,
-  supportsEDI: _propTypes.default.bool
+  subGroup: _propTypes.default.string
 };
 const EmptySelection = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
   className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "emptyList"
@@ -91,22 +91,22 @@ const EmptySelection = () => /*#__PURE__*/_react.default.createElement(_react.de
 }, _DimensionSelectorStyle.default));
 const RightHeader = _ref3 => {
   let {
-    infoText
+    infoBoxMessage
   } = _ref3;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
     className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "rightHeader"
-  }, _index.default.t('Selected Items')), infoText && /*#__PURE__*/_react.default.createElement("div", {
+  }, _index.default.t('Selected Items')), infoBoxMessage && /*#__PURE__*/_react.default.createElement("div", {
     className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "info-container"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: `jsx-${_DimensionSelectorStyle.default.__hash}`
   }, /*#__PURE__*/_react.default.createElement(_ui.IconInfo16, null)), /*#__PURE__*/_react.default.createElement("span", {
     className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "info-text"
-  }, infoText)), /*#__PURE__*/_react.default.createElement(_style.default, {
+  }, infoBoxMessage)), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: _DimensionSelectorStyle.default.__hash
   }, _DimensionSelectorStyle.default));
 };
 RightHeader.propTypes = {
-  infoText: _propTypes.default.string
+  infoBoxMessage: _propTypes.default.string
 };
 const SourceEmptyPlaceholder = _ref4 => {
   let {
@@ -138,6 +138,9 @@ const SourceEmptyPlaceholder = _ref4 => {
         case _dataTypes.DIMENSION_TYPE_PROGRAM_INDICATOR:
           message = _index.default.t('No program indicators found');
           break;
+        case _dataTypes.DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM:
+          message = _index.default.t('No calculations found');
+          break;
         default:
           message = _index.default.t('No data');
           break;
@@ -147,32 +150,37 @@ const SourceEmptyPlaceholder = _ref4 => {
     switch (dataType) {
       case _dataTypes.DIMENSION_TYPE_INDICATOR:
         message = _index.default.t('No indicators found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
         });
         break;
       case _dataTypes.DIMENSION_TYPE_DATA_ELEMENT:
         message = _index.default.t('No data elements found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
         });
         break;
       case _dataTypes.DIMENSION_TYPE_DATA_SET:
         message = _index.default.t('No data sets found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
         });
         break;
       case _dataTypes.DIMENSION_TYPE_EVENT_DATA_ITEM:
         message = _index.default.t('No event data items found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
         });
         break;
       case _dataTypes.DIMENSION_TYPE_PROGRAM_INDICATOR:
         message = _index.default.t('No program indicators found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
+        });
+        break;
+      case _dataTypes.DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM:
+        message = _index.default.t('No calculations found for "{{- searchTerm}}"', {
+          searchTerm
         });
         break;
       default:
         message = _index.default.t('Nothing found for "{{- searchTerm}}"', {
-          searchTerm: searchTerm
+          searchTerm
         });
         break;
     }
@@ -200,18 +208,27 @@ const ItemSelector = _ref5 => {
     rightFooter,
     displayNameProp,
     infoBoxMessage,
+    dataTypes,
     dataTest,
-    supportsEDI,
     onEDISave
   } = _ref5;
   const [state, setState] = (0, _react.useState)({
     searchTerm: '',
+    dataTypes,
     filter: {
-      dataType: _dataTypes.DIMENSION_TYPE_ALL
+      dataType: dataTypes.length === 1 ? dataTypes[0].id : _dataTypes.DIMENSION_TYPE_ALL,
+      group: null,
+      subGroup: dataTypes.length === 1 && dataTypes[0].id === _dataTypes.DIMENSION_TYPE_DATA_ELEMENT ? _dataTypes.TOTALS : null
     },
     options: [],
     loading: true,
-    nextPage: 1
+    nextPage: 1,
+    supportsEDI: dataTypes.map(_ref6 => {
+      let {
+        id
+      } = _ref6;
+      return id;
+    }).includes(_dataTypes.DIMENSION_TYPE_EXPRESSION_DIMENSION_ITEM)
   });
   const [currentCalculation, setCurrentCalculation] = (0, _react.useState)();
   const dataEngine = (0, _appRuntime.useDataEngine)();
@@ -219,15 +236,12 @@ const ItemSelector = _ref5 => {
     ...state,
     searchTerm
   }));
-  const setFilter = filter => setState(state => ({
-    ...state,
-    filter
-  }));
   const debouncedSearchTerm = (0, _utils.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 (0, _dimensions.apiFetchOptions)({
@@ -290,11 +304,6 @@ const ItemSelector = _ref5 => {
     }
   };
   (0, _utils.useDidUpdateEffect)(() => {
-    setState(state => ({
-      ...state,
-      loading: true,
-      nextPage: 1
-    }));
     fetchItems(1);
   }, [debouncedSearchTerm, state.filter]);
   const onChange = newSelected => {
@@ -323,13 +332,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,
@@ -352,10 +361,10 @@ const ItemSelector = _ref5 => {
       }]);
     }
   };
-  const onDeleteCalculation = _ref7 => {
+  const onDeleteCalculation = _ref8 => {
     let {
       id
-    } = _ref7;
+    } = _ref8;
     // close the modal
     setCurrentCalculation();
 
@@ -365,11 +374,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 === _dataTypes.DIMENSION_TYPE_DATA_ELEMENT ? _dataTypes.TOTALS : null
+    }
+  }));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.Transfer, {
-    onChange: _ref8 => {
+    onChange: _ref9 => {
       let {
         selected
-      } = _ref8;
+      } = _ref9;
       return onChange(selected);
     },
     selected: selectedItems.map(item => item.value),
@@ -386,36 +421,19 @@ const ItemSelector = _ref5 => {
     }),
     onEndReached: onEndReached,
     leftHeader: /*#__PURE__*/_react.default.createElement(LeftHeader, {
+      dataTypes: state.dataTypes,
       dataType: state.filter.dataType,
-      setDataType: dataType => {
-        setFilter({
-          ...state.filter,
-          dataType,
-          group: null,
-          subGroup: dataType === _dataTypes.DIMENSION_TYPE_DATA_ELEMENT ? _dataTypes.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.default.createElement("div", {
+    leftFooter: state.supportsEDI ? /*#__PURE__*/_react.default.createElement("div", {
       className: `jsx-${_DimensionSelectorStyle.default.__hash}` + " " + "calculation-button"
     }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
       icon: /*#__PURE__*/_react.default.createElement(_ui.IconAdd24, null),
@@ -428,7 +446,7 @@ const ItemSelector = _ref5 => {
     selectedWidth: _dimensionSelectorHelper.TRANSFER_SELECTED_WIDTH,
     selectedEmptyComponent: /*#__PURE__*/_react.default.createElement(EmptySelection, null),
     rightHeader: /*#__PURE__*/_react.default.createElement(RightHeader, {
-      infoText: infoBoxMessage
+      infoBoxMessage: infoBoxMessage
     }),
     rightFooter: rightFooter,
     renderOption: props => {
@@ -442,7 +460,7 @@ const ItemSelector = _ref5 => {
           expression: props.expression
         }),
         dataTest: `${dataTest}-transfer-option`,
-        onEditClick: getItemType(props.value) === _dataTypes.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) === _dataTypes.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
@@ -452,7 +470,7 @@ const ItemSelector = _ref5 => {
     },
 
     dataTest: `${dataTest}-transfer`
-  }), currentCalculation && supportsEDI && /*#__PURE__*/_react.default.createElement(_CalculationModal.default, {
+  }), currentCalculation && state.supportsEDI && /*#__PURE__*/_react.default.createElement(_CalculationModal.default, {
     calculation: currentCalculation,
     onSave: onSaveCalculation,
     onClose: () => setCurrentCalculation(),
@@ -466,6 +484,7 @@ ItemSelector.propTypes = {
   displayNameProp: _propTypes.default.string.isRequired,
   onSelect: _propTypes.default.func.isRequired,
   dataTest: _propTypes.default.string,
+  dataTypes: _propTypes.default.array,
   infoBoxMessage: _propTypes.default.string,
   noItemsMessage: _propTypes.default.string,
   rightFooter: _propTypes.default.node,
@@ -476,7 +495,6 @@ ItemSelector.propTypes = {
     type: _propTypes.default.string,
     expression: _propTypes.default.string
   })),
-  supportsEDI: _propTypes.default.bool,
   onEDISave: _propTypes.default.func
 };
 ItemSelector.defaultProps = {

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

@@ -73,7 +73,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();
@@ -89,6 +89,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();
@@ -101,11 +109,11 @@ const InterpretationModal = _ref2 => {
       });
     }
   }, [interpretationId, refetch]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, shouldCssHideModal && /*#__PURE__*/_react.default.createElement(_ui.Layer, null, /*#__PURE__*/_react.default.createElement(_ui.CenteredContent, null, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, null))), /*#__PURE__*/_react.default.createElement(_ui.Modal, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loadingInProgress && /*#__PURE__*/_react.default.createElement(_ui.Layer, null, /*#__PURE__*/_react.default.createElement(_ui.CenteredContent, null, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, null))), /*#__PURE__*/_react.default.createElement(_ui.Modal, {
     fluid: true,
     onClose: handleClose,
     className: (0, _classnames.default)(modalCSS.className, {
-      hidden: shouldCssHideModal
+      hidden: loadingInProgress
     }),
     dataTest: "interpretation-modal"
   }, /*#__PURE__*/_react.default.createElement("h1", {
@@ -143,7 +151,8 @@ const InterpretationModal = _ref2 => {
     onInterpretationDeleted: onInterpretationDeleted,
     onThreadUpdated: onThreadUpdated,
     initialFocus: initialFocus,
-    downloadMenuComponent: downloadMenuComponent
+    downloadMenuComponent: downloadMenuComponent,
+    onLikeToggled: onLikeToggled
   }))))), /*#__PURE__*/_react.default.createElement(_ui.ModalActions, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
     disabled: fetching,
     onClick: handleClose

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

@@ -23,6 +23,7 @@ const InterpretationThread = _ref => {
     fetching,
     interpretation,
     onInterpretationDeleted,
+    onLikeToggled,
     initialFocus,
     onThreadUpdated,
     downloadMenuComponent: DownloadMenu,
@@ -57,6 +58,7 @@ const InterpretationThread = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_index.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();
@@ -89,6 +91,7 @@ InterpretationThread.propTypes = {
   fetching: _propTypes.default.bool.isRequired,
   interpretation: _propTypes.default.object.isRequired,
   onInterpretationDeleted: _propTypes.default.func.isRequired,
+  onLikeToggled: _propTypes.default.func.isRequired,
   dashboardRedirectUrl: _propTypes.default.string,
   downloadMenuComponent: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]),
   initialFocus: _propTypes.default.bool,

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

@@ -28,6 +28,7 @@ const InterpretationList = _ref => {
     currentUser,
     interpretations,
     onInterpretationClick,
+    onLikeToggled,
     onReplyIconClick,
     refresh,
     disabled,
@@ -65,6 +66,7 @@ const InterpretationList = _ref => {
     interpretation: interpretation,
     currentUser: currentUser,
     onClick: onInterpretationClick,
+    onLikeToggled: onLikeToggled,
     onReplyIconClick: onReplyIconClick,
     onDeleted: refresh,
     onUpdated: refresh,
@@ -81,6 +83,7 @@ InterpretationList.propTypes = {
   interpretations: _propTypes.default.array.isRequired,
   refresh: _propTypes.default.func.isRequired,
   onInterpretationClick: _propTypes.default.func.isRequired,
+  onLikeToggled: _propTypes.default.func.isRequired,
   onReplyIconClick: _propTypes.default.func.isRequired,
   dashboardRedirectUrl: _propTypes.default.string,
   disabled: _propTypes.default.bool

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

@@ -44,14 +44,15 @@ const InterpretationsUnit = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     dashboardRedirectUrl
   } = _ref2;
   const [isExpanded, setIsExpanded] = (0, _react.useState)(true);
+  const [interpretations, setInterpretations] = (0, _react.useState)([]);
   const showNoTimeDimensionHelpText = type === 'eventVisualization' && !visualizationHasTimeDimension;
   const {
-    data,
     loading,
     fetching,
     refetch
   } = (0, _appRuntime.useDataQuery)(interpretationsQuery, {
-    lazy: true
+    lazy: true,
+    onComplete: data => setInterpretations(data.interpretations.interpretations)
   });
   const onCompleteAction = (0, _react.useCallback)(() => {
     refetch({
@@ -70,6 +71,15 @@ const InterpretationsUnit = /*#__PURE__*/(0, _react.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.default.createElement("div", {
     className: _style.default.dynamic([["4120713286", [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]]]) + " " + ((0, _classnames.default)('container', {
       expanded: isExpanded
@@ -91,7 +101,7 @@ const InterpretationsUnit = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     className: _style.default.dynamic([["4120713286", [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]]]) + " " + "loader"
   }, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, {
     small: true
-  })), data && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InterpretationForm.InterpretationForm, {
+  })), interpretations && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InterpretationForm.InterpretationForm, {
     currentUser: currentUser,
     type: type,
     id: id,
@@ -100,8 +110,9 @@ const InterpretationsUnit = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     showNoTimeDimensionHelpText: showNoTimeDimensionHelpText
   }), /*#__PURE__*/_react.default.createElement(_InterpretationList.InterpretationList, {
     currentUser: currentUser,
-    interpretations: data.interpretations.interpretations,
+    interpretations: interpretations,
     onInterpretationClick: onInterpretationClick,
+    onLikeToggled: onLikeToggled,
     onReplyIconClick: onReplyIconClick,
     refresh: onCompleteAction,
     disabled: disabled,

package/build/cjs/components/Interpretations/common/Interpretation/Interpretation.js

@@ -25,7 +25,8 @@ const Interpretation = _ref => {
     disabled,
     onReplyIconClick,
     dashboardRedirectUrl,
-    isInThread
+    isInThread,
+    onLikeToggled
   } = _ref;
   const [isUpdateMode, setIsUpdateMode] = (0, _react.useState)(false);
   const [showSharingDialog, setShowSharingDialog] = (0, _react.useState)(false);
@@ -36,7 +37,10 @@ const Interpretation = _ref => {
   } = (0, _useLike.useLike)({
     interpretation,
     currentUser,
-    onComplete: onUpdated
+    onComplete: likedBy => onLikeToggled({
+      id: interpretation.id,
+      likedBy
+    })
   });
   const shouldShowButton = Boolean(!!onClick && !disabled & !dashboardRedirectUrl);
   const interpretationAccess = (0, _index.getInterpretationAccess)(interpretation, currentUser);
@@ -123,6 +127,7 @@ Interpretation.propTypes = {
   currentUser: _propTypes.default.object.isRequired,
   interpretation: _propTypes.default.object.isRequired,
   onDeleted: _propTypes.default.func.isRequired,
+  onLikeToggled: _propTypes.default.func.isRequired,
   onReplyIconClick: _propTypes.default.func.isRequired,
   onUpdated: _propTypes.default.func.isRequired,
   dashboardRedirectUrl: _propTypes.default.string,

package/build/cjs/components/Interpretations/common/Interpretation/useLike.js

@@ -24,12 +24,22 @@ const useLike = _ref => {
   const [like, {
     loading: likeLoading
   }] = (0, _appRuntime.useDataMutation)(likeMutationRef.current, {
-    onComplete
+    onComplete: () => {
+      const newLikedBy = interpretation.likedBy.concat({
+        id: currentUser.id
+      });
+      setIsLikedByCurrentUser(true);
+      onComplete(newLikedBy);
+    }
   });
   const [unlike, {
     loading: unlikeLoading
   }] = (0, _appRuntime.useDataMutation)(unlikeMutationRef.current, {
-    onComplete
+    onComplete: () => {
+      const newLikedBy = interpretation.likedBy.filter(lb => lb.id !== currentUser.id);
+      setIsLikedByCurrentUser(false);
+      onComplete(newLikedBy);
+    }
   });
   const [isLikedByCurrentUser, setIsLikedByCurrentUser] = (0, _react.useState)(false);
   const toggleLike = () => {

package/build/cjs/components/PeriodDimension/PeriodDimension.js

@@ -23,7 +23,8 @@ const PeriodDimension = _ref => {
     onSelect,
     selectedPeriods,
     rightFooter,
-    excludedPeriodTypes
+    excludedPeriodTypes,
+    infoBoxMessage
   } = _ref;
   const {
     systemInfo
@@ -51,7 +52,8 @@ const PeriodDimension = _ref => {
   };
   return /*#__PURE__*/_react.default.createElement(_PeriodTransfer.default, {
     onSelect: selectPeriods,
-    initialSelectedPeriods: selectedPeriods,
+    selectedItems: selectedPeriods,
+    infoBoxMessage: infoBoxMessage,
     rightFooter: rightFooter,
     dataTest: 'period-dimension',
     excludedPeriodTypes: excludedPeriodTypes,
@@ -61,6 +63,7 @@ const PeriodDimension = _ref => {
 PeriodDimension.propTypes = {
   onSelect: _propTypes.default.func.isRequired,
   excludedPeriodTypes: _propTypes.default.arrayOf(_propTypes.default.string),
+  infoBoxMessage: _propTypes.default.string,
   rightFooter: _propTypes.default.node,
   selectedPeriods: _propTypes.default.array
 };