@dhis2/analytics 26.3.1 → 26.4.1

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,9 +23,11 @@ const InterpretationThread = _ref => {
     fetching,
     interpretation,
     onInterpretationDeleted,
+    onLikeToggled,
     initialFocus,
     onThreadUpdated,
-    downloadMenuComponent: DownloadMenu
+    downloadMenuComponent: DownloadMenu,
+    dashboardRedirectUrl
   } = _ref;
   const {
     fromServerDate
@@ -40,30 +42,33 @@ const InterpretationThread = _ref => {
   }, [initialFocus]);
   const interpretationAccess = (0, _index.getInterpretationAccess)(interpretation, currentUser);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "jsx-1846557365" + " " + ((0, _classnames.default)('container', {
-      fetching
+    className: "jsx-3292109121" + " " + ((0, _classnames.default)('container', {
+      fetching,
+      dashboard: !!dashboardRedirectUrl
     }) || "")
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "jsx-1846557365" + " " + 'title'
+    className: "jsx-3292109121" + " " + 'title'
   }, /*#__PURE__*/_react.default.createElement(_ui.IconClock16, {
     color: _ui.colors.grey700
   }), (0, _moment.default)(fromServerDate(interpretation.created)).format('LLL')), DownloadMenu && /*#__PURE__*/_react.default.createElement(DownloadMenu, {
     relativePeriodDate: interpretation.created,
-    className: "jsx-1846557365"
+    className: "jsx-3292109121"
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "jsx-1846557365" + " " + 'thread'
+    className: "jsx-3292109121" + " " + 'thread'
   }, /*#__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();
     } : null,
     onUpdated: () => onThreadUpdated(true),
     onDeleted: onInterpretationDeleted,
+    dashboardRedirectUrl: dashboardRedirectUrl,
     isInThread: true
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "jsx-1846557365" + " " + 'comments'
+    className: "jsx-3292109121" + " " + 'comments'
   }, interpretation.comments.map(comment => /*#__PURE__*/_react.default.createElement(_Comment.Comment, {
     key: comment.id,
     comment: comment,
@@ -77,8 +82,8 @@ const InterpretationThread = _ref => {
     onSave: () => onThreadUpdated(true),
     focusRef: focusRef
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "1846557365"
-  }, [".thread.jsx-1846557365{margin-top:var(--spacers-dp16);overflow-y:auto;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;}", ".container.jsx-1846557365{position:relative;overflow:auto;max-height:calc(100vh - 285px);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".container.fetching.jsx-1846557365::before{content:'';position:absolute;inset:0px;background-color:rgba(255,255,255,0.8);}", ".container.fetching.jsx-1846557365::after{content:'';position:absolute;top:calc(50% - 12px);left:calc(50% - 12px);width:24px;height:24px;border-width:4px;border-style:solid;border-color:rgba(110,122,138,0.15) rgba(110,122,138,0.15) rgb(20,124,215);border-image:initial;border-radius:50%;-webkit-animation:1s linear 0s infinite normal none running rotation-jsx-1846557365;animation:1s linear 0s infinite normal none running rotation-jsx-1846557365;}", ".title.jsx-1846557365{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--spacers-dp8);color:var(--colors-grey900);font-size:14px;line-height:18px;}", ".comments.jsx-1846557365{padding-left:16px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding-top:var(--spacers-dp4);gap:var(--spacers-dp4);}", "@-webkit-keyframes rotation-jsx-1846557365{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes rotation-jsx-1846557365{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}"]));
+    id: "3292109121"
+  }, [".thread.jsx-3292109121{margin-top:var(--spacers-dp16);overflow-y:auto;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;}", ".dashboard.jsx-3292109121 .thread.jsx-3292109121{overflow-y:hidden;}", ".container.jsx-3292109121{position:relative;overflow:auto;max-height:calc(100vh - 285px);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".container.dashboard.jsx-3292109121{max-height:none;}", ".container.fetching.jsx-3292109121::before{content:'';position:absolute;inset:0px;background-color:rgba(255,255,255,0.8);}", ".container.fetching.jsx-3292109121::after{content:'';position:absolute;top:calc(50% - 12px);left:calc(50% - 12px);width:24px;height:24px;border-width:4px;border-style:solid;border-color:rgba(110,122,138,0.15) rgba(110,122,138,0.15) rgb(20,124,215);border-image:initial;border-radius:50%;-webkit-animation:1s linear 0s infinite normal none running rotation-jsx-3292109121;animation:1s linear 0s infinite normal none running rotation-jsx-3292109121;}", ".title.jsx-3292109121{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--spacers-dp8);color:var(--colors-grey900);font-size:14px;line-height:18px;}", ".comments.jsx-3292109121{padding-left:16px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding-top:var(--spacers-dp4);gap:var(--spacers-dp4);}", "@-webkit-keyframes rotation-jsx-3292109121{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes rotation-jsx-3292109121{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}"]));
 };
 exports.InterpretationThread = InterpretationThread;
 InterpretationThread.propTypes = {
@@ -86,6 +91,8 @@ 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,
   onThreadUpdated: _propTypes.default.func

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

@@ -9,4 +9,11 @@ Object.defineProperty(exports, "InterpretationModal", {
     return _InterpretationModal.InterpretationModal;
   }
 });
-var _InterpretationModal = require("./InterpretationModal.js");
+Object.defineProperty(exports, "InterpretationThread", {
+  enumerable: true,
+  get: function () {
+    return _InterpretationThread.InterpretationThread;
+  }
+});
+var _InterpretationModal = require("./InterpretationModal.js");
+var _InterpretationThread = require("./InterpretationThread.js");

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

@@ -28,9 +28,11 @@ const InterpretationList = _ref => {
     currentUser,
     interpretations,
     onInterpretationClick,
+    onLikeToggled,
     onReplyIconClick,
     refresh,
-    disabled
+    disabled,
+    dashboardRedirectUrl
   } = _ref;
   const {
     fromServerDate
@@ -64,10 +66,12 @@ const InterpretationList = _ref => {
     interpretation: interpretation,
     currentUser: currentUser,
     onClick: onInterpretationClick,
+    onLikeToggled: onLikeToggled,
     onReplyIconClick: onReplyIconClick,
     onDeleted: refresh,
     onUpdated: refresh,
-    disabled: disabled
+    disabled: disabled,
+    dashboardRedirectUrl: dashboardRedirectUrl
   }))))), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "4058400613",
     dynamic: [_ui.spacers.dp8, _ui.spacers.dp8, _ui.spacers.dp16, _ui.colors.grey800, _ui.spacers.dp12, _ui.spacers.dp12, _ui.spacers.dp32, _ui.spacers.dp4]
