@dhis2/analytics 28.1.2 → 29.0.0

package/build/cjs/__demo__/InterpretationsUnit.stories.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.WithNoTimeDimensionsWarning = exports.Default = void 0;
 var _appRuntime = require("@dhis2/app-runtime");
 var _react = _interopRequireDefault(require("react"));
+var _InterpretationsProvider = require("../components/Interpretations/InterpretationsProvider/InterpretationsProvider.js");
 var _index = require("../components/Interpretations/InterpretationsUnit/index.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var _default = exports.default = {
@@ -18,15 +19,16 @@ const Default = () => {
         interpretations: []
       }
     }
-  }, /*#__PURE__*/_react.default.createElement(_index.InterpretationsUnit, {
+  }, /*#__PURE__*/_react.default.createElement(_InterpretationsProvider.InterpretationsProvider, {
     currentUser: {
       name: 'Tom Wakiki'
-    },
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.InterpretationsUnit, {
     id: "abcd",
     onReplyIconClick: Function.prototype,
     type: "eventVisualization",
     visualizationHasTimeDimension: true
-  }));
+  })));
 };
 exports.Default = Default;
 const WithNoTimeDimensionsWarning = () => {
@@ -36,15 +38,16 @@ const WithNoTimeDimensionsWarning = () => {
         interpretations: []
       }
     }
