@dhis2/analytics 28.1.2 → 29.0.0

package/build/es/components/Interpretations/InterpretationsProvider/hooks.js

@@ -0,0 +1,258 @@
+import { useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { getCommentAccess, getInterpretationAccess } from '../common/getInterpretationAccess.js';
+import { InterpretationsContext } from './InterpretationsProvider.js';
+const SET_LOADING = 'SET_LOADING';
+const SET_ERROR = 'SET_ERROR';
+const SET_DATA = 'SET_DATA';
+const RESET = 'RESET';
+const initialLoadingState = {
+  loading: false,
+  error: undefined,
+  data: undefined
+};
+function loadingReducer(state, action) {
+  switch (action.type) {
+    case SET_LOADING:
+      return {
+        ...state,
+        loading: true
+      };
+    case SET_ERROR:
+      return {
+        ...state,
+        error: action.payload,
+        loading: false
+      };
+    case SET_DATA:
+      return {
+        data: action.payload,
+        error: undefined,
+        loading: false
+      };
+    case RESET:
+      return {
+        ...initialLoadingState
+      };
+    default:
+      return state;
+  }
+}
+export const useInterpretationsManager = () => {
+  const interpretationsManager = useContext(InterpretationsContext);
+  if (!interpretationsManager) {
+    throw new Error('Called useInterpretationsManager() from outside an InterpretationsProvider');
+  }
+  return interpretationsManager;
+};
+export const useInterpretationsCurrentUser = () => {
+  const interpretationsManager = useInterpretationsManager();
+  return interpretationsManager.getCurrentUser();
+};
+export const useInterpretationsList = (type, id) => {
+  const prevTypeRef = useRef(null);
+  const prevIdRef = useRef(null);
+  const interpretationsManager = useInterpretationsManager();
+  const [state, dispatch] = useReducer(loadingReducer, initialLoadingState);
+  const fetchList = useCallback(async () => {
+    dispatch({
+      type: SET_LOADING
+    });
+    try {
+      const data = await interpretationsManager.loadInterpretationsForVisualization(type, id);
+      dispatch({
+        type: SET_DATA,
+        payload: data
+      });
+    } catch (error) {
+      console.error(error);
+      dispatch({
+        type: SET_ERROR,
+        payload: error
+      });
+    }
+  }, [interpretationsManager, type, id, dispatch]);
+
+  // Ensure manager updates get propagated to the state
+  useEffect(() => {
+    const unsubscribe = interpretationsManager.subscribeToInterpretationsListUpdates(interpretationIdsByDate => {
+      dispatch({
+        type: SET_DATA,
+        payload: interpretationIdsByDate
+      });
+    });
+    return unsubscribe;
+  }, [interpretationsManager]);
+
+  // Fetch when mounting or after a reset
+  useEffect(() => {
+    if (type && id && !state.loading && !state.data && !state.error) {
+      fetchList();
+    }
+  }, [fetchList, state, type, id]);
+
+  // Handle active item changes and clearance
+  useEffect(() => {
+    const prevType = prevTypeRef.current;
+    const prevId = prevIdRef.current;
+    const isTypeChange = prevType && type && prevType !== type;
+    const isIdChange = prevId && id && prevId !== id;
+    const isTypeClearance = prevType && !type;
+    const isIdClearance = prevId && !id;
+    if (isTypeChange || isIdChange || isTypeClearance || isIdClearance) {
+      dispatch({
+        type: RESET
+      });
+    }
+    if (isTypeClearance || isIdClearance) {
+      interpretationsManager.clearInterpretations();
+    }
+    prevTypeRef.current = type;
+    prevIdRef.current = id;
+  }, [interpretationsManager, type, id]);
+  return state;
+};
+export const useActiveInterpretation = id => {
+  const prevIdRef = useRef(null);
+  const interpretationsManager = useInterpretationsManager();
+  const [state, dispatch] = useReducer(loadingReducer, initialLoadingState);
+  const fetchInterpretation = useCallback(async () => {
+    dispatch({
+      type: SET_LOADING
+    });
+    try {
+      const data = await interpretationsManager.loadActiveInterpretation(id);
+      dispatch({
+        type: SET_DATA,
+        payload: data
+      });
+    } catch (error) {
+      console.error(error);
+      dispatch({
+        type: SET_ERROR,
+        payload: error
+      });
+    }
+  }, [interpretationsManager, id, dispatch]);
+
+  // Ensure manager updates get propagated to the state
+  useEffect(() => {
+    const unsubscribe = interpretationsManager.subscribeToInterpretationUpdates(id, interpretation => {
+      dispatch({
+        type: SET_DATA,
+        payload: interpretation
+      });
+    });
+    return unsubscribe;
+  }, [interpretationsManager, id]);
+
+  // Fetch when mounting or after a reset
+  useEffect(() => {
+    if (id && !state.loading && !state.data && !state.error) {
+      fetchInterpretation();
+    }
+  }, [fetchInterpretation, state, id]);
+
+  // Handle active item changes and clearance
+  useEffect(() => {
+    const prevId = prevIdRef.current;
+    const isIdChange = prevId && id && prevId !== id;
+    const isIdClearance = prevId && !id;
+    if (isIdChange || isIdClearance) {
+      dispatch({
+        type: RESET
+      });
+    }
+    if (isIdClearance) {
+      interpretationsManager.clearActiveInterpretation();
+    }
+    prevIdRef.current = id;
+  }, [id, interpretationsManager]);
+  return state;
+};
+export const useInterpretation = id => {
+  const interpretationsManager = useInterpretationsManager();
+  const [interpretation, setInterpretation] = useState(interpretationsManager.getInterpretation(id));
+  useEffect(() => {
+    const unsubscribe = interpretationsManager.subscribeToInterpretationUpdates(id, newInterpretation => {
+      setInterpretation(newInterpretation);
+    });
+    return unsubscribe;
+  }, [interpretationsManager, id]);
+  return interpretation;
+};
+export const useLike = id => {
+  const interpretationsManager = useInterpretationsManager();
+  const [{
+    loading: toggleLikeInProgress,
+    data: interpretation
+  }, dispatch] = useReducer(loadingReducer, {
+    ...initialLoadingState,
+    data: interpretationsManager.getInterpretation(id)
+  });
+  const toggleLike = useCallback(async () => {
+    dispatch({
+      type: SET_LOADING
+    });
+    try {
+      const data = await interpretationsManager.toggleInterpretationLike(id);
+      dispatch({
+        type: SET_DATA,
+        payload: data
+      });
+    } catch (error) {
+      console.error(error);
+      dispatch({
+        type: SET_ERROR,
+        payload: error
+      });
+    }
+  }, [id, interpretationsManager]);
+  const isLikedByCurrentUser = useMemo(() => {
+    const currentUser = interpretationsManager.getCurrentUser();
+    return interpretation.likedBy.some(likedBy => likedBy.id === currentUser.id);
+  }, [interpretation, interpretationsManager]);
+  return {
+    isLikedByCurrentUser,
+    toggleLike,
+    toggleLikeInProgress
+  };
+};
+export const useInterpretationAccess = interpretation => {
+  const currentUser = useInterpretationsCurrentUser();
+  const access = useMemo(() => getInterpretationAccess(interpretation, currentUser), [interpretation, currentUser]);
+  return access;
+};
+export const useCommentAccess = (comment, canComment) => {
+  const currentUser = useInterpretationsCurrentUser();
+  const access = useMemo(() => getCommentAccess(comment, canComment, currentUser), [comment, canComment, currentUser]);
+  return access;
+};
+const useInterpretationsManagerMutation = (methodName, options = {}) => {
+  const interpretationsManager = useInterpretationsManager();
+  const [state, dispatch] = useReducer(loadingReducer, initialLoadingState);
+  const doAsyncCallback = useCallback(async () => {
+    dispatch({
+      type: SET_LOADING
+    });
+    try {
+      const data = await interpretationsManager[methodName](options);
+      dispatch({
+        type: SET_DATA,
+        payload: data
+      });
+    } catch (error) {
+      console.error(error);
+      dispatch({
+        type: SET_ERROR,
+        payload: error
+      });
+    }
+  }, [interpretationsManager, methodName, options]);
+  return [doAsyncCallback, state];
+};
+export const useCreateInterpretation = options => useInterpretationsManagerMutation('createInterpretation', options);
+export const useUpdateInterpretationText = options => useInterpretationsManagerMutation('updateInterpretationText', options);
+export const useDeleteInterpretation = options => useInterpretationsManagerMutation('deleteInterpretation', options);
+export const useAddCommentToActiveInterpretation = options => useInterpretationsManagerMutation('addCommentToActiveInterpretation', options);
+export const useUpdateCommentForActiveInterpretation = options => useInterpretationsManagerMutation('updateCommentForActiveInterpretation', options);
+export const useDeleteCommentFromActiveInterpretation = options => useInterpretationsManagerMutation('deleteCommentFromActiveInterpretation', options);

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

@@ -0,0 +1 @@
+export { InterpretationsProvider } from './InterpretationsProvider.js';

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

@@ -1,59 +1,56 @@
-import { useDataMutation } from '@dhis2/app-runtime';
 import i18n from '@dhis2/d2-i18n';
 import { Button, Input } from '@dhis2/ui';
 import PropTypes from 'prop-types';
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { RichTextEditor } from '../../RichText/index.js';
 import { MessageEditorContainer, MessageButtonStrip } from '../common/index.js';
+import { useCreateInterpretation, useInterpretationsCurrentUser } from '../InterpretationsProvider/hooks.js';
 export const InterpretationForm = ({
   type,
   id,
-  currentUser,
   disabled,
-  showNoTimeDimensionHelpText,
-  onSave
+  showNoTimeDimensionHelpText
 }) => {
   const [showRichTextEditor, setShowRichTextEditor] = useState(false);
-  const [interpretationText, setInterpretationText] = useState('');
-  const saveMutationRef = useRef({
-    resource: `interpretations/${type}/${id}`,
-    type: 'create',
-    data: ({
-      interpretationText
-    }) => interpretationText
-  });
+  const [text, setText] = useState('');
+  const onComplete = useCallback(() => {
+    setShowRichTextEditor(false);
+    setText('');
+  }, []);
+  const currentUser = useInterpretationsCurrentUser();
   const [save, {
-    loading: saveMutationInProgress
-  }] = useDataMutation(saveMutationRef.current, {
-    onComplete: () => {
-      setShowRichTextEditor(false);
-      setInterpretationText('');
-      onSave();
-    }
+    loading,
+    error
+  }] = useCreateInterpretation({
+    type,
+    id,
+    text,
+    onComplete
   });
   const inputPlaceholder = i18n.t('Write an interpretation');
   return /*#__PURE__*/React.createElement(MessageEditorContainer, {
-    currentUser: currentUser,
+    currentUserName: currentUser.name,
     dataTest: "interpretation-form"
   }, showRichTextEditor ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RichTextEditor, {
-    disabled: saveMutationInProgress,
+    disabled: loading,
     inputPlaceholder: inputPlaceholder,
-    onChange: setInterpretationText,
-    value: interpretationText,
+    onChange: setText,
+    value: text,
+    errorText: error ? i18n.t('Could not post interpretation') : '',
     helpText: showNoTimeDimensionHelpText ? i18n.t('Other people viewing this interpretation in the future may see more data.') : undefined
   }), /*#__PURE__*/React.createElement(MessageButtonStrip, null, /*#__PURE__*/React.createElement(Button, {
     primary: true,
     small: true,
-    loading: saveMutationInProgress,
+    loading: loading,
     onClick: () => save({
-      interpretationText
+      interpretationText: text
     })
   }, i18n.t('Post interpretation')), /*#__PURE__*/React.createElement(Button, {
     secondary: true,
     small: true,
-    disabled: saveMutationInProgress,
+    disabled: loading,
     onClick: () => {
-      setInterpretationText('');
+      setText('');
       setShowRichTextEditor(false);
     }
   }, i18n.t('Cancel')))) : /*#__PURE__*/React.createElement(Input, {
@@ -63,10 +60,8 @@ export const InterpretationForm = ({
   }));
 };
 InterpretationForm.propTypes = {
-  currentUser: PropTypes.object,
   disabled: PropTypes.bool,
   id: PropTypes.string,
   showNoTimeDimensionHelpText: PropTypes.bool,
-  type: PropTypes.string,
-  onSave: PropTypes.func
+  type: PropTypes.string
 };

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

@@ -5,43 +5,20 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Interpretation } from '../common/index.js';
-const sortByCreatedDateDesc = (a, b) => {
-  const dateA = a.created;
-  const dateB = b.created;
-  if (dateA < dateB) {
-    return 1;
-  }
-  if (dateA > dateB) {
-    return -1;
-  }
-  return 0;
-};
 export const InterpretationList = ({
-  currentUser,
-  interpretations,
+  interpretationIdsByDate,
   onInterpretationClick,
-  onLikeToggled,
   onReplyIconClick,
-  refresh,
   disabled,
   dashboardRedirectUrl
 }) => {
   const {
     fromServerDate
   } = useTimeZoneConversion();
-  const interpretationsByDate = interpretations.reduce((groupedInterpretations, interpretation) => {
-    const date = interpretation.created.split('T')[0];
-    if (date in groupedInterpretations) {
-      groupedInterpretations[date].push(interpretation);
-    } else {
-      groupedInterpretations[date] = [interpretation];
-    }
-    return groupedInterpretations;
-  }, {});
   return /*#__PURE__*/React.createElement("ol", {
     "data-test": "interpretations-list",
     className: _JSXStyle.dynamic([["4058400613", [spacers.dp8, spacers.dp8, spacers.dp16, colors.grey800, spacers.dp12, spacers.dp12, spacers.dp32, spacers.dp4]]]) + " " + "interpretation-groups"
-  }, Object.keys(interpretationsByDate).sort().reverse().map(date => /*#__PURE__*/React.createElement("li", {
+  }, Object.keys(interpretationIdsByDate).map(date => /*#__PURE__*/React.createElement("li", {
     key: date,
     className: _JSXStyle.dynamic([["4058400613", [spacers.dp8, spacers.dp8, spacers.dp16, colors.grey800, spacers.dp12, spacers.dp12, spacers.dp32, spacers.dp4]]])
   }, /*#__PURE__*/React.createElement("div", {
@@ -53,28 +30,21 @@ export const InterpretationList = ({
     className: _JSXStyle.dynamic([["4058400613", [spacers.dp8, spacers.dp8, spacers.dp16, colors.grey800, spacers.dp12, spacers.dp12, spacers.dp32, spacers.dp4]]]) + " " + "date-header"
   }, moment(fromServerDate(date)).format('ll'))), /*#__PURE__*/React.createElement("ol", {
     className: _JSXStyle.dynamic([["4058400613", [spacers.dp8, spacers.dp8, spacers.dp16, colors.grey800, spacers.dp12, spacers.dp12, spacers.dp32, spacers.dp4]]]) + " " + "interpretation-list"
-  }, interpretationsByDate[date].sort(sortByCreatedDateDesc).map(interpretation => /*#__PURE__*/React.createElement(Interpretation, {
-    key: interpretation.id,
-    interpretation: interpretation,
-    currentUser: currentUser,
-    onClick: onInterpretationClick,
-    onLikeToggled: onLikeToggled,
+  }, interpretationIdsByDate[date].map(interpretationId => /*#__PURE__*/React.createElement(Interpretation, {
+    key: interpretationId,
+    id: interpretationId,
     onReplyIconClick: onReplyIconClick,
-    onDeleted: refresh,
-    onUpdated: refresh,
+    dashboardRedirectUrl: dashboardRedirectUrl,
     disabled: disabled,
-    dashboardRedirectUrl: dashboardRedirectUrl
+    onClick: onInterpretationClick
   }))))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "4058400613",
     dynamic: [spacers.dp8, spacers.dp8, spacers.dp16, colors.grey800, spacers.dp12, spacers.dp12, spacers.dp32, spacers.dp4]
   }, [`.date-section.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:${spacers.dp8};-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:${spacers.dp8};}`, `.date-header.__jsx-style-dynamic-selector{font-size:14px;font-weight:500;line-height:${spacers.dp16};color:${colors.grey800};}`, `.interpretation-groups.__jsx-style-dynamic-selector{margin:0;padding:0;padding-top:${spacers.dp12};list-style:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:${spacers.dp12};}`, `.interpretation-list.__jsx-style-dynamic-selector{margin:0;padding-left:${spacers.dp32};list-style:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:${spacers.dp4};}`]));
 };
 InterpretationList.propTypes = {
-  currentUser: PropTypes.object.isRequired,
-  interpretations: PropTypes.array.isRequired,
-  refresh: PropTypes.func.isRequired,
+  interpretationIdsByDate: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)).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

@@ -1,122 +1,70 @@
 import _JSXStyle from "styled-jsx/style";
-import { useDataQuery } from '@dhis2/app-runtime';
 import i18n from '@dhis2/d2-i18n';
-import { CircularLoader, IconChevronDown24, IconChevronUp24, colors, spacers } from '@dhis2/ui';
+import { CircularLoader, IconChevronDown24, IconChevronUp24, colors, spacers, NoticeBox } from '@dhis2/ui';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useState, useImperativeHandle, forwardRef } from 'react';
+import React, { useState } from 'react';
+import { useInterpretationsList } from '../InterpretationsProvider/hooks.js';
 import { InterpretationForm } from './InterpretationForm.js';
 import { InterpretationList } from './InterpretationList.js';
-const interpretationsQuery = {
-  interpretations: {
-    resource: 'interpretations',
-    params: ({
-      type,
-      id
-    }) => ({
-      fields: ['access[write,manage]', 'id', 'createdBy[id,displayName]', 'created', 'text', 'comments[id]', 'likes', 'likedBy[id]'],
-      filter: `${type}.id:eq:${id}`
-    })
-  }
-};
-export const InterpretationsUnit = /*#__PURE__*/forwardRef(({
-  currentUser,
+export const InterpretationsUnit = ({
   type,
   id,
   visualizationHasTimeDimension = true,
-  onInterpretationClick = Function.prototype,
+  onInterpretationClick,
   onReplyIconClick,
   disabled,
-  renderId,
   dashboardRedirectUrl
-}, ref) => {
+}) => {
   const [isExpanded, setIsExpanded] = useState(true);
-  const [interpretations, setInterpretations] = useState([]);
   const showNoTimeDimensionHelpText = type === 'eventVisualization' && !visualizationHasTimeDimension;
   const {
+    data: interpretationIdsByDate,
     loading,
-    fetching,
-    refetch
-  } = useDataQuery(interpretationsQuery, {
-    lazy: true,
-    onComplete: data => setInterpretations(data.interpretations.interpretations)
-  });
-  const onCompleteAction = useCallback(() => {
-    refetch({
-      type,
-      id
-    });
-  }, [type, id, refetch]);
-  useImperativeHandle(ref, () => ({
-    refresh: onCompleteAction
-  }), [onCompleteAction]);
-  useEffect(() => {
-    if (id) {
-      refetch({
-        type,
-        id
-      });
-    }
-  }, [type, id, renderId, refetch]);
-  const onLikeToggled = ({
-    id,
-    likedBy
-  }) => {
-    const interpretation = interpretations.find(interp => interp.id === id);
-    interpretation.likedBy = likedBy;
-    interpretation.likes = likedBy.length;
-  };
+    error
+  } = useInterpretationsList(type, id);
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["4120713286", [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]]]) + " " + (cx('container', {
+    className: _JSXStyle.dynamic([["2008120072", [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]]]) + " " + (cx('container', {
       expanded: isExpanded
     }) || "")
-  }, fetching && !loading && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["4120713286", [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]]]) + " " + "fetching-loader"
-  }, /*#__PURE__*/React.createElement(CircularLoader, {
-    small: true
-  })), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("button", {
     onClick: () => setIsExpanded(!isExpanded),
-    className: _JSXStyle.dynamic([["4120713286", [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]]]) + " " + "header"
+    className: _JSXStyle.dynamic([["2008120072", [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]]]) + " " + "header"
   }, /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["4120713286", [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]]]) + " " + "title"