@@ -79,6 +83,8 @@ 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

@@ -40,17 +40,19 @@ const InterpretationsUnit = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     onInterpretationClick,
     onReplyIconClick,
     disabled,
-    renderId
+    renderId,
+    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({
@@ -69,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
@@ -90,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,
@@ -99,11 +110,13 @@ 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
+    disabled: disabled,
+    dashboardRedirectUrl: dashboardRedirectUrl
   }))), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "4120713286",
     dynamic: [_ui.spacers.dp16, _ui.colors.grey400, _ui.colors.white, _ui.spacers.dp32, _ui.colors.grey900]
@@ -119,6 +132,7 @@ InterpretationsUnit.propTypes = {
   currentUser: _propTypes.default.object.isRequired,
   id: _propTypes.default.string.isRequired,
   type: _propTypes.default.string.isRequired,
+  dashboardRedirectUrl: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   renderId: _propTypes.default.number,
   visualizationHasTimeDimension: _propTypes.default.bool,

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

@@ -24,7 +24,9 @@ const Interpretation = _ref => {
     onDeleted,
     disabled,
     onReplyIconClick,
-    isInThread
+    dashboardRedirectUrl,
+    isInThread,
+    onLikeToggled
   } = _ref;
   const [isUpdateMode, setIsUpdateMode] = (0, _react.useState)(false);
   const [showSharingDialog, setShowSharingDialog] = (0, _react.useState)(false);
@@ -35,9 +37,12 @@ const Interpretation = _ref => {
   } = (0, _useLike.useLike)({
     interpretation,
     currentUser,
-    onComplete: onUpdated
+    onComplete: likedBy => onLikeToggled({
+      id: interpretation.id,
+      likedBy
+    })
   });
-  const shouldShowButton = !!onClick && !disabled;
+  const shouldShowButton = Boolean(!!onClick && !disabled & !dashboardRedirectUrl);
   const interpretationAccess = (0, _index.getInterpretationAccess)(interpretation, currentUser);
   let tooltip = _d2I18n.default.t('Reply');
   if (!interpretationAccess.comment) {
@@ -51,6 +56,9 @@ const Interpretation = _ref => {
       tooltip = _d2I18n.default.t('View replies');
     }
   }
+
+  // Maps still uses old url style /?id= instead of hash
+  const getAppInterpretationUrl = () => dashboardRedirectUrl.includes('?') ? `${dashboardRedirectUrl}&interpretationId=${interpretation.id}` : `${dashboardRedirectUrl}?interpretationId=${interpretation.id}`;
   return isUpdateMode ? /*#__PURE__*/_react.default.createElement(_InterpretationUpdateForm.InterpretationUpdateForm, {
     close: () => setIsUpdateMode(false),
     id: interpretation.id,
@@ -77,6 +85,16 @@ const Interpretation = _ref => {
     count: interpretation.comments.length,
     dataTest: "interpretation-reply-button",
     viewOnly: isInThread && !interpretationAccess.comment
+  }), dashboardRedirectUrl && !isInThread && /*#__PURE__*/_react.default.createElement(_index.MessageIconButton, {
+    tooltipContent: _d2I18n.default.t('See interpretation'),
+    iconComponent: _ui.IconView16,
+    onClick: () => onClick(interpretation.id),
+    dataTest: "interpretation-view-button"
+  }), dashboardRedirectUrl && /*#__PURE__*/_react.default.createElement(_index.MessageIconButton, {
+    tooltipContent: _d2I18n.default.t('Open in app'),
+    iconComponent: _ui.IconLaunch16,
+    onClick: () => window.open(getAppInterpretationUrl(), '_blank'),
+    dataTest: "interpretation-launch-in-app-button"
   }), interpretationAccess.share && /*#__PURE__*/_react.default.createElement(_index.MessageIconButton, {
     iconComponent: _ui.IconShare16,
     tooltipContent: _d2I18n.default.t('Share'),
@@ -109,8 +127,10 @@ 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,
   disabled: _propTypes.default.bool,
   isInThread: _propTypes.default.bool,
   onClick: _propTypes.default.func

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/index.js

@@ -22,6 +22,7 @@ var _exportNames = {
   AboutAOUnit: true,
   InterpretationsUnit: true,
   InterpretationModal: true,
+  InterpretationThread: true,
   TranslationDialog: true,
   OfflineTooltip: true,
   CachedDataQueryProvider: true,
@@ -293,13 +294,13 @@ Object.defineProperty(exports, "Analytics", {
 Object.defineProperty(exports, "BIMONTHLY", {
   enumerable: true,
   get: function () {
-    return _index9.BIMONTHLY;
+    return _index11.BIMONTHLY;
   }
 });
 Object.defineProperty(exports, "BIWEEKLY", {
   enumerable: true,
   get: function () {
-    return _index9.BIWEEKLY;
+    return _index11.BIWEEKLY;
   }
 });
 Object.defineProperty(exports, "COLOR_SET_BASIC", {
@@ -359,7 +360,7 @@ Object.defineProperty(exports, "CachedDataQueryProvider", {
 Object.defineProperty(exports, "DAILY", {
   enumerable: true,
   get: function () {
-    return _index9.DAILY;
+    return _index11.DAILY;
   }
 });
 Object.defineProperty(exports, "DEFAULT_AXIS_IDS", {
@@ -563,7 +564,7 @@ Object.defineProperty(exports, "DynamicDimension", {
 Object.defineProperty(exports, "FINANCIAL", {
   enumerable: true,
   get: function () {
-    return _index9.FINANCIAL;
+    return _index11.FINANCIAL;
   }
 });
 Object.defineProperty(exports, "FONT_STYLE_AXIS_LABELS", {
@@ -653,25 +654,25 @@ Object.defineProperty(exports, "FONT_STYLE_VISUALIZATION_TITLE", {
 Object.defineProperty(exports, "FYAPR", {
   enumerable: true,
   get: function () {
-    return _index9.FYAPR;
+    return _index11.FYAPR;
   }
 });
 Object.defineProperty(exports, "FYJUL", {
   enumerable: true,
   get: function () {
-    return _index9.FYJUL;
+    return _index11.FYJUL;
   }
 });
 Object.defineProperty(exports, "FYNOV", {
   enumerable: true,
   get: function () {
-    return _index9.FYNOV;
+    return _index11.FYNOV;
   }
 });
 Object.defineProperty(exports, "FYOCT", {
   enumerable: true,
   get: function () {
-    return _index9.FYOCT;
+    return _index11.FYOCT;
   }
 });
 Object.defineProperty(exports, "FileMenu", {
@@ -707,13 +708,19 @@ Object.defineProperty(exports, "ITEM_PROP_ID", {
 Object.defineProperty(exports, "InterpretationModal", {
   enumerable: true,
   get: function () {
-    return _InterpretationModal.InterpretationModal;
+    return _index3.InterpretationModal;
+  }
+});
+Object.defineProperty(exports, "InterpretationThread", {
+  enumerable: true,
+  get: function () {
+    return _index3.InterpretationThread;
   }
 });
 Object.defineProperty(exports, "InterpretationsUnit", {
   enumerable: true,
   get: function () {
-    return _InterpretationsUnit.InterpretationsUnit;
+    return _index2.InterpretationsUnit;
   }
 });
 Object.defineProperty(exports, "LAYOUT", {
@@ -797,7 +804,7 @@ Object.defineProperty(exports, "LegendKey", {
 Object.defineProperty(exports, "MONTHLY", {
   enumerable: true,
   get: function () {
-    return _index9.MONTHLY;
+    return _index11.MONTHLY;
   }
 });
 Object.defineProperty(exports, "OfflineTooltip", {
@@ -827,19 +834,19 @@ Object.defineProperty(exports, "PivotTable", {
 Object.defineProperty(exports, "QUARTERLY", {
   enumerable: true,
   get: function () {
-    return _index9.QUARTERLY;
+    return _index11.QUARTERLY;
   }
 });
 Object.defineProperty(exports, "SIXMONTHLY", {
   enumerable: true,
   get: function () {
-    return _index9.SIXMONTHLY;
+    return _index11.SIXMONTHLY;
   }
 });
 Object.defineProperty(exports, "SIXMONTHLYAPR", {
   enumerable: true,
   get: function () {
-    return _index9.SIXMONTHLYAPR;
+    return _index11.SIXMONTHLYAPR;
   }
 });
 Object.defineProperty(exports, "TEXT_ALIGN_CENTER", {
@@ -863,25 +870,25 @@ Object.defineProperty(exports, "TEXT_ALIGN_RIGHT", {
 Object.defineProperty(exports, "TranslationDialog", {
   enumerable: true,
   get: function () {
-    return _index3.TranslationDialog;
+    return _index5.TranslationDialog;
   }
 });
 Object.defineProperty(exports, "USER_ORG_UNIT", {
   enumerable: true,
   get: function () {
-    return _index4.USER_ORG_UNIT;
+    return _index6.USER_ORG_UNIT;
   }
 });
 Object.defineProperty(exports, "USER_ORG_UNIT_CHILDREN", {
   enumerable: true,
   get: function () {
-    return _index4.USER_ORG_UNIT_CHILDREN;
+    return _index6.USER_ORG_UNIT_CHILDREN;
   }
 });
 Object.defineProperty(exports, "USER_ORG_UNIT_GRANDCHILDREN", {
   enumerable: true,
   get: function () {
-    return _index4.USER_ORG_UNIT_GRANDCHILDREN;
+    return _index6.USER_ORG_UNIT_GRANDCHILDREN;
   }
 });
 Object.defineProperty(exports, "VALUE_TYPE_AGE", {
@@ -1139,43 +1146,43 @@ Object.defineProperty(exports, "VisualizationOptions", {
 Object.defineProperty(exports, "WEEKLY", {
   enumerable: true,
   get: function () {
-    return _index9.WEEKLY;
+    return _index11.WEEKLY;
   }
 });
 Object.defineProperty(exports, "WEEKLYSAT", {
   enumerable: true,
   get: function () {
-    return _index9.WEEKLYSAT;
+    return _index11.WEEKLYSAT;
   }
 });
 Object.defineProperty(exports, "WEEKLYSUN", {
   enumerable: true,
   get: function () {
-    return _index9.WEEKLYSUN;
+    return _index11.WEEKLYSUN;
   }
 });
 Object.defineProperty(exports, "WEEKLYTHU", {
   enumerable: true,
   get: function () {
-    return _index9.WEEKLYTHU;
+    return _index11.WEEKLYTHU;
   }
 });
 Object.defineProperty(exports, "WEEKLYWED", {
   enumerable: true,
   get: function () {
-    return _index9.WEEKLYWED;
+    return _index11.WEEKLYWED;
   }
 });
 Object.defineProperty(exports, "WEEKS_THIS_YEAR", {
   enumerable: true,
   get: function () {
-    return _index9.WEEKS_THIS_YEAR;
+    return _index11.WEEKS_THIS_YEAR;
   }
 });
 Object.defineProperty(exports, "YEARLY", {
   enumerable: true,
   get: function () {
-    return _index9.YEARLY;
+    return _index11.YEARLY;
   }
 });
 Object.defineProperty(exports, "apiFetchDimensions", {
@@ -1265,7 +1272,7 @@ Object.defineProperty(exports, "axisIsEmpty", {
 Object.defineProperty(exports, "canDimensionBeAddedToAxis", {
   enumerable: true,
   get: function () {
-    return _index7.canDimensionBeAddedToAxis;
+    return _index9.canDimensionBeAddedToAxis;
   }
 });
 Object.defineProperty(exports, "colorSets", {
@@ -1277,13 +1284,13 @@ Object.defineProperty(exports, "colorSets", {
 Object.defineProperty(exports, "convertOuLevelsToUids", {
   enumerable: true,
   get: function () {
-    return _index5.convertOuLevelsToUids;
+    return _index7.convertOuLevelsToUids;
   }
 });
 Object.defineProperty(exports, "createVisualization", {
   enumerable: true,
   get: function () {
-    return _index8.createVisualization;
+    return _index10.createVisualization;
   }
 });
 Object.defineProperty(exports, "defaultFontStyle", {
@@ -1367,31 +1374,31 @@ Object.defineProperty(exports, "getAdaptedUiLayoutByType", {
 Object.defineProperty(exports, "getAllLockedDimensionIds", {
   enumerable: true,
   get: function () {
-    return _index7.getAllLockedDimensionIds;
+    return _index9.getAllLockedDimensionIds;
   }
 });
 Object.defineProperty(exports, "getAvailableAxes", {
   enumerable: true,
   get: function () {
-    return _index7.getAvailableAxes;
+    return _index9.getAvailableAxes;
   }
 });
 Object.defineProperty(exports, "getAxisMaxNumberOfDimensions", {
   enumerable: true,
   get: function () {
-    return _index7.getAxisMaxNumberOfDimensions;
+    return _index9.getAxisMaxNumberOfDimensions;
   }
 });
 Object.defineProperty(exports, "getAxisMaxNumberOfItems", {
   enumerable: true,
   get: function () {
-    return _index7.getAxisMaxNumberOfItems;
+    return _index9.getAxisMaxNumberOfItems;
   }
 });
 Object.defineProperty(exports, "getAxisMinNumberOfDimensions", {
   enumerable: true,
   get: function () {
-    return _index7.getAxisMinNumberOfDimensions;
+    return _index9.getAxisMinNumberOfDimensions;
   }
 });
 Object.defineProperty(exports, "getAxisName", {
@@ -1409,7 +1416,7 @@ Object.defineProperty(exports, "getAxisNameByLayoutType", {
 Object.defineProperty(exports, "getAxisPerLockedDimension", {
   enumerable: true,
   get: function () {
-    return _index7.getAxisPerLockedDimension;
+    return _index9.getAxisPerLockedDimension;
   }
 });
 Object.defineProperty(exports, "getColorByValueFromLegendSet", {
@@ -1427,7 +1434,7 @@ Object.defineProperty(exports, "getDimensionById", {
 Object.defineProperty(exports, "getDisallowedDimensions", {
   enumerable: true,
   get: function () {
-    return _index7.getDisallowedDimensions;
+    return _index9.getDisallowedDimensions;
   }
 });
 Object.defineProperty(exports, "getDisplayNameByVisType", {
@@ -1493,13 +1500,13 @@ Object.defineProperty(exports, "getTextAlignOptions", {
 Object.defineProperty(exports, "getTransferableDimension", {
   enumerable: true,
   get: function () {
-    return _index7.getTransferableDimension;
+    return _index9.getTransferableDimension;
   }
 });
 Object.defineProperty(exports, "hasAxisTooManyItems", {
   enumerable: true,
   get: function () {
-    return _index7.hasAxisTooManyItems;
+    return _index9.hasAxisTooManyItems;
   }
 });
 Object.defineProperty(exports, "hasCustomAxes", {
@@ -1511,13 +1518,13 @@ Object.defineProperty(exports, "hasCustomAxes", {
 Object.defineProperty(exports, "hasRelativeItems", {
   enumerable: true,
   get: function () {
-    return _index6.hasRelativeItems;
+    return _index8.hasRelativeItems;
   }
 });
 Object.defineProperty(exports, "isAxisFull", {
   enumerable: true,
   get: function () {
-    return _index7.isAxisFull;
+    return _index9.isAxisFull;
   }
 });
 Object.defineProperty(exports, "isColumnBasedType", {
@@ -1529,7 +1536,7 @@ Object.defineProperty(exports, "isColumnBasedType", {
 Object.defineProperty(exports, "isDimensionLocked", {
   enumerable: true,
   get: function () {
-    return _index7.isDimensionLocked;
+    return _index9.isDimensionLocked;
   }
 });
 Object.defineProperty(exports, "isDualAxisType", {
@@ -1679,7 +1686,7 @@ Object.defineProperty(exports, "layoutReplaceDimension", {
 Object.defineProperty(exports, "ouIdHelper", {
   enumerable: true,
   get: function () {
-    return _index4.ouIdHelper;
+    return _index6.ouIdHelper;
   }
 });
 Object.defineProperty(exports, "preparePayloadForSaveAs", {
@@ -1722,21 +1729,21 @@ var _utils = require("./components/FileMenu/utils.js");
 var _VisTypeIcon = _interopRequireDefault(require("./components/VisTypeIcon.js"));
 var _LegendKey = _interopRequireDefault(require("./components/LegendKey/LegendKey.js"));
 var _AboutAOUnit = _interopRequireDefault(require("./components/AboutAOUnit/AboutAOUnit.js"));
-var _InterpretationsUnit = require("./components/Interpretations/InterpretationsUnit/InterpretationsUnit.js");
-var _InterpretationModal = require("./components/Interpretations/InterpretationModal/InterpretationModal.js");
-var _index2 = require("./components/Toolbar/index.js");
-Object.keys(_index2).forEach(function (key) {
+var _index2 = require("./components/Interpretations/InterpretationsUnit/index.js");
+var _index3 = require("./components/Interpretations/InterpretationModal/index.js");
+var _index4 = require("./components/Toolbar/index.js");
+Object.keys(_index4).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _index2[key]) return;
+  if (key in exports && exports[key] === _index4[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _index2[key];
+      return _index4[key];
     }
   });
 });
-var _index3 = require("./components/TranslationDialog/index.js");
+var _index5 = require("./components/TranslationDialog/index.js");
 var _OfflineTooltip = require("./components/OfflineTooltip.js");
 var _CachedDataQueryProvider = require("./components/CachedDataQueryProvider.js");
 var _Analytics = _interopRequireDefault(require("./api/analytics/Analytics.js"));
@@ -1744,10 +1751,10 @@ var _dimensions = require("./api/dimensions.js");
 var _organisationUnits = require("./api/organisationUnits.js");
 var _axis = require("./modules/axis.js");
 var _predefinedDimensions = require("./modules/predefinedDimensions.js");
-var _index4 = require("./modules/ouIdHelper/index.js");
-var _index5 = require("./modules/ouLevelUtils/index.js");
+var _index6 = require("./modules/ouIdHelper/index.js");
+var _index7 = require("./modules/ouLevelUtils/index.js");
 var _getAdaptedUiLayoutByType = require("./modules/getAdaptedUiLayoutByType.js");
-var _index6 = require("./modules/relativeItems/index.js");
+var _index8 = require("./modules/relativeItems/index.js");
 var _layout = require("./modules/layout/layout.js");
 var _layoutFilterDimensions = require("./modules/layout/layoutFilterDimensions.js");
 var _layoutGetAllAxes = require("./modules/layout/layoutGetAllAxes.js");
@@ -1787,13 +1794,13 @@ var _itemIsValid = require("./modules/layout/itemIsValid.js");
 var _visTypeToLayoutType = require("./modules/visTypeToLayoutType.js");
 var _visTypes = require("./modules/visTypes.js");
 var _layoutTypes = require("./modules/layoutTypes.js");
-var _index7 = require("./modules/layoutUiRules/index.js");
-var _index8 = require("./visualizations/index.js");
+var _index9 = require("./modules/layoutUiRules/index.js");
+var _index10 = require("./visualizations/index.js");
 var _fontStyle = require("./modules/fontStyle.js");
 var _legends = require("./modules/legends.js");
 var _renderValue = require("./modules/renderValue.js");
 var _colorSets = require("./visualizations/util/colors/colorSets.js");
-var _index9 = require("./components/PeriodDimension/utils/index.js");
+var _index11 = require("./components/PeriodDimension/utils/index.js");
 var _relativePeriods = require("./components/PeriodDimension/utils/relativePeriods.js");
 var _fixedPeriods = require("./components/PeriodDimension/utils/fixedPeriods.js");
 var _VisualizationOptions = _interopRequireDefault(require("./components/Options/VisualizationOptions.js"));

package/build/cjs/locales/en/translations.json

@@ -125,8 +125,9 @@
     "View replies": "View replies",
     "Unlike": "Unlike",
     "Like": "Like",
-    "Share": "Share",
     "See interpretation": "See interpretation",
+    "Open in app": "Open in app",
+    "Share": "Share",
     "Manage sharing": "Manage sharing",
     "Could not update interpretation": "Could not update interpretation",
     "Enter interpretation text": "Enter interpretation text",

package/build/cjs/visualizations/config/adapters/dhis_highcharts/subtitle/index.js

@@ -37,8 +37,9 @@ function _default(series, layout, metaData, dashboard) {
   }
 
   // DHIS2-578: allow for optional custom subtitle
-  if ((0, _isString.default)(layout.subtitle)) {
-    subtitle.text = layout.subtitle;
+  const customSubtitle = layout.subtitle && layout.displaySubtitle || layout.subtitle;
+  if ((0, _isString.default)(customSubtitle) && customSubtitle.length) {
+    subtitle.text = customSubtitle;
   } else {
     const filterTitle = (0, _getFilterText.default)(layout.filters, metaData);
     switch (layout.type) {

package/build/cjs/visualizations/config/adapters/dhis_highcharts/title/index.js

@@ -38,8 +38,9 @@ function _default(layout, metaData, dashboard) {
   if (layout.hideTitle) {
     return title;
   }
-  if ((0, _isString.default)(layout.title) && layout.title.length) {
-    title.text = layout.title;
+  const customTitle = layout.title && layout.displayTitle || layout.title;
+  if ((0, _isString.default)(customTitle) && customTitle.length) {
+    title.text = customTitle;
   } else {
     switch (layout.type) {
       case _visTypes.VIS_TYPE_GAUGE:

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,9 +14,11 @@ const InterpretationThread = _ref => {
     fetching,
     interpretation,
     onInterpretationDeleted,
+    onLikeToggled,
     initialFocus,
     onThreadUpdated,
-    downloadMenuComponent: DownloadMenu
+    downloadMenuComponent: DownloadMenu,
+    dashboardRedirectUrl
   } = _ref;
   const {
     fromServerDate
@@ -31,30 +33,33 @@ const InterpretationThread = _ref => {
   }, [initialFocus]);
   const interpretationAccess = getInterpretationAccess(interpretation, currentUser);
   return /*#__PURE__*/React.createElement("div", {
-    className: "jsx-1846557365" + " " + (cx('container', {
-      fetching
+    className: "jsx-3292109121" + " " + (cx('container', {
+      fetching,
+      dashboard: !!dashboardRedirectUrl
     }) || "")
   }, /*#__PURE__*/React.createElement("div", {
-    className: "jsx-1846557365" + " " + 'title'
+    className: "jsx-3292109121" + " " + 'title'
   }, /*#__PURE__*/React.createElement(IconClock16, {
     color: colors.grey700
   }), moment(fromServerDate(interpretation.created)).format('LLL')), DownloadMenu && /*#__PURE__*/React.createElement(DownloadMenu, {
     relativePeriodDate: interpretation.created,
-    className: "jsx-1846557365"
+    className: "jsx-3292109121"
   }), /*#__PURE__*/React.createElement("div", {
-    className: "jsx-1846557365" + " " + 'thread'
+    className: "jsx-3292109121" + " " + 'thread'
   }, /*#__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();
     } : null,
     onUpdated: () => onThreadUpdated(true),
     onDeleted: onInterpretationDeleted,
+    dashboardRedirectUrl: dashboardRedirectUrl,
     isInThread: true
   }), /*#__PURE__*/React.createElement("div", {
-    className: "jsx-1846557365" + " " + 'comments'
+    className: "jsx-3292109121" + " " + 'comments'
   }, interpretation.comments.map(comment => /*#__PURE__*/React.createElement(Comment, {
     key: comment.id,
     comment: comment,
@@ -68,14 +73,16 @@ const InterpretationThread = _ref => {
     onSave: () => onThreadUpdated(true),
     focusRef: focusRef
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1846557365"
-  }, [".thread.jsx-1846557365{margin-top:var(--spacers-dp16);overflow-y:auto;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;}", ".container.jsx-1846557365{position:relative;overflow:auto;max-height:calc(100vh - 285px);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".container.fetching.jsx-1846557365::before{content:'';position:absolute;inset:0px;background-color:rgba(255,255,255,0.8);}", ".container.fetching.jsx-1846557365::after{content:'';position:absolute;top:calc(50% - 12px);left:calc(50% - 12px);width:24px;height:24px;border-width:4px;border-style:solid;border-color:rgba(110,122,138,0.15) rgba(110,122,138,0.15) rgb(20,124,215);border-image:initial;border-radius:50%;-webkit-animation:1s linear 0s infinite normal none running rotation-jsx-1846557365;animation:1s linear 0s infinite normal none running rotation-jsx-1846557365;}", ".title.jsx-1846557365{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--spacers-dp8);color:var(--colors-grey900);font-size:14px;line-height:18px;}", ".comments.jsx-1846557365{padding-left:16px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding-top:var(--spacers-dp4);gap:var(--spacers-dp4);}", "@-webkit-keyframes rotation-jsx-1846557365{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes rotation-jsx-1846557365{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}"]));
+    id: "3292109121"
+  }, [".thread.jsx-3292109121{margin-top:var(--spacers-dp16);overflow-y:auto;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;}", ".dashboard.jsx-3292109121 .thread.jsx-3292109121{overflow-y:hidden;}", ".container.jsx-3292109121{position:relative;overflow:auto;max-height:calc(100vh - 285px);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".container.dashboard.jsx-3292109121{max-height:none;}", ".container.fetching.jsx-3292109121::before{content:'';position:absolute;inset:0px;background-color:rgba(255,255,255,0.8);}", ".container.fetching.jsx-3292109121::after{content:'';position:absolute;top:calc(50% - 12px);left:calc(50% - 12px);width:24px;height:24px;border-width:4px;border-style:solid;border-color:rgba(110,122,138,0.15) rgba(110,122,138,0.15) rgb(20,124,215);border-image:initial;border-radius:50%;-webkit-animation:1s linear 0s infinite normal none running rotation-jsx-3292109121;animation:1s linear 0s infinite normal none running rotation-jsx-3292109121;}", ".title.jsx-3292109121{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--spacers-dp8);color:var(--colors-grey900);font-size:14px;line-height:18px;}", ".comments.jsx-3292109121{padding-left:16px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding-top:var(--spacers-dp4);gap:var(--spacers-dp4);}", "@-webkit-keyframes rotation-jsx-3292109121{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes rotation-jsx-3292109121{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}"]));
 };
 InterpretationThread.propTypes = {
   currentUser: PropTypes.object.isRequired,
   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,
   onThreadUpdated: PropTypes.func

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

@@ -1 +1,2 @@
-export { InterpretationModal } from './InterpretationModal.js';
+export { InterpretationModal } from './InterpretationModal.js';
+export { InterpretationThread } from './InterpretationThread.js';

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

@@ -21,9 +21,11 @@ export const InterpretationList = _ref => {
     currentUser,
     interpretations,
     onInterpretationClick,
+    onLikeToggled,
     onReplyIconClick,
     refresh,
-    disabled
+    disabled,
+    dashboardRedirectUrl
   } = _ref;
   const {
     fromServerDate
@@ -57,10 +59,12 @@ export const InterpretationList = _ref => {
     interpretation: interpretation,
     currentUser: currentUser,
     onClick: onInterpretationClick,
+    onLikeToggled: onLikeToggled,
     onReplyIconClick: onReplyIconClick,
     onDeleted: refresh,
     onUpdated: refresh,
-    disabled: disabled
+    disabled: disabled,
+    dashboardRedirectUrl: dashboardRedirectUrl
   }))))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "4058400613",
     dynamic: [spacers.dp8, spacers.dp8, spacers.dp16, colors.grey800, spacers.dp12, spacers.dp12, spacers.dp32, spacers.dp4]
@@ -71,6 +75,8 @@ 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

@@ -31,17 +31,19 @@ export const InterpretationsUnit = /*#__PURE__*/forwardRef((_ref2, ref) => {
     onInterpretationClick,
     onReplyIconClick,
     disabled,
-    renderId
+    renderId,
+    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({
@@ -60,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
@@ -81,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,
@@ -90,11 +101,13 @@ 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
+    disabled: disabled,
+    dashboardRedirectUrl: dashboardRedirectUrl
   }))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "4120713286",
     dynamic: [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]
@@ -109,6 +122,7 @@ InterpretationsUnit.propTypes = {
   currentUser: PropTypes.object.isRequired,
   id: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
+  dashboardRedirectUrl: PropTypes.string,
   disabled: PropTypes.bool,
   renderId: PropTypes.number,
   visualizationHasTimeDimension: PropTypes.bool,

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

@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n';
-import { Button, SharingDialog, IconReply16, IconShare16, IconThumbUp16, IconEdit16 } from '@dhis2/ui';
+import { Button, SharingDialog, IconReply16, IconShare16, IconThumbUp16, IconEdit16, IconLaunch16, IconView16 } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { Message, MessageStatsBar, MessageIconButton, getInterpretationAccess } from '../index.js';
@@ -15,7 +15,9 @@ export const Interpretation = _ref => {
     onDeleted,
     disabled,
     onReplyIconClick,
-    isInThread
+    dashboardRedirectUrl,
+    isInThread,
+    onLikeToggled
   } = _ref;
   const [isUpdateMode, setIsUpdateMode] = useState(false);
   const [showSharingDialog, setShowSharingDialog] = useState(false);
@@ -26,9 +28,12 @@ export const Interpretation = _ref => {
   } = useLike({
     interpretation,
     currentUser,
-    onComplete: onUpdated
+    onComplete: likedBy => onLikeToggled({
+      id: interpretation.id,
+      likedBy
+    })
   });
-  const shouldShowButton = !!onClick && !disabled;
+  const shouldShowButton = Boolean(!!onClick && !disabled & !dashboardRedirectUrl);
   const interpretationAccess = getInterpretationAccess(interpretation, currentUser);
   let tooltip = i18n.t('Reply');
   if (!interpretationAccess.comment) {
@@ -42,6 +47,9 @@ export const Interpretation = _ref => {
       tooltip = i18n.t('View replies');
     }
   }
+
+  // Maps still uses old url style /?id= instead of hash
+  const getAppInterpretationUrl = () => dashboardRedirectUrl.includes('?') ? `${dashboardRedirectUrl}&interpretationId=${interpretation.id}` : `${dashboardRedirectUrl}?interpretationId=${interpretation.id}`;
   return isUpdateMode ? /*#__PURE__*/React.createElement(InterpretationUpdateForm, {
     close: () => setIsUpdateMode(false),
     id: interpretation.id,
@@ -68,6 +76,16 @@ export const Interpretation = _ref => {
     count: interpretation.comments.length,
     dataTest: "interpretation-reply-button",
     viewOnly: isInThread && !interpretationAccess.comment
+  }), dashboardRedirectUrl && !isInThread && /*#__PURE__*/React.createElement(MessageIconButton, {
+    tooltipContent: i18n.t('See interpretation'),
+    iconComponent: IconView16,
+    onClick: () => onClick(interpretation.id),
+    dataTest: "interpretation-view-button"
+  }), dashboardRedirectUrl && /*#__PURE__*/React.createElement(MessageIconButton, {
+    tooltipContent: i18n.t('Open in app'),
+    iconComponent: IconLaunch16,
+    onClick: () => window.open(getAppInterpretationUrl(), '_blank'),
+    dataTest: "interpretation-launch-in-app-button"
   }), interpretationAccess.share && /*#__PURE__*/React.createElement(MessageIconButton, {
     iconComponent: IconShare16,
     tooltipContent: i18n.t('Share'),
@@ -99,8 +117,10 @@ Interpretation.propTypes = {
   currentUser: PropTypes.object.isRequired,
   interpretation: PropTypes.object.isRequired,
   onDeleted: PropTypes.func.isRequired,
+  onLikeToggled: PropTypes.func.isRequired,
   onReplyIconClick: PropTypes.func.isRequired,
   onUpdated: PropTypes.func.isRequired,
+  dashboardRedirectUrl: PropTypes.string,
   disabled: PropTypes.bool,
   isInThread: PropTypes.bool,
   onClick: PropTypes.func

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

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

package/build/es/index.js

@@ -16,8 +16,8 @@ export { preparePayloadForSaveAs } from './components/FileMenu/utils.js';
 export { default as VisTypeIcon } from './components/VisTypeIcon.js';
 export { default as LegendKey } from './components/LegendKey/LegendKey.js';
 export { default as AboutAOUnit } from './components/AboutAOUnit/AboutAOUnit.js';
-export { InterpretationsUnit } from './components/Interpretations/InterpretationsUnit/InterpretationsUnit.js';
-export { InterpretationModal } from './components/Interpretations/InterpretationModal/InterpretationModal.js';
+export { InterpretationsUnit } from './components/Interpretations/InterpretationsUnit/index.js';
+export { InterpretationModal, InterpretationThread } from './components/Interpretations/InterpretationModal/index.js';
 export * from './components/Toolbar/index.js';
 export { TranslationDialog } from './components/TranslationDialog/index.js';
 export { OfflineTooltip } from './components/OfflineTooltip.js';

package/build/es/locales/en/translations.json

@@ -125,8 +125,9 @@
     "View replies": "View replies",
     "Unlike": "Unlike",
     "Like": "Like",
-    "Share": "Share",
     "See interpretation": "See interpretation",
+    "Open in app": "Open in app",
+    "Share": "Share",
     "Manage sharing": "Manage sharing",
     "Could not update interpretation": "Could not update interpretation",
     "Enter interpretation text": "Enter interpretation text",

package/build/es/visualizations/config/adapters/dhis_highcharts/subtitle/index.js

@@ -30,8 +30,9 @@ export default function (series, layout, metaData, dashboard) {
   }
 
   // DHIS2-578: allow for optional custom subtitle
-  if (isString(layout.subtitle)) {
-    subtitle.text = layout.subtitle;
+  const customSubtitle = layout.subtitle && layout.displaySubtitle || layout.subtitle;
+  if (isString(customSubtitle) && customSubtitle.length) {
+    subtitle.text = customSubtitle;
   } else {
     const filterTitle = getFilterText(layout.filters, metaData);
     switch (layout.type) {

package/build/es/visualizations/config/adapters/dhis_highcharts/title/index.js

@@ -31,8 +31,9 @@ export default function (layout, metaData, dashboard) {
   if (layout.hideTitle) {
     return title;
   }
-  if (isString(layout.title) && layout.title.length) {
-    title.text = layout.title;
+  const customTitle = layout.title && layout.displayTitle || layout.title;
+  if (isString(customTitle) && customTitle.length) {
+    title.text = customTitle;
   } else {
     switch (layout.type) {
       case VIS_TYPE_GAUGE:

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "26.3.1",
+    "version": "26.4.1",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {