updated favouriting feature to handle duplicate names

Author: alexwhelan12

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

@@ -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 &&
@@ -151,6 +149,7 @@ function FieldPrinter(props: FieldPrinterProps): JSX.Element {
 type FieldsPrinterProps = {
   fields: I_PISField[];
   depth?: number;
+  basePath: string; // NEW
 };
 
 function FieldsPrinter(props: FieldsPrinterProps): JSX.Element {
@@ -170,30 +169,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 +213,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>
           );

packages/client/src/hooks/favouriteLookupTable.ts

@@ -8,19 +8,21 @@ export const useFavouriteLookupTable = (
   return useMemo(() => {
     const table: Record<string, () => string | number | undefined> = {};
 
-    const extractFields = (node: unknown) => {
+    const extractFields = (node: unknown, path: string[] = []) => {
       if (!node || typeof node !== "object") return;
 
-      // If the current level is an array of I_PISField
+      // If node is an array of I_PISField
       if (
         Array.isArray(node) &&
         node.length &&
+        typeof node[0] === "object" &&
         "name" in node[0] &&
         "data" in node[0]
       ) {
         for (const field of node as I_PISField[]) {
           if (!field?.name) continue;
-          table[field.name] = () => {
+          const fullPath = [...path, field.name].join(".");
+          table[fullPath] = () => {
             const value = field.data?.[0]?.value;
             if (typeof value === "boolean") return value ? "T" : "F";
             return value;
@@ -29,9 +31,9 @@ export const useFavouriteLookupTable = (
         return;
       }
 
-      // Traverse object properties recursively if not an array of I_PISField (meaning it's a nested object)
+      // Traverse nested properties
       for (const key of Object.keys(node)) {
-        extractFields((node as Record<string, unknown>)[key]);
+        extractFields((node as Record<string, unknown>)[key], [...path, key]);
       }
     };