Finished release 0.54.

Changelog.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.54] - 2024-03-05
+- Close the menu/sidebar when clicking outside of it
+- Fix image download for pages with SVG icons inside the chart container
+
 ## [0.53] - 2024-03-04
 - COMP-386/384: Text change
 

compendium-frontend/package-lock.json

@@ -14,7 +14,7 @@
         "chart.js": "^4.2.1",
         "chartjs-plugin-datalabels": "^2.2.0",
         "core-js": "^3.26.1",
-        "dom-to-image": "^2.6.0",
+        "html-to-image": "^1.11.11",
         "install": "^0.13.0",
         "npm": "^9.2.0",
         "react": "^18.2.0",
@@ -5251,11 +5251,6 @@
         "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
     },
-    "node_modules/dom-to-image": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz",
-      "integrity": "sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA=="
-    },
     "node_modules/domelementtype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -7337,6 +7332,11 @@
       "integrity": "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==",
       "dev": true
     },
+    "node_modules/html-to-image": {
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz",
+      "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA=="
+    },
     "node_modules/http-cache-semantics": {
       "version": "3.8.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
@@ -19035,11 +19035,6 @@
         "entities": "^2.0.0"
       }
     },
-    "dom-to-image": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz",
-      "integrity": "sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA=="
-    },
     "domelementtype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -20608,6 +20603,11 @@
       "integrity": "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==",
       "dev": true
     },
+    "html-to-image": {
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz",
+      "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA=="
+    },
     "http-cache-semantics": {
       "version": "3.8.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",

compendium-frontend/package.json

@@ -47,7 +47,7 @@
     "chart.js": "^4.2.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "core-js": "^3.26.1",
-    "dom-to-image": "^2.6.0",
+    "html-to-image": "^1.11.11",
     "install": "^0.13.0",
     "npm": "^9.2.0",
     "react": "^18.2.0",

compendium-frontend/src/components/DownloadImageChartButton.tsx

 import React, { useContext, useState, useRef, useEffect } from 'react';
-import domtoimage from 'dom-to-image';
+import * as htmlToImage from 'html-to-image';
 import { ImageType } from "../helpers/constants";
 import { ChartContainerContext } from "../helpers/ChartContainerProvider";
 import { FaDownload } from 'react-icons/fa';
@@ -27,19 +27,19 @@ const DownloadImageChartButton: React.FC<DownloadImageChartProps> = ({ filename
             let dataUrl;
             switch (exportType) {
                 case ImageType.JPEG:
-                    dataUrl = await domtoimage.toJpeg(chartContainerRef.current, {
+                    dataUrl = await htmlToImage.toJpeg(chartContainerRef.current, {
                         quality: 0.95,
                         style: commonStyle
                     });
                     break;
                 case ImageType.SVG:
-                    dataUrl = await domtoimage.toSvg(chartContainerRef.current, {
+                    dataUrl = await htmlToImage.toSvg(chartContainerRef.current, {
                         style: commonStyle
                     });
                     break;
                 case ImageType.PNG:
                 default:
-                    dataUrl = await domtoimage.toPng(chartContainerRef.current, {
+                    dataUrl = await htmlToImage.toPng(chartContainerRef.current, {
                         style: commonStyle
                     });
                     break;

compendium-frontend/src/components/SideBar.tsx

-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 // import { sidebarContext } from "../helpers/SidebarProvider";
 import { AiOutlineClose, AiOutlinePlus } from 'react-icons/ai';
 
@@ -7,6 +7,8 @@ interface Props {
     children: React.ReactNode;
 }
 
+// check if click outside of sidebar, then toggle it
+
 const Sidebar: React.FC<Props> = ({ children }) => {
 
     const [show, setShow] = useState<boolean>(false);
@@ -15,6 +17,21 @@ const Sidebar: React.FC<Props> = ({ children }) => {
         setShow(!show);
     };
 
+    const clickOutside = (e) => {
+        // check if the click was inside the sidebar or the menu button
+        // if it was outside, close the sidebar
+        if (e.target.closest('#sidebar') || e.target.closest('.toggle-btn')) {
+            return;
+        }
+        setShow(false);
+    }
+    useEffect(() => {
+        document.addEventListener('click', clickOutside);
+        return () => {
+            document.removeEventListener('click', clickOutside);
+        }
+    });
+
     return (
         <div className="sidebar-wrapper">
             <nav className={show ? '' : 'no-sidebar'} id="sidebar">

setup.py

@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name='compendium-v2',
-    version="0.53",
+    version="0.54",
     author='GEANT',
     author_email='swd@geant.org',
     description='Flask and React project for displaying '