+    className: _JSXStyle.dynamic([["2008120072", [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]]]) + " " + "title"
   }, i18n.t('Interpretations')), isExpanded ? /*#__PURE__*/React.createElement(IconChevronUp24, {
     color: colors.grey700
   }) : /*#__PURE__*/React.createElement(IconChevronDown24, {
     color: colors.grey700
   })), isExpanded && /*#__PURE__*/React.createElement(React.Fragment, null, loading && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["4120713286", [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]]]) + " " + "loader"
+    className: _JSXStyle.dynamic([["2008120072", [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]]]) + " " + "loader"
   }, /*#__PURE__*/React.createElement(CircularLoader, {
     small: true
-  })), interpretations && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InterpretationForm, {
-    currentUser: currentUser,
+  })), error && /*#__PURE__*/React.createElement(NoticeBox, {
+    error: true,
+    title: i18n.t('Error loading interpretations')
+  }, error.message || i18n.t('Could not load interpretations')), interpretationIdsByDate && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InterpretationForm, {
     type: type,
     id: id,
-    onSave: onCompleteAction,
     disabled: disabled,
     showNoTimeDimensionHelpText: showNoTimeDimensionHelpText
   }), /*#__PURE__*/React.createElement(InterpretationList, {
-    currentUser: currentUser,
-    interpretations: interpretations,
+    interpretationIdsByDate: interpretationIdsByDate,
     onInterpretationClick: onInterpretationClick,
-    onLikeToggled: onLikeToggled,
     onReplyIconClick: onReplyIconClick,
-    refresh: onCompleteAction,
     disabled: disabled,
     dashboardRedirectUrl: dashboardRedirectUrl
   }))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4120713286",
