fixed favouriting feature with new packet structure

package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "@mantine/dates": "^8.0.1",
     "@mantine/notifications": "^7.17.3",
+    "@next/swc-darwin-arm64": "15.3.4",
     "esbuild": "^0.23.0",
     "uuid": "^11.0.5"
   },

packages/client/src/components/containers/BottomInformationContainer.tsx

@@ -7,8 +7,8 @@ import type I_PIS from "@/objects/PIS/PIS.interface";
 
 function BottomInformationContainer() {
   const { currentAppState, setCurrentAppState } = useAppState();
-  const { battery, motor, mppt } = usePIS();
-  const dataArray = [battery, motor, mppt].filter(
+  const { battery, mbms, motor, mppt } = usePIS();
+  const dataArray = [battery, motor, mppt, mbms].filter(
     (data) => data !== undefined,
   ) as I_PIS[];
   const lookupTable = useFavouriteLookupTable(dataArray);
@@ -28,6 +28,18 @@ function BottomInformationContainer() {
     [currentAppState, favourites],
   );
 
+  const formatPathLabel = (path: string) =>
+    path
+      .split(".")
+      .map(
+        (segment) =>
+          segment
+            .replace(/([a-z])([A-Z])/g, "$1 $2") // lowerUpper → lower Upper
+            .replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2") // ABCDef → ABC Def
+            .replace(/([a-zA-Z])(\d)/g, "$1 $2"), // Unit3 → Unit 3
+      )
+      .join(" "); // use " " or " →" or " / " if preferred
+
   return (
     <div className="align-middle">
       <div className="flex h-full flex-row flex-wrap justify-evenly gap-4 pt-1 text-center text-base md:gap-2 2xl:text-xl">
@@ -37,7 +49,7 @@ function BottomInformationContainer() {
               className="text-xs hover:cursor-pointer 2xl:text-sm"
               onClick={() => handleRemoveFavourite(favourite)}
             >
-              {favourite}
+              {formatPathLabel(favourite)}
             </div>
             <div className="text-helios">
               {/*Search for the value associated with the favourite name string in the lookupTable */

packages/client/src/components/transformers/PISTransformer.tsx

@@ -88,33 +88,31 @@ function FieldDataFormatter(props: FieldDataFormatterProps): JSX.Element {
 
 type FieldPrinterProps = {
   field: I_PISField;
+  fieldPath: string;
 };
 
 function FieldPrinter(props: FieldPrinterProps): JSX.Element {
   const { setCurrentAppState } = useAppState();
-  const { field } = props;
+  const { field, fieldPath } = props;
 
   const handleAddToFavourites = useCallback(() => {
     const storedFavourites = localStorage.getItem("favourites");
     const parsedFavourites: string[] = storedFavourites
       ? (JSON.parse(storedFavourites) as string[])
       : [];
 
-    if (
-      !parsedFavourites.some((fav) => fav === field.name) &&
-      typeof field.name === "string"
-    ) {
-      if (parsedFavourites.length === 8 && typeof field.name === "string") {
+    if (!parsedFavourites.includes(fieldPath)) {
+      if (parsedFavourites.length === 8) {
         parsedFavourites.shift();
       }
-      parsedFavourites.push(field.name);
+      parsedFavourites.push(fieldPath);
       setCurrentAppState((prev) => ({
         ...prev,
         favourites: parsedFavourites,
       }));
       localStorage.setItem("favourites", JSON.stringify(parsedFavourites));
     }
-  }, [field.name, setCurrentAppState]);
+  }, [fieldPath, setCurrentAppState]);
 
   if (
     field.fstring !== undefined &&
@@ -128,17 +126,15 @@ function FieldPrinter(props: FieldPrinterProps): JSX.Element {
 
   return (
     <div className="group mt-1 flex items-center justify-between text-xs">
-      {!field.isFault && (
-        <span
-          className="mt-1 hidden cursor-pointer items-center whitespace-nowrap text-xs font-bold text-helios group-hover:flex"
-          onClick={handleAddToFavourites}
-        >
-          Add to Favourites
-        </span>
-      )}
+      <span
+        className="mt-1 hidden cursor-pointer items-center whitespace-nowrap text-xs font-bold text-helios group-hover:flex"
+        onClick={handleAddToFavourites}
+      >
+        Add to Favourites
+      </span>
       <div className="flex w-full items-center justify-between gap-2">
         <p
-          className={`mt-1 flex items-center justify-between text-xs ${field.isFault ? "" : "group-hover:hidden"}`}
+          className={`mt-1 flex items-center justify-between text-xs group-hover:hidden`}
         >
           {field.name}
         </p>
@@ -151,10 +147,11 @@ function FieldPrinter(props: FieldPrinterProps): JSX.Element {
 type FieldsPrinterProps = {
   fields: I_PISField[];
   depth?: number;
+  basePath: string; // NEW
 };
 
 function FieldsPrinter(props: FieldsPrinterProps): JSX.Element {
-  const { depth = 0, fields } = props;
+  const { basePath, depth = 0, fields } = props;
   const isFullscreen = useFullscreen();
 
   // get the max height class based on depth, but only do this if not in fullscreen
@@ -170,30 +167,39 @@ function FieldsPrinter(props: FieldsPrinterProps): JSX.Element {
       className={`block overflow-x-hidden md:grid md:grid-cols-3 md:gap-x-2 lg:block lg:overflow-x-hidden ${getMaxHeightClass()}`}
     >
       {fields.map((field, index) => (
-        <FieldPrinter field={field} key={index} />
+        <FieldPrinter
+          field={field}
+          fieldPath={`${basePath}.${field.name}`}
+          key={index}
+        />
       ))}
     </div>
   );
 }
+
 type PIStransformerProps = {
   root: I_PIS;
   depth?: number;
+  path?: string[];
 };
 
 function PISTransformer(props: PIStransformerProps): JSX.Element {
-  const { depth = 0, root } = props;
+  const { depth = 0, path = [], root } = props;
+
   const formatKey = (key: string): string => {
     return key
-      .replace(/([a-z])([A-Z])/g, "$1 $2") // Add space between lowercase and uppercase
-      .replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2") // Add space between consecutive uppercase followed by lowercase
-      .replace(/([a-zA-Z])(\d)/g, "$1 $2"); // Add space between letters and numbers
+      .replace(/([a-z])([A-Z])/g, "$1 $2")
+      .replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2")
+      .replace(/([a-zA-Z])(\d)/g, "$1 $2");
   };
 
   return (
     root && (
       <div className="flex size-full flex-col gap-x-2 lg:h-[375px] lg:flex-wrap xl:h-[350px]">
         {Object.keys(root).map((key, index) => {
           const value = root[key];
+          const newPath = [...path, key]; // Track path
+
           return (
             <div className={`flex flex-col`} id={key} key={index}>
               <div className="flex w-full items-center justify-evenly border-b-2 border-helios">
@@ -205,10 +211,19 @@ function PISTransformer(props: PIStransformerProps): JSX.Element {
                   {formatKey(key)}
                 </p>
               </div>
+
               {Array.isArray(value) ? (
-                <FieldsPrinter depth={depth + 1} fields={value} />
+                <FieldsPrinter
+                  basePath={newPath.join(".")}
+                  depth={depth + 1}
+                  fields={value}
+                />
               ) : (
-                <PISTransformer depth={depth + 1} root={value as I_PIS} />
+                <PISTransformer
+                  depth={depth + 1}
+                  path={newPath}
+                  root={value as I_PIS}
+                />
               )}
             </div>
           );