frontend: adds support for displayOrder in web settings

frontend/src/WebSettings.tsx

@@ -5,5 +5,5 @@ export const WebSettingsContext = createContext<Record<string, WebSetting>>({});
 export interface WebSetting {
   displayName: string;
   display: boolean;
-  index: number;
+  displayOrder: number;
 }

frontend/src/components/DataServiceComponent.tsx

@@ -5,6 +5,7 @@ import { GenericComponent } from "./GenericComponent";
 import { LevelName } from "./NotificationsComponent";
 import { SerializedObject } from "../types/SerializedObject";
 import useLocalStorage from "../hooks/useLocalStorage";
+import useSortedEntries from "../hooks/useSortedEntries";
 
 interface DataServiceProps {
   props: DataServiceJSON;
@@ -21,6 +22,8 @@ export const DataServiceComponent = React.memo(
     // Retrieve the initial state from localStorage, default to true if not found
     const [open, setOpen] = useLocalStorage(`dataServiceComponent-${id}-open`, true);
 
+    const sortedEntries = useSortedEntries(props);
+
     if (displayName !== "") {
       return (
         <div className="component dataServiceComponent" id={id}>
@@ -30,9 +33,9 @@ export const DataServiceComponent = React.memo(
             </Card.Header>
             <Collapse in={open}>
               <Card.Body>
-                {Object.entries(props).map(([key, value]) => (
+                {sortedEntries.map((value) => (
                   <GenericComponent
-                    key={key}
+                    key={value.full_access_path}
                     attribute={value}
                     isInstantUpdate={isInstantUpdate}
                     addNotification={addNotification}
@@ -46,9 +49,9 @@ export const DataServiceComponent = React.memo(
     } else {
       return (
         <div className="component dataServiceComponent" id={id}>
-          {Object.entries(props).map(([key, value]) => (
+          {sortedEntries.map((value) => (
             <GenericComponent
-              key={key}
+              key={value.full_access_path}
               attribute={value}
               isInstantUpdate={isInstantUpdate}
               addNotification={addNotification}

frontend/src/components/DictComponent.tsx

@@ -4,6 +4,7 @@ import { GenericComponent } from "./GenericComponent";
 import { LevelName } from "./NotificationsComponent";
 import { SerializedObject } from "../types/SerializedObject";
 import { useRenderCount } from "../hooks/useRenderCount";
+import useSortedEntries from "../hooks/useSortedEntries";
 
 interface DictComponentProps {
   value: Record<string, SerializedObject>;
@@ -14,16 +15,16 @@ interface DictComponentProps {
 }
 
 export const DictComponent = React.memo((props: DictComponentProps) => {
-  const { value, docString, isInstantUpdate, addNotification, id } = props;
+  const { docString, isInstantUpdate, addNotification, id } = props;
 
+  const sortedEntries = useSortedEntries(props.value);
   const renderCount = useRenderCount();
-  const valueArray = Object.values(value);
 
   return (
     <div className={"listComponent"} id={id}>
       {process.env.NODE_ENV === "development" && <div>Render count: {renderCount}</div>}
       <DocStringComponent docString={docString} />
-      {valueArray.map((item) => {
+      {sortedEntries.map((item) => {
         return (
           <GenericComponent
             key={item.full_access_path}

frontend/src/components/ListComponent.tsx

@@ -4,6 +4,7 @@ import { GenericComponent } from "./GenericComponent";
 import { LevelName } from "./NotificationsComponent";
 import { SerializedObject } from "../types/SerializedObject";
 import { useRenderCount } from "../hooks/useRenderCount";
+import useSortedEntries from "../hooks/useSortedEntries";
 
 interface ListComponentProps {
   value: SerializedObject[];
@@ -14,7 +15,9 @@ interface ListComponentProps {
 }
 
 export const ListComponent = React.memo((props: ListComponentProps) => {
-  const { value, docString, isInstantUpdate, addNotification, id } = props;
+  const { docString, isInstantUpdate, addNotification, id } = props;
+
+  const sortedEntries = useSortedEntries(props.value);
 
   const renderCount = useRenderCount();
 
@@ -22,7 +25,7 @@ export const ListComponent = React.memo((props: ListComponentProps) => {
     <div className={"listComponent"} id={id}>
       {process.env.NODE_ENV === "development" && <div>Render count: {renderCount}</div>}
       <DocStringComponent docString={docString} />
-      {value.map((item) => {
+      {sortedEntries.map((item) => {
         return (
           <GenericComponent
             key={item.full_access_path}

frontend/src/hooks/useSortedEntries.ts

@@ -0,0 +1,28 @@
+import { useContext } from "react";
+import { WebSettingsContext } from "../WebSettings";
+import { SerializedObject } from "../types/SerializedObject";
+
+export default function useSortedEntries(
+  props: Record<string, SerializedObject> | SerializedObject[],
+) {
+  const webSettings = useContext(WebSettingsContext);
+
+  // Get the order for sorting
+  const getOrder = (fullAccessPath: string) => {
+    return webSettings[fullAccessPath]?.displayOrder ?? Number.MAX_SAFE_INTEGER;
+  };
+
+  // Sort entries based on whether props is an array or an object
+  let sortedEntries;
+  if (Array.isArray(props)) {
+    // Need to make copy of array to leave the original array unmodified
+    sortedEntries = [...props].sort((objectA, objectB) => {
+      return getOrder(objectA.full_access_path) - getOrder(objectB.full_access_path);
+    });
+  } else {
+    sortedEntries = Object.values(props).sort((objectA, objectB) => {
+      return getOrder(objectA.full_access_path) - getOrder(objectB.full_access_path);
+    });
+  }
+  return sortedEntries;
+}