ITQC/pydase
24
0
Fork 0
mirror of https://github.com/tiqi-group/pydase.git synced 2025-06-03 20:30:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

frontend: adds support for displayOrder in web settings

Browse Source
This commit is contained in:
Mose Müller 2024-07-24 14:53:13 +02:00
parent 7bc12b340f
commit 0d70b7492d
5 changed files with 45 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/WebSettings.tsx
View File

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

11
frontend/src/components/DataServiceComponent.tsx
View File

@ -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}

7
frontend/src/components/DictComponent.tsx
View File

@ -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}

7
frontend/src/components/ListComponent.tsx
View File

@ -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}

28
frontend/src/hooks/useSortedEntries.ts Normal file
View File

@ -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;
}