+    id: "2008120072",
     dynamic: [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]
-  }, [`.container.__jsx-style-dynamic-selector{position:relative;padding:${spacers.dp16};border-bottom:1px solid ${colors.grey400};background-color:${colors.white};}`, ".fetching-loader.__jsx-style-dynamic-selector{position:absolute;inset:0px;background-color:rgba(255,255,255,0.8);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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;z-index:1;}", `.expanded.__jsx-style-dynamic-selector{padding-bottom:${spacers.dp32};}`, ".loader.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".header.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;cursor:pointer;}", `.title.__jsx-style-dynamic-selector{font-size:16px;font-weight:500;line-height:21px;color:${colors.grey900};}`]));
-});
-InterpretationsUnit.displayName = 'InterpretationsUnit';
+  }, [`.container.__jsx-style-dynamic-selector{position:relative;padding:${spacers.dp16};border-bottom:1px solid ${colors.grey400};background-color:${colors.white};}`, `.expanded.__jsx-style-dynamic-selector{padding-bottom:${spacers.dp32};}`, ".loader.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".header.__jsx-style-dynamic-selector{all:unset;inline-size:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;cursor:pointer;}", `.title.__jsx-style-dynamic-selector{font-size:16px;font-weight:500;line-height:21px;color:${colors.grey900};}`]));
+};
 InterpretationsUnit.propTypes = {
-  currentUser: PropTypes.object.isRequired,
   id: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
+  onInterpretationClick: PropTypes.func.isRequired,
   dashboardRedirectUrl: PropTypes.string,
   disabled: PropTypes.bool,
-  renderId: PropTypes.number,
   visualizationHasTimeDimension: PropTypes.bool,
-  onInterpretationClick: PropTypes.func,
   onReplyIconClick: PropTypes.func
 };