Merge branch '24.x' into fix/sv-svg-24x

dhis2 · Apr 9, 2024 · 10bdacd · 10bdacd
2 parents 5f4426b + 02ed7a0
commit 10bdacd
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,17 @@
+## [24.10.5](https://github.com/dhis2/analytics/compare/v24.10.4...v24.10.5) (2024-04-03)
+
+
+### Bug Fixes
+
+* avoid crash in DV with some chart types (DHIS2-15882) [24.x] ([#1651](https://github.com/dhis2/analytics/issues/1651)) ([68907d2](https://github.com/dhis2/analytics/commit/68907d2ef4dc1e200eeaa03c2b092229a68b9a99)), closes [#1582](https://github.com/dhis2/analytics/issues/1582)
+
+## [24.10.4](https://github.com/dhis2/analytics/compare/v24.10.3...v24.10.4) (2024-04-02)
+
+
+### Bug Fixes
+
+* interpretations panel renders with flashing when liking or unliking an interpretation ([#1643](https://github.com/dhis2/analytics/issues/1643)) ([4148bf9](https://github.com/dhis2/analytics/commit/4148bf9ae1c8aa386abd7b2b7ad2c01636d8b06d)), closes [#1600](https://github.com/dhis2/analytics/issues/1600)
+
 ## [24.10.3](https://github.com/dhis2/analytics/compare/v24.10.2...v24.10.3) (2024-03-20)
 
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "24.10.3",
+    "version": "24.10.5",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
@@ -63,7 +63,7 @@
         "classnames": "^2.3.1",
         "d2-utilizr": "^0.2.16",
         "d3-color": "^1.2.3",
-        "highcharts": "^10.2.0",
+        "highcharts": "^10.3.3",
         "lodash": "^4.17.21",
         "mathjs": "^9.4.2",
         "react-beautiful-dnd": "^10.1.1",

diff --git a/src/components/Interpretations/InterpretationModal/InterpretationModal.js b/src/components/Interpretations/InterpretationModal/InterpretationModal.js
@@ -82,7 +82,7 @@ const InterpretationModal = ({
     })
     const interpretation = data?.interpretation
     const shouldRenderModalContent = !error && interpretation
-    const shouldCssHideModal = loading || isVisualizationLoading
+    const loadingInProgress = loading || isVisualizationLoading
     const handleClose = () => {
         if (isDirty) {
             onInterpretationUpdate()
@@ -96,6 +96,13 @@ const InterpretationModal = ({
         }
         refetch({ id: interpretationId })
     }
+
+    const onLikeToggled = ({ likedBy }) => {
+        setIsDirty(true)
+        interpretation.likedBy = likedBy
+        interpretation.likes = likedBy.length
+    }
+
     const onInterpretationDeleted = () => {
         setIsDirty(false)
         onInterpretationUpdate()
@@ -110,7 +117,7 @@ const InterpretationModal = ({
 
     return (
         <>
-            {shouldCssHideModal && (
+            {loadingInProgress && (
                 <Layer>
                     <CenteredContent>
                         <CircularLoader />
@@ -121,7 +128,7 @@ const InterpretationModal = ({
                 fluid
                 onClose={handleClose}
                 className={cx(modalCSS.className, {
-                    hidden: shouldCssHideModal,
+                    hidden: loadingInProgress,
                 })}
                 dataTest="interpretation-modal"
             >
@@ -182,6 +189,7 @@ const InterpretationModal = ({
                                         downloadMenuComponent={
                                             downloadMenuComponent
                                         }
+                                        onLikeToggled={onLikeToggled}
                                     />
                                 </div>
                             </div>

diff --git a/src/components/Interpretations/InterpretationModal/InterpretationThread.js b/src/components/Interpretations/InterpretationModal/InterpretationThread.js
@@ -13,6 +13,7 @@ const InterpretationThread = ({
     fetching,
     interpretation,
     onInterpretationDeleted,
+    onLikeToggled,
     initialFocus,
     onThreadUpdated,
     downloadMenuComponent: DownloadMenu,
@@ -47,6 +48,7 @@ const InterpretationThread = ({
                         onReplyIconClick={() => focusRef.current?.focus()}
                         onUpdated={() => onThreadUpdated(true)}
                         onDeleted={onInterpretationDeleted}
+                        onLikeToggled={onLikeToggled}
                     />
                     <div className={'comments'}>
                         {interpretation.comments.map((comment) => (
@@ -145,6 +147,7 @@ InterpretationThread.propTypes = {
     fetching: PropTypes.bool.isRequired,
     interpretation: PropTypes.object.isRequired,
     onInterpretationDeleted: PropTypes.func.isRequired,
+    onLikeToggled: PropTypes.func.isRequired,
     downloadMenuComponent: PropTypes.oneOfType([
         PropTypes.object,
         PropTypes.func,

diff --git a/src/components/Interpretations/InterpretationsUnit/InterpretationList.js b/src/components/Interpretations/InterpretationsUnit/InterpretationList.js
@@ -22,6 +22,7 @@ export const InterpretationList = ({
     currentUser,
     interpretations,
     onInterpretationClick,
+    onLikeToggled,
     onReplyIconClick,
     refresh,
     disabled,
@@ -64,6 +65,7 @@ export const InterpretationList = ({
                                         interpretation={interpretation}
                                         currentUser={currentUser}
                                         onClick={onInterpretationClick}
+                                        onLikeToggled={onLikeToggled}
                                         onReplyIconClick={onReplyIconClick}
                                         onDeleted={refresh}
                                         onUpdated={refresh}
@@ -116,6 +118,7 @@ InterpretationList.propTypes = {
     interpretations: PropTypes.array.isRequired,
     refresh: PropTypes.func.isRequired,
     onInterpretationClick: PropTypes.func.isRequired,
+    onLikeToggled: PropTypes.func.isRequired,
     onReplyIconClick: PropTypes.func.isRequired,
     disabled: PropTypes.bool,
 }
diff --git a/src/components/Interpretations/InterpretationsUnit/InterpretationsUnit.js b/src/components/Interpretations/InterpretationsUnit/InterpretationsUnit.js
@@ -52,11 +52,14 @@ export const InterpretationsUnit = forwardRef(
         ref
     ) => {
         const [isExpanded, setIsExpanded] = useState(true)
+        const [interpretations, setInterpretations] = useState([])
 
-        const { data, loading, fetching, refetch } = useDataQuery(
+        const { loading, fetching, refetch } = useDataQuery(
             interpretationsQuery,
             {
                 lazy: true,
+                onComplete: (data) =>
+                    setInterpretations(data.interpretations.interpretations),
             }
         )
 
@@ -78,6 +81,14 @@ export const InterpretationsUnit = forwardRef(
             }
         }, [type, id, renderId, refetch])
 
+        const onLikeToggled = ({ id, likedBy }) => {
+            const interpretation = interpretations.find(
+                (interp) => interp.id === id
+            )
+            interpretation.likedBy = likedBy
+            interpretation.likes = likedBy.length
+        }
+
         return (
             <div
                 className={cx('container', {
@@ -107,7 +118,7 @@ export const InterpretationsUnit = forwardRef(
                                 <CircularLoader small />
                             </div>
                         )}
-                        {data && (
+                        {interpretations && (
                             <>
                                 <InterpretationForm
                                     currentUser={currentUser}
@@ -118,12 +129,11 @@ export const InterpretationsUnit = forwardRef(
                                 />
                                 <InterpretationList
                                     currentUser={currentUser}
-                                    interpretations={
-                                        data.interpretations.interpretations
-                                    }
+                                    interpretations={interpretations}
                                     onInterpretationClick={
                                         onInterpretationClick
                                     }
+                                    onLikeToggled={onLikeToggled}
                                     onReplyIconClick={onReplyIconClick}
                                     refresh={onCompleteAction}
                                     disabled={disabled}

diff --git a/src/components/Interpretations/common/Interpretation/Interpretation.js b/src/components/Interpretations/common/Interpretation/Interpretation.js
@@ -22,13 +22,18 @@ export const Interpretation = ({
     onDeleted,
     disabled,
     onReplyIconClick,
+    onLikeToggled,
 }) => {
     const [isUpdateMode, setIsUpdateMode] = useState(false)
     const [showSharingDialog, setShowSharingDialog] = useState(false)
     const { toggleLike, isLikedByCurrentUser, toggleLikeInProgress } = useLike({
         interpretation,
         currentUser,
-        onComplete: onUpdated,
+        onComplete: (likedBy) =>
+            onLikeToggled({
+                id: interpretation.id,
+                likedBy,
+            }),
     })
     const shouldShowButton = !!onClick && !disabled
 
@@ -121,6 +126,7 @@ 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,
     disabled: PropTypes.bool,

diff --git a/src/components/Interpretations/common/Interpretation/useLike.js b/src/components/Interpretations/common/Interpretation/useLike.js
@@ -7,11 +7,28 @@ const useLike = ({ interpretation, currentUser, onComplete }) => {
     const unlikeMutationRef = useRef({ resource, type: 'delete' })
     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 = () => {

diff --git a/src/visualizations/config/adapters/dhis_highcharts/chart.js b/src/visualizations/config/adapters/dhis_highcharts/chart.js
@@ -22,7 +22,11 @@ const getEvents = () => ({
                 if (item.legendSymbol) {
                     item.legendSymbol.attr({
                         translateY:
-                            -((item.legendItem.getBBox().height * 0.75) / 4) +
+                            -(
+                                (item.legendItem.label.getBBox().height *
+                                    0.75) /
+                                4
+                            ) +
                             item.legendSymbol.r / 2,
                     })
                 }

diff --git a/src/visualizations/config/generators/highcharts/index.js b/src/visualizations/config/generators/highcharts/index.js
@@ -20,6 +20,8 @@ function drawLegendSymbolWrap() {
         H.seriesTypes.column.prototype,
         'drawLegendSymbol',
         function (proceed, legend, item) {
+            const legendItem = item.legendItem
+
             if (this.options.legendSet?.legends?.length) {
                 const ys = legend.baseline - legend.symbolHeight + 1, // y start
                     x = legend.symbolWidth / 2 > 8 ? legend.symbolWidth / 2 : 8, // x start
@@ -32,7 +34,7 @@ function drawLegendSymbolWrap() {
                     .attr({
                         fill: legends[legends.length >= 5 ? 1 : 0].color,
                     })
-                    .add(this.legendGroup)
+                    .add(legendItem.group)
                 this.chart.renderer
                     .path(['M', x, ye, 'A', 1, 1, 0, 0, 0, x, ys, 'V', ye])
                     .attr({
@@ -42,13 +44,14 @@ function drawLegendSymbolWrap() {
                                 : legends.length - 1
                         ].color,
                     })
-                    .add(this.legendGroup)
+                    .add(legendItem.group)
             } else {
                 var options = legend.options,
                     symbolHeight = legend.symbolHeight,
                     square = options.squareSymbol,
                     symbolWidth = square ? symbolHeight : legend.symbolWidth
-                item.legendSymbol = this.chart.renderer
+
+                legendItem.symbol = this.chart.renderer
                     .rect(
                         square ? (legend.symbolWidth - symbolHeight) / 2 : 0,
                         legend.baseline - symbolHeight + 1,
@@ -60,7 +63,7 @@ function drawLegendSymbolWrap() {
                     .attr({
                         zIndex: 3,
                     })
-                    .add(item.legendGroup)
+                    .add(legendItem.group)
             }
         }
     )

diff --git a/yarn.lock b/yarn.lock
@@ -10517,10 +10517,10 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
-highcharts@^10.2.0:
-  version "10.2.0"
-  resolved "https://registry.yarnpkg.com/highcharts/-/highcharts-10.2.0.tgz#646b1c80fb4add9e35e5813bd87419ccdf1fc6b7"
-  integrity sha512-MvLo4dzR2Vo7Y85dsqJ07uabBXSSIRKRRdW4l9IGP55h2jYWNm/m9JBszVVxySH5Lda6g+Ins9NdGppZJpjNCA==
+highcharts@^10.3.3:
+  version "10.3.3"
+  resolved "https://registry.yarnpkg.com/highcharts/-/highcharts-10.3.3.tgz#b8acca24f2d4b1f2f726540734166e59e07b35c4"
+  integrity sha512-r7wgUPQI9tr3jFDn3XT36qsNwEIZYcfgz4mkKEA6E4nn5p86y+u1EZjazIG4TRkl5/gmGRtkBUiZW81g029RIw==
 
 highlight.js@^10.1.1, highlight.js@~10.5.0:
   version "10.5.0"