fix(#2191): protocol parameter change ga is not displayed correctly

CHANGELOG.md

@@ -38,6 +38,7 @@ changes.
 - Fix duplicate testIds for reference errors and hints in DRep metadata form [Issue 1965](https://github.com/IntersectMBO/govtool/issues/1965)
 - Eliminate duplicate DReps in the DRep Directory [Issue 2171](https://github.com/IntersectMBO/govtool/issues/2171)
 - Handle script based DReps [Issue 1951](https://github.com/IntersectMBO/govtool/issues/1951)
+- Fix displaying protocol parameter cost models [Issue 2191](https://github.com/IntersectMBO/govtool/issues/2191)
 
 ### Changed
 

govtool/backend/sql/get-current-epoch-params.sql

@@ -1 +1,18 @@
-select ROW_TO_JSON(epoch_param) from epoch_param order by epoch_no desc limit 1;
+SELECT
+    jsonb_set(
+        ROW_TO_JSON(epoch_param)::jsonb,
+        '{cost_model}', 
+        CASE
+            WHEN cost_model.id IS NOT NULL THEN
+                ROW_TO_JSON(cost_model)::jsonb
+            ELSE
+                'null'::jsonb
+        END
+    ) AS epoch_param
+FROM
+    epoch_param
+LEFT JOIN
+    cost_model ON epoch_param.cost_model_id = cost_model.id
+ORDER BY
+    epoch_no DESC
+LIMIT 1;

govtool/backend/sql/list-proposals.sql

@@ -64,7 +64,16 @@ SELECT
     creator_block.epoch_no,
     voting_anchor.url,
     encode(voting_anchor.data_hash, 'hex'),
-    ROW_TO_JSON(proposal_params),
+    jsonb_set(
+        ROW_TO_JSON(proposal_params)::jsonb,
+        '{cost_model}', 
+        CASE
+            WHEN cost_model.id IS NOT NULL THEN
+                ROW_TO_JSON(cost_model)::jsonb
+            ELSE
+                'null'::jsonb
+        END
+    ) AS proposal_params,
     off_chain_vote_gov_action_data.title,
     off_chain_vote_gov_action_data.abstract,
     off_chain_vote_gov_action_data.motivation,
@@ -104,6 +113,7 @@ FROM
     JOIN block AS creator_block ON creator_block.id = creator_tx.block_id
     LEFT JOIN voting_anchor ON voting_anchor.id = gov_action_proposal.voting_anchor_id
     LEFT JOIN param_proposal as proposal_params ON gov_action_proposal.param_proposal = proposal_params.id
+    LEFT JOIN cost_model AS cost_model ON proposal_params.cost_model_id = cost_model.id
     LEFT JOIN off_chain_vote_data ON off_chain_vote_data.voting_anchor_id = voting_anchor.id
     LEFT JOIN off_chain_vote_gov_action_data ON off_chain_vote_gov_action_data.off_chain_vote_data_id = off_chain_vote_data.id
     LEFT JOIN voting_procedure ON voting_procedure.gov_action_proposal_id = gov_action_proposal.id

govtool/frontend/src/components/atoms/VotePill.tsx

@@ -32,13 +32,15 @@ export const VotePill = ({
       minWidth="50px"
       maxWidth={maxWidth ? `${maxWidth}px` : "auto"}
       width={width ? `${width}px` : "auto"}
-      maxHeight="14px"
     >
       <Typography
         textTransform="uppercase"
         fontSize={12}
         fontWeight={400}
         lineHeight="16px"
+        whiteSpace="nowrap"
+        textOverflow="ellipsis"
+        overflow="hidden"
       >
         {t(
           `votes.${

govtool/frontend/src/components/molecules/DataMissingHeader.tsx

@@ -36,9 +36,7 @@ export const DataMissingHeader = ({
     >
       <Typography
         sx={{
-          overflow: "hidden",
           textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
           fontWeight: 600,
           ...(isDataMissing && { color: "errorRed" }),
           ...titleStyle,

govtool/frontend/src/components/organisms/GovernanceActionDetailsCardData.tsx

@@ -19,6 +19,7 @@ import {
   filterUpdatableProtocolParams,
   filterOutNullParams,
   getFullGovActionId,
+  mapArrayToObjectByKeys,
 } from "@utils";
 import { MetadataValidationStatus, ProposalData } from "@models";
 import { GovernanceActionType } from "@/types/governanceAction";
@@ -92,20 +93,34 @@ export const GovernanceActionDetailsCardData = ({
   const { screenWidth } = useScreenDimension();
   const { isMobile } = useScreenDimension();
 
-  const updatableProtocolParams = useMemo(
+  const mappedArraysToObjectsProtocolParams = useMemo(
     () =>
-      filterUpdatableProtocolParams(epochParams, protocolParams, [
-        "id",
-        "registered_tx_id",
-        "key",
+      mapArrayToObjectByKeys(protocolParams, [
+        "PlutusV1",
+        "PlutusV2",
+        "PlutusV3",
       ]),
-    [epochParams, protocolParams],
+    [protocolParams],
+  );
+
+  const updatableProtocolParams = useMemo(
+    () =>
+      filterUpdatableProtocolParams(
+        epochParams,
+        mappedArraysToObjectsProtocolParams,
+        ["id", "registered_tx_id", "key"],
+      ),
+    [epochParams, mappedArraysToObjectsProtocolParams],
   );
 
   const nonNullProtocolParams = useMemo(
     () =>
-      filterOutNullParams(protocolParams, ["id", "registered_tx_id", "key"]),
-    [updatableProtocolParams, protocolParams],
+      filterOutNullParams(mappedArraysToObjectsProtocolParams, [
+        "id",
+        "registered_tx_id",
+        "key",
+      ]),
+    [updatableProtocolParams, mappedArraysToObjectsProtocolParams],
   );
 
   const isModifiedPadding =

govtool/frontend/src/main.tsx

@@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from "react-query";
 import { ReactQueryDevtools } from "react-query/devtools";
 import TagManager from "react-gtm-module";
 import { ThemeProvider } from "@emotion/react";
+import { CssBaseline } from "@mui/material";
 import * as Sentry from "@sentry/react";
 
 import { ContextProviders, UsersnapProvider } from "@context";
@@ -51,6 +52,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <ThemeProvider theme={theme}>
+        <CssBaseline />
         <UsersnapProvider>
           <BrowserRouter>
             <ContextProviders>

govtool/frontend/src/theme.ts

@@ -1,6 +1,11 @@
 import { createTheme } from "@mui/material/styles";
 import {
-  cyan, errorRed, orange, primaryBlue, progressYellow, successGreen,
+  cyan,
+  errorRed,
+  orange,
+  primaryBlue,
+  progressYellow,
+  successGreen,
 } from "./consts";
 
 export type Theme = typeof theme;
@@ -17,12 +22,19 @@ export const theme = createTheme({
     },
   },
   components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        ":root": {
+          fonfFamily: "Poppins, Arial",
+        },
+      },
+    },
     MuiAccordion: {
       styleOverrides: {
         root: {
           borderRadius: `12px !important`,
-        }
-      }
+        },
+      },
     },
     MuiInputBase: {
       styleOverrides: {
@@ -52,7 +64,7 @@ export const theme = createTheme({
         {
           props: { color: "default", variant: "filled" },
           style: {
-            backgroundColor: primaryBlue.c50
+            backgroundColor: primaryBlue.c50,
           },
         },
         {
@@ -110,7 +122,7 @@ export const theme = createTheme({
     MuiPopover: {
       defaultProps: {
         elevation: 2,
-      }
+      },
     },
   },
   typography: {

govtool/frontend/src/utils/filterOutNullParams.ts

@@ -8,7 +8,7 @@
 export const filterOutNullParams = (
   originalObject?: Record<string, unknown> | undefined | null,
   filterOutKeys?: string[],
-) => {
+): Record<string, unknown> | null => {
   if (!originalObject) {
     return null;
   }
@@ -20,12 +20,27 @@ export const filterOutNullParams = (
         value !== undefined &&
         !filterOutKeys?.includes(key)
       ) {
-        acc[key] = value;
+        if (
+          typeof value === "object" &&
+          !Array.isArray(value) &&
+          value !== null
+        ) {
+          // Recursively filter the nested object
+          const nestedFiltered = filterOutNullParams(
+            value as Record<string, unknown>,
+            filterOutKeys,
+          );
+          if (nestedFiltered && Object.keys(nestedFiltered).length > 0) {
+            acc[key] = nestedFiltered;
+          }
+        } else {
+          acc[key] = value;
+        }
       }
       return acc;
     },
     {},
   );
 
-  return finalObject;
+  return Object.keys(finalObject).length > 0 ? finalObject : null;
 };

govtool/frontend/src/utils/filterUpdatableProtocolParams.ts

@@ -19,16 +19,36 @@ export const filterUpdatableProtocolParams = (
   const finalObject = Object.entries(referenceObject).reduce<
     Record<string, unknown>
   >((acc, [key, referenceValue]) => {
+    const originalValue = originalObject[key];
+
     const isValid =
       !filterOutKeys?.includes(key) &&
       originalObject.hasOwnProperty(key) &&
       referenceValue !== undefined &&
       referenceValue !== null;
 
-    if (isValid) acc[key] = originalObject[key];
+    if (isValid) {
+      if (
+        typeof originalValue === "object" &&
+        originalValue !== null &&
+        typeof referenceValue === "object" &&
+        referenceValue !== null
+      ) {
+        const nestedFiltered = filterUpdatableProtocolParams(
+          originalValue as Record<string, unknown>,
+          referenceValue as Record<string, unknown>,
+          filterOutKeys,
+        );
+        if (nestedFiltered && Object.keys(nestedFiltered).length > 0) {
+          acc[key] = nestedFiltered;
+        }
+      } else {
+        acc[key] = originalValue;
+      }
+    }
 
     return acc;
   }, {});
 
-  return finalObject;
+  return Object.keys(finalObject).length > 0 ? finalObject : null;
 };

govtool/frontend/src/utils/index.ts

@@ -22,6 +22,7 @@ export * from "./getProposalTypeLabel";
 export * from "./isValidFormat";
 export * from "./jsonUtils";
 export * from "./localStorage";
+export * from "./mapArrayToObjectByKeys";
 export * from "./mapDtoToDrep";
 export * from "./mapDtoToProposal";
 export * from "./numberValidation";

govtool/frontend/src/utils/mapArrayToObjectByKeys.ts

@@ -0,0 +1,40 @@
+/**
+ * Maps an object to a new object by including only the desired keys
+ * and converting arrays to objects.
+ * @param obj - The object to map.
+ * @param desiredKeys - An array of keys to include in the mapped object.
+ * @returns The mapped object.
+ */
+export const mapArrayToObjectByKeys = (
+  obj?: Record<string, unknown> | null,
+  desiredKeys?: string[],
+): Record<string, unknown> | null => {
+  if (!obj || !desiredKeys) {
+    return null;
+  }
+
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    if (desiredKeys.includes(key) && Array.isArray(value)) {
+      const arrayToObject = value.reduce<Record<string, unknown>>(
+        (arrayAcc, arrayValue, index) => {
+          arrayAcc[index] = arrayValue;
+          return arrayAcc;
+        },
+        {},
+      );
+      acc[key] = arrayToObject;
+    } else if (
+      typeof value === "object" &&
+      value !== null &&
+      !Array.isArray(value)
+    ) {
+      acc[key] = mapArrayToObjectByKeys(
+        value as Record<string, unknown>,
+        desiredKeys,
+      );
+    } else {
+      acc[key] = value;
+    }
+    return acc;
+  }, {} as Record<string, unknown>);
+};