-  }, /*#__PURE__*/_react.default.createElement(_index.InterpretationsUnit, {
+  }, /*#__PURE__*/_react.default.createElement(_InterpretationsProvider.InterpretationsProvider, {
     currentUser: {
       name: 'Tom Wakiki'
-    },
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.InterpretationsUnit, {
     id: "abcd",
     onReplyIconClick: Function.prototype,
     type: "eventVisualization",
     visualizationHasTimeDimension: false
-  }));
+  })));
 };
 exports.WithNoTimeDimensionsWarning = WithNoTimeDimensionsWarning;
 WithNoTimeDimensionsWarning.story = {

package/build/cjs/__fixtures__/interpretationsMockData.js

@@ -0,0 +1,204 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.visualization = exports.newInterpretation = exports.newComment = exports.interpretations = exports.interpretationDetails = exports.currentUser = void 0;
+const currentUser = exports.currentUser = {
+  id: 'currentuserid',
+  name: 'John Traore',
+  email: 'dummy@dhis2.org',
+  settings: {
+    keyDbLocale: 'en',
+    keyMessageSmsNotification: false,
+    keyTrackerDashboardLayout: '',
+    keyCurrentStyle: 'light_blue/light_blue.css',
+    keyStyle: 'light_blue/light_blue.css',
+    keyUiLocale: 'en',
+    keyAnalysisDisplayProperty: 'name',
+    keyMessageEmailNotification: false
+  },
+  authorities: ['F_VIEW_UNAPPROVED_DATA']
+};
+const interpretations = exports.interpretations = [{
+  id: 'interpretation1',
+  text: 'This is the first interpretation',
+  created: '2025-09-04T07:47:12.477',
+  createdBy: {
+    id: 'currentuserid',
+    code: null,
+    name: 'John Traore',
+    displayName: 'John Traore',
+    username: 'admin'
+  },
+  comments: [{
+    id: 'commentid1'
+  }, {
+    id: 'commentid2'
+  }],
+  likes: 1,
+  access: {
+    manage: true,
+    write: true
+  },
+  likedBy: [{
+    id: 'currentuserid',
+    code: null,
+    name: 'John Traore',
+    displayName: 'John Traore',
+    username: 'admin'
+  }]
+}, {
+  id: 'interpretation2',
+  text: 'Analysis shows interesting trends in the data distribution across different regions',
+  created: '2025-09-03T14:22:35.891',
+  createdBy: {
+    id: 'otheruserid1',
+    code: null,
+    name: 'Sarah Johnson',
+    displayName: 'Sarah Johnson',
+    username: 'sjohnson'
+  },
+  comments: [{
+    id: 'commentid3'
+  }],
+  likes: 3,
+  access: {
+    manage: false,
+    write: false
+  },
+  likedBy: [{
+    id: 'currentuserid',
+    code: null,
+    name: 'John Traore',
+    displayName: 'John Traore',
+    username: 'admin'
+  }, {
+    id: 'otheruserid1',
+    code: null,
+    name: 'Sarah Johnson',
+    displayName: 'Sarah Johnson',
+    username: 'sjohnson'
+  }, {
+    id: 'otheruserid2',
+    code: null,
+    name: 'Mike Chen',
+    displayName: 'Mike Chen',
+    username: 'mchen'
+  }]
+}, {
+  id: 'interpretation3',
+  text: 'The quarterly report reveals significant improvements in performance metrics',
+  created: '2025-09-02T10:15:48.123',
+  createdBy: {
+    id: 'currentuserid',
+    code: null,
+    name: 'John Traore',
+    displayName: 'John Traore',
+    username: 'admin'
+  },
+  comments: [],
+  likes: 0,
+  access: {
+    manage: true,
+    write: true
+  },
+  likedBy: []
+}, {
+  id: 'interpretation4',
+  text: 'We need to investigate the outliers in this dataset more thoroughly',
+  created: '2025-09-01T16:33:21.654',
+  createdBy: {
+    id: 'otheruserid2',
+    code: null,
+    name: 'Mike Chen',
+    displayName: 'Mike Chen',
+    username: 'mchen'
+  },
+  comments: [{
+    id: 'commentid4'
+  }, {
+    id: 'commentid5'
+  }, {
+    id: 'commentid6'
+  }],
+  likes: 2,
+  access: {
+    manage: false,
+    write: true
+  },
+  likedBy: [{
+    id: 'otheruserid1',
+    code: null,
+    name: 'Sarah Johnson',
+    displayName: 'Sarah Johnson',
+    username: 'sjohnson'
+  }, {
+    id: 'otheruserid2',
+    code: null,
+    name: 'Mike Chen',
+    displayName: 'Mike Chen',
+    username: 'mchen'
+  }]
+}];
+const interpretationDetails = exports.interpretationDetails = {
+  ...interpretations[0],
+  comments: [{
+    created: '2025-09-04T07:47:39.167',
+    createdBy: {
+      id: 'currentuserid',
+      code: null,
+      name: 'John Traore',
+      displayName: 'John Traore',
+      username: 'admin'
+    },
+    text: 'This is the first comment',
+    id: 'commentid1'
+  }, {
+    created: '2025-09-04T07:47:42.011',
+    createdBy: {
+      id: 'currentuserid',
+      code: null,
+      name: 'John Traore',
+      displayName: 'John Traore',
+      username: 'admin'
+    },
+    text: 'This is the second comment',
+    id: 'commentid2'
+  }]
+};
+const newInterpretation = exports.newInterpretation = {
+  id: 'interpretation5',
+  text: 'This is a new interpretation for testing',
+  created: '2025-09-04T08:30:15.123',
+  createdBy: {
+    id: 'currentuserid',
+    code: null,
+    name: 'John Traore',
+    displayName: 'John Traore',
+    username: 'admin'
+  },
+  comments: [],
+  likes: 0,
+  access: {
+    manage: true,
+    write: true
+  },
+  likedBy: []
+};
+const newComment = exports.newComment = {
+  created: '2025-09-04T08:45:22.456',
+  createdBy: {
+    id: 'currentuserid',
+    code: null,
+    name: 'John Traore',
+    displayName: 'John Traore',
+    username: 'admin'
+  },
+  text: 'This is a new comment for testing',
+  id: 'commentid7'
+};
+const visualization = exports.visualization = {
+  id: 'viz123',
+  type: 'CHART'
+};

package/build/cjs/components/Interpretations/DashboardItemInterpretations/DashboardInterpretationThread.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DashboardInterpretationThread = void 0;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+var _ui = require("@dhis2/ui");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _InterpretationThread = require("../InterpretationModal/InterpretationThread.js");
+var _hooks = require("../InterpretationsProvider/hooks.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DashboardInterpretationThread = ({
+  interpretationId,
+  onClose,
+  dashboardRedirectUrl,
+  initialFocus
+}) => {
+  const {
+    data: interpretation,
+    loading,
+    error
+  } = (0, _hooks.useActiveInterpretation)(interpretationId);
+  if (loading) {
+    return /*#__PURE__*/_react.default.createElement(_ui.Layer, null, /*#__PURE__*/_react.default.createElement(_ui.CenteredContent, null, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, null)));
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-95761030" + " " + "container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-95761030" + " " + "button-container"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    small: true,
+    icon: /*#__PURE__*/_react.default.createElement(_ui.IconChevronLeft16, null),
+    onClick: onClose
+  }, _d2I18n.default.t('Back to all interpretations'))), error && /*#__PURE__*/_react.default.createElement(_ui.NoticeBox, {
+    error: true,
+    title: _d2I18n.default.t('Could not load interpretation details')
+  }, _d2I18n.default.t('The request to fetch interpretation comments failed')), interpretation && !error && /*#__PURE__*/_react.default.createElement(_InterpretationThread.InterpretationThread, {
+    loading: loading,
+    interpretation: interpretation,
+    onInterpretationDeleted: onClose,
+    initialFocus: initialFocus,
+    dashboardRedirectUrl: dashboardRedirectUrl
+  }), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "95761030"
+  }, [".container.jsx-95761030{padding:var(--spacers-dp16) var(--spacers-dp16) var(--spacers-dp32) var(--spacers-dp16);}", ".button-container.jsx-95761030{margin-bottom:var(--spacers-dp8);}"]));
+};
+exports.DashboardInterpretationThread = DashboardInterpretationThread;
+DashboardInterpretationThread.propTypes = {
+  interpretationId: _propTypes.default.string.isRequired,
+  onClose: _propTypes.default.func.isRequired,
+  dashboardRedirectUrl: _propTypes.default.string,
+  initialFocus: _propTypes.default.bool
+};

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

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DashboardItemInterpretations = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _InterpretationsProvider = require("../InterpretationsProvider/InterpretationsProvider.js");
+var _InterpretationsUnit = require("../InterpretationsUnit/InterpretationsUnit.js");
+var _DashboardInterpretationThread = require("./DashboardInterpretationThread.js");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DashboardItemInterpretations = ({
+  currentUser,
+  dashboardRedirectUrl,
+  id,
+  type
+}) => {
+  const [activeInterpretationId, setActiveInterpretationId] = (0, _react.useState)(null);
+  const [initialFocus, setInitialFocus] = (0, _react.useState)(false);
+  const onInterpretationClick = (0, _react.useCallback)(interpretationId => {
+    setActiveInterpretationId(interpretationId);
+  }, []);
+  const onReplyIconClick = (0, _react.useCallback)(interpretationId => {
+    setActiveInterpretationId(interpretationId);
+    setInitialFocus(true);
+  }, []);
+  const onClose = (0, _react.useCallback)(() => {
+    setActiveInterpretationId(null);
+    setInitialFocus(false);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_InterpretationsProvider.InterpretationsProvider, {
+    currentUser: currentUser
+  }, activeInterpretationId ? /*#__PURE__*/_react.default.createElement(_DashboardInterpretationThread.DashboardInterpretationThread, {
+    interpretationId: activeInterpretationId,
+    onClose: onClose,
+    dashboardRedirectUrl: dashboardRedirectUrl,
+    initialFocus: initialFocus
+  }) : /*#__PURE__*/_react.default.createElement(_InterpretationsUnit.InterpretationsUnit, {
+    id: id,
+    type: type,
+    dashboardRedirectUrl: dashboardRedirectUrl,
+    onInterpretationClick: onInterpretationClick,
+    onReplyIconClick: onReplyIconClick
+  }));
+};
+exports.DashboardItemInterpretations = DashboardItemInterpretations;
+DashboardItemInterpretations.propTypes = {
+  currentUser: _propTypes.default.object.isRequired,
+  dashboardRedirectUrl: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string.isRequired,
+  type: _propTypes.default.string.isRequired
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DashboardItemInterpretations", {
+  enumerable: true,
+  get: function () {
+    return _DashboardItemInterpretations.DashboardItemInterpretations;
+  }
+});
+var _DashboardItemInterpretations = require("./DashboardItemInterpretations.js");

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

