IO-3349 Chart Enqueue and Label Required

Signed-off-by: Allan Carr <allan@imexsystems.ca>

client/src/App/App.container.jsx

@@ -1,20 +1,20 @@
 import { ApolloProvider } from "@apollo/client";
+import * as Sentry from "@sentry/react";
 import { SplitFactoryProvider, useSplitClient } from "@splitsoftware/splitio-react";
 import { ConfigProvider } from "antd";
 import enLocale from "antd/es/locale/en_US";
 import { useEffect, useMemo } from "react";
+import { CookiesProvider } from "react-cookie";
 import { useTranslation } from "react-i18next";
 import { connect, useSelector } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
+import { setDarkMode } from "../redux/application/application.actions";
+import { selectDarkMode } from "../redux/application/application.selectors";
+import { selectCurrentUser } from "../redux/user/user.selectors.js";
 import client from "../utils/GraphQLClient";
 import App from "./App";
-import * as Sentry from "@sentry/react";
 import getTheme from "./themeProvider";
-import { CookiesProvider } from "react-cookie";
-import { createStructuredSelector } from "reselect";
-import { selectCurrentUser } from "../redux/user/user.selectors.js";
-import { selectDarkMode } from "../redux/application/application.selectors";
-import { setDarkMode } from "../redux/application/application.actions";
 
 // Base Split configuration
 const config = {
@@ -86,7 +86,7 @@ function AppContainer({ currentUser, setDarkMode }) {
           theme={theme}
           form={{
             validateMessages: {
-              required: t("general.validation.required", { label: "{{label}}" })
+              required: t("general.validation.required", { label: "${label}" })
             }
           }}
         >

server/render/canvas-handler.js

@@ -73,37 +73,23 @@ const processCanvasRequest = async (req, res) => {
   // Default width and height
   const width = isNumber(w) && w > 0 ? w : 500;
   const height = isNumber(h) && h > 0 ? h : 275;
-
   const configuration = getChartConfiguration(keys, values, override);
 
-  let canvas = null;
-  let ctx = null;
   let chart = null;
-  let chartImage = null;
 
   try {
-    // Create the canvas
+    const canvas = new Canvas(width, height);
-    canvas = new Canvas(width, height);
+    const ctx = canvas.getContext("2d");
-    ctx = canvas.getContext("2d");
 
-    // Render the chart
     chart = new Chart(ctx, configuration);
 
-    // Generate and send the image
+    const chartImage = (await canvas.toBuffer("image/png")).toString("base64");
-    chartImage = (await canvas.toBuffer("image/png")).toString("base64");
     res.status(200).send(`data:image/png;base64,${chartImage}`);
   } catch (error) {
-    // Log the error and send the response
     logger.log("canvas-error", "error", "jsr", null, { error: error.message });
-    res.status(500).send("Failed to generate canvas.");
+    res.status(500).send("Error generating canvas");
   } finally {
-    // Cleanup resources
+    chart?.destroy();
-    if (chart) {
-      chart.destroy();
-    }
-    ctx = null;
-    canvas = null;
-    chartImage = null;
   }
 };
 
@@ -118,6 +104,7 @@ const enqueueRequest = (req, res) => {
 };
 
 const processNextInQueue = async () => {
+  try {
     while (requestQueue.length > 0) {
       const { req, res } = requestQueue.shift();
       try {
@@ -126,7 +113,9 @@ const processNextInQueue = async () => {
         console.error("canvas-queue-error", "error", "jsr", null, { error: err.message });
       }
     }
+  } finally {
     isProcessing = false;
+  }
 };
 
 exports.canvastest = function (req, res) {
@@ -134,7 +123,10 @@ exports.canvastest = function (req, res) {
 };
 
 exports.canvas = async (req, res) => {
-  if (isProcessing || !enqueueRequest(req, res)) return;
+  if (!enqueueRequest(req, res)) return;
+
+  if (!isProcessing) {
     isProcessing = true;
     processNextInQueue().catch((err) => console.error("canvas-processing-error", { error: err.message }));
+  }
 };