@@ -9,28 +9,28 @@ var _ui = require("@dhis2/ui");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _index = require("../common/index.js");
+var _hooks = require("../InterpretationsProvider/hooks.js");
 var _CommentDeleteButton = require("./CommentDeleteButton.js");
 var _CommentUpdateForm = require("./CommentUpdateForm.js");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Comment = ({
   comment,
-  currentUser,
-  interpretationId,
-  onThreadUpdated,
   canComment
 }) => {
   const [isUpdateMode, setIsUpdateMode] = (0, _react.useState)(false);
-  const commentAccess = (0, _index.getCommentAccess)(comment, canComment, currentUser);
+  const [commentText, setCommentText] = (0, _react.useState)(comment.text);
+  const onUpdateComplete = (0, _react.useCallback)(newText => {
+    setCommentText(newText);
+    setIsUpdateMode(false);
+  }, []);
+  const commentAccess = (0, _hooks.useCommentAccess)(comment, canComment);
   return isUpdateMode ? /*#__PURE__*/_react.default.createElement(_CommentUpdateForm.CommentUpdateForm, {
-    close: () => setIsUpdateMode(false),
-    commentId: comment.id,
-    interpretationId: interpretationId,
-    onComplete: () => onThreadUpdated(false),
-    text: comment.text,
-    currentUser: currentUser
+    onComplete: onUpdateComplete,
+    id: comment.id,
+    text: comment.text
   }) : /*#__PURE__*/_react.default.createElement(_index.Message, {
-    text: comment.text,
+    text: commentText,
     created: comment.created,
     username: comment.createdBy.displayName
   }, commentAccess.edit && /*#__PURE__*/_react.default.createElement(_index.MessageStatsBar, null, /*#__PURE__*/_react.default.createElement(_index.MessageIconButton, {
@@ -38,16 +38,11 @@ const Comment = ({
     tooltipContent: _d2I18n.default.t('Edit'),
     onClick: () => setIsUpdateMode(true)
   }), commentAccess.delete && /*#__PURE__*/_react.default.createElement(_CommentDeleteButton.CommentDeleteButton, {
-    commentId: comment.id,
-    interpretationId: interpretationId,
-    onComplete: () => onThreadUpdated(true)
+    id: comment.id
   })));
 };
 exports.Comment = Comment;
 Comment.propTypes = {
   comment: _propTypes.default.object.isRequired,
-  currentUser: _propTypes.default.object.isRequired,
-  interpretationId: _propTypes.default.string.isRequired,
-  onThreadUpdated: _propTypes.default.func.isRequired,
   canComment: _propTypes.default.bool
 };

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

@@ -4,63 +4,52 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CommentAddForm = void 0;
-var _appRuntime = require("@dhis2/app-runtime");
 var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
 var _ui = require("@dhis2/ui");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _index = require("../../RichText/index.js");
 var _index2 = require("../common/index.js");
+var _hooks = require("../InterpretationsProvider/hooks.js");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const CommentAddForm = ({
-  interpretationId,
-  currentUser,
-  onSave,
   focusRef
 }) => {
+  const currentUser = (0, _hooks.useInterpretationsCurrentUser)();
   const [showRichTextEditor, setShowRichTextEditor] = (0, _react.useState)(false);
-  const [commentText, setCommentText] = (0, _react.useState)('');
-  const saveMutationRef = (0, _react.useRef)({
-    resource: `interpretations/${interpretationId}/comments`,
-    type: 'create',
-    data: ({
-      commentText
-    }) => commentText
-  });
+  const [text, setText] = (0, _react.useState)('');
+  const closeForm = (0, _react.useCallback)(() => {
+    setShowRichTextEditor(false);
+    setText('');
+  }, []);
   const [save, {
-    loading
-  }] = (0, _appRuntime.useDataMutation)(saveMutationRef.current, {
-    onComplete: () => {
-      setShowRichTextEditor(false);
-      setCommentText('');
-      onSave();
-    }
+    loading,
+    error
+  }] = (0, _hooks.useAddCommentToActiveInterpretation)({
+    text,
+    onComplete: closeForm
   });
   const inputPlaceholder = _d2I18n.default.t('Write a reply');
   return /*#__PURE__*/_react.default.createElement(_index2.MessageEditorContainer, {
-    currentUser: currentUser
+    currentUserName: currentUser.name
   }, showRichTextEditor ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.RichTextEditor, {
     inputPlaceholder: inputPlaceholder,
-    onChange: setCommentText,
-    value: commentText,
+    onChange: setText,
+    value: text,
     ref: focusRef,
-    disabled: loading
+    disabled: loading,
+    errorText: error ? _d2I18n.default.t('Could not post reply') : ''
   }), /*#__PURE__*/_react.default.createElement(_index2.MessageButtonStrip, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
     primary: true,
     small: true,
-    onClick: () => save({
-      commentText
-    }),
+    onClick: save,
     loading: loading
   }, _d2I18n.default.t('Post reply')), /*#__PURE__*/_react.default.createElement(_ui.Button, {
     secondary: true,
     small: true,
     disabled: loading,
-    onClick: () => {
-      setCommentText('');
-      setShowRichTextEditor(false);
-    }
+    onClick: closeForm
   }, _d2I18n.default.t('Cancel')))) : /*#__PURE__*/_react.default.createElement(_index2.MessageInput, {
     onFocus: () => setShowRichTextEditor(true),
     placeholder: inputPlaceholder,
@@ -69,8 +58,5 @@ const CommentAddForm = ({
 };
 exports.CommentAddForm = CommentAddForm;
 CommentAddForm.propTypes = {
-  currentUser: _propTypes.default.object.isRequired,
-  focusRef: _propTypes.default.object.isRequired,
-  interpretationId: _propTypes.default.string.isRequired,
-  onSave: _propTypes.default.func
+  focusRef: _propTypes.default.object.isRequired
 };

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

@@ -5,62 +5,37 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CommentDeleteButton = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-var _appRuntime = require("@dhis2/app-runtime");
 var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
 var _ui = require("@dhis2/ui");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _index = require("../common/index.js");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+var _hooks = require("../InterpretationsProvider/hooks.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const mutation = {
-  resource: 'interpretations',
-  id: ({
-    interpretationId,
-    commentId
-  }) => `${interpretationId}/comments/${commentId}`,
-  type: 'delete'
-};
 const CommentDeleteButton = ({
-  commentId,
-  interpretationId,
-  onComplete
+  id
 }) => {
-  const [deleteError, setDeleteError] = (0, _react.useState)(null);
   const [remove, {
-    loading
-  }] = (0, _appRuntime.useDataMutation)(mutation, {
-    onComplete: () => {
-      setDeleteError(null);
-      onComplete();
-    },
-    onError: () => setDeleteError(_d2I18n.default.t('Delete failed')),
-    variables: {
-      commentId,
-      interpretationId
-    }
+    loading,
+    error
+  }] = (0, _hooks.useDeleteCommentFromActiveInterpretation)({
+    id
   });
-  const onDelete = () => {
-    setDeleteError(null);
-    remove();
-  };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.dynamic([["945681082", [_ui.colors.red500]]]) + " " + "delete-button-container"
   }, /*#__PURE__*/_react.default.createElement(_index.MessageIconButton, {
     tooltipContent: _d2I18n.default.t('Delete'),
     iconComponent: _ui.IconDelete16,
-    onClick: onDelete,
+    onClick: remove,
     disabled: loading
-  }), deleteError && /*#__PURE__*/_react.default.createElement("span", {
+  }), error && /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.dynamic([["945681082", [_ui.colors.red500]]]) + " " + "delete-error"
-  }, deleteError), /*#__PURE__*/_react.default.createElement(_style.default, {
+  }, _d2I18n.default.t('Could not delete comment')), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "945681082",
     dynamic: [_ui.colors.red500]
   }, [".delete-button-container.__jsx-style-dynamic-selector{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:4px;}", `.delete-error.__jsx-style-dynamic-selector{color:${_ui.colors.red500};font-size:12px;line-height:12px;}`]));
 };
 exports.CommentDeleteButton = CommentDeleteButton;
 CommentDeleteButton.propTypes = {
-  commentId: _propTypes.default.string.isRequired,
-  interpretationId: _propTypes.default.string.isRequired,
-  onComplete: _propTypes.default.func.isRequired
+  id: _propTypes.default.string.isRequired
 };