moves displayName and id to GenericComponent and pass them as props

frontend/src/components/AsyncMethodComponent.tsx

@@ -1,10 +1,8 @@
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { runMethod } from '../socket';
 import { InputGroup, Form, Button } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
-import { getIdFromFullAccessPath } from '../utils/stringUtils';
 import { LevelName } from './NotificationsComponent';
-import { WebSettingsContext } from '../WebSettings';
 
 type AsyncMethodProps = {
   name: string;
@@ -14,20 +12,23 @@ type AsyncMethodProps = {
   docString?: string;
   hideOutput?: boolean;
   addNotification: (message: string, levelname?: LevelName) => void;
+  displayName: string;
+  id: string;
 };
 
 export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
-  const { name, parentPath, docString, value: runningTask, addNotification } = props;
+  const {
+    name,
+    parentPath,
+    docString,
+    value: runningTask,
+    addNotification,
+    displayName,
+    id
+  } = props;
   const renderCount = useRef(0);
   const formRef = useRef(null);
   const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
-  const id = getIdFromFullAccessPath(fullAccessPath);
-  const webSettings = useContext(WebSettingsContext);
-  let displayName = name;
-
-  if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
-    displayName = webSettings[fullAccessPath].displayName;
-  }
 
   useEffect(() => {
     renderCount.current++;
@@ -51,13 +52,13 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
     let message: string;
 
     if (runningTask === null) {
-      message = `${parentPath}.${name} task was stopped.`;
+      message = `${fullAccessPath} task was stopped.`;
     } else {
       const runningTaskEntries = Object.entries(runningTask)
         .map(([key, value]) => `${key}: "${value}"`)
         .join(', ');
 
-      message = `${parentPath}.${name} was started with parameters { ${runningTaskEntries} }.`;
+      message = `${fullAccessPath} was started with parameters { ${runningTaskEntries} }.`;
     }
     addNotification(message);
   }, [props.value]);

frontend/src/components/ButtonComponent.tsx

@@ -1,8 +1,6 @@
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
-import { WebSettingsContext } from '../WebSettings';
 import { ToggleButton } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
-import { getIdFromFullAccessPath } from '../utils/stringUtils';
 import { LevelName } from './NotificationsComponent';
 
 type ButtonComponentProps = {
@@ -19,27 +17,24 @@ type ButtonComponentProps = {
     prefix?: string,
     callback?: (ack: unknown) => void
   ) => void;
+  displayName: string;
+  id: string;
 };
 
 export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
   const {
-    name,
-    parentPath,
     value,
     readOnly,
     docString,
     addNotification,
-    changeCallback = () => {}
+    changeCallback = () => {},
+    displayName,
+    id
   } = props;
   // const buttonName = props.mapping ? (value ? props.mapping[0] : props.mapping[1]) : name;
-  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
+  const fullAccessPath = [props.parentPath, props.name]
-  const id = getIdFromFullAccessPath(fullAccessPath);
+    .filter((element) => element)
-  const webSettings = useContext(WebSettingsContext);
+    .join('.');
-  let displayName = name;
-
-  if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
-    displayName = webSettings[fullAccessPath].displayName;
-  }
 
   const renderCount = useRef(0);
 
@@ -48,7 +43,7 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
   });
 
   useEffect(() => {
-    addNotification(`${parentPath}.${name} changed to ${value}.`);
+    addNotification(`${fullAccessPath} changed to ${value}.`);
   }, [props.value]);
 
   const setChecked = (checked: boolean) => {
@@ -66,7 +61,7 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
         type="checkbox"
         variant={value ? 'success' : 'secondary'}
         checked={value}
-        value={parentPath}
+        value={displayName}
         disabled={readOnly}
         onChange={(e) => setChecked(e.currentTarget.checked)}>
         {displayName}

frontend/src/components/ColouredEnumComponent.tsx

@@ -1,8 +1,6 @@
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
-import { WebSettingsContext } from '../WebSettings';
 import { InputGroup, Form, Row, Col } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
-import { getIdFromFullAccessPath } from '../utils/stringUtils';
 import { LevelName } from './NotificationsComponent';
 
 type ColouredEnumComponentProps = {
@@ -19,35 +17,32 @@ type ColouredEnumComponentProps = {
     prefix?: string,
     callback?: (ack: unknown) => void
   ) => void;
+  displayName: string;
+  id: string;
 };
 
 export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentProps) => {
   const {
-    name,
-    parentPath: parentPath,
     value,
     docString,
     enumDict,
     readOnly,
     addNotification,
-    changeCallback = () => {}
+    changeCallback = () => {},
+    displayName,
+    id
   } = props;
   const renderCount = useRef(0);
-  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
+  const fullAccessPath = [props.parentPath, props.name]
-  const id = getIdFromFullAccessPath(fullAccessPath);
+    .filter((element) => element)
-  const webSettings = useContext(WebSettingsContext);
+    .join('.');
-  let displayName = name;
-
-  if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
-    displayName = webSettings[fullAccessPath].displayName;
-  }
 
   useEffect(() => {
     renderCount.current++;
   });
 
   useEffect(() => {
-    addNotification(`${parentPath}.${name} changed to ${value}.`);
+    addNotification(`${fullAccessPath} changed to ${value}.`);
   }, [props.value]);
 
   return (

frontend/src/components/DataServiceComponent.tsx

@@ -1,11 +1,9 @@
-import { useContext, useState } from 'react';
+import { useState } from 'react';
 import React from 'react';
 import { Card, Collapse } from 'react-bootstrap';
 import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
-import { Attribute, GenericComponent } from './GenericComponent';
+import { SerializedValue, GenericComponent } from './GenericComponent';
-import { getIdFromFullAccessPath } from '../utils/stringUtils';
 import { LevelName } from './NotificationsComponent';
-import { WebSettingsContext } from '../WebSettings';
 
 type DataServiceProps = {
   name: string;
@@ -13,31 +11,24 @@ type DataServiceProps = {
   parentPath?: string;
   isInstantUpdate: boolean;
   addNotification: (message: string, levelname?: LevelName) => void;
+  displayName: string;
+  id: string;
 };
 
-export type DataServiceJSON = Record<string, Attribute>;
+export type DataServiceJSON = Record<string, SerializedValue>;
 
 export const DataServiceComponent = React.memo(
   ({
     name,
     props,
-    parentPath = '',
+    parentPath = undefined,
     isInstantUpdate,
-    addNotification
+    addNotification,
+    displayName,
+    id
   }: DataServiceProps) => {
     const [open, setOpen] = useState(true);
-    let fullAccessPath = parentPath;
+    const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
-    if (name) {
-      fullAccessPath = [parentPath, name].filter((element) => element).join('.');
-    }
-    const id = getIdFromFullAccessPath(fullAccessPath);
-
-    const webSettings = useContext(WebSettingsContext);
-    let displayName = fullAccessPath;
-
-    if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
-      displayName = webSettings[fullAccessPath].displayName;
-    }
 
     if (displayName !== '') {
       return (

frontend/src/components/DeviceConnection.tsx

@@ -1,8 +1,5 @@
-import { useContext } from 'react';
 import React from 'react';
-import { getIdFromFullAccessPath } from '../utils/stringUtils';
 import { LevelName } from './NotificationsComponent';
-import { WebSettingsContext } from '../WebSettings';
 import { DataServiceComponent, DataServiceJSON } from './DataServiceComponent';
 import { MethodComponent } from './MethodComponent';
 
@@ -12,6 +9,8 @@ type DeviceConnectionProps = {
   parentPath: string;
   isInstantUpdate: boolean;
   addNotification: (message: string, levelname?: LevelName) => void;
+  displayName: string;
+  id: string;
 };
 
 export const DeviceConnectionComponent = React.memo(
@@ -20,23 +19,14 @@ export const DeviceConnectionComponent = React.memo(
     props,
     parentPath,
     isInstantUpdate,
-    addNotification
+    addNotification,
+    displayName,
+    id
   }: DeviceConnectionProps) => {
     const { connected, connect, ...updatedProps } = props;
     const connectedVal = connected.value;
 
-    let fullAccessPath = parentPath;
+    const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
-    if (name) {
-      fullAccessPath = [parentPath, name].filter((element) => element).join('.');
-    }
-    const id = getIdFromFullAccessPath(fullAccessPath);
-
-    const webSettings = useContext(WebSettingsContext);
-    let displayName = fullAccessPath;
-
-    if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
-      displayName = webSettings[fullAccessPath].displayName;
-    }
 
     return (
       <div className="deviceConnectionComponent" id={id}>
@@ -51,6 +41,8 @@ export const DeviceConnectionComponent = React.memo(
               parameters={connect.parameters}
               docString={connect.doc}
               addNotification={addNotification}
+              displayName={'reconnect'}
+              id={id + '-connect'}
             />
           </div>
         )}
@@ -60,6 +52,8 @@ export const DeviceConnectionComponent = React.memo(
           parentPath={parentPath}
           isInstantUpdate={isInstantUpdate}
           addNotification={addNotification}
+          displayName={displayName}
+          id={id}
         />
       </div>
     );

frontend/src/components/EnumComponent.tsx

@@ -1,7 +1,5 @@
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
-import { WebSettingsContext } from '../WebSettings';
 import { InputGroup, Form, Row, Col } from 'react-bootstrap';
-import { getIdFromFullAccessPath } from '../utils/stringUtils';
 import { DocStringComponent } from './DocStringComponent';
 import { LevelName } from './NotificationsComponent';
 
@@ -18,35 +16,32 @@ type EnumComponentProps = {
     prefix?: string,
     callback?: (ack: unknown) => void
   ) => void;
+  displayName: string;
+  id: string;
 };
 
 export const EnumComponent = React.memo((props: EnumComponentProps) => {
   const {
-    name,
-    parentPath: parentPath,
     value,
     docString,
     enumDict,
     addNotification,
-    changeCallback = () => {}
+    changeCallback = () => {},
+    displayName,
+    id
   } = props;
 
   const renderCount = useRef(0);
-  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
+  const fullAccessPath = [props.parentPath, props.name]
-  const id = getIdFromFullAccessPath(fullAccessPath);
+    .filter((element) => element)
-  const webSettings = useContext(WebSettingsContext);
+    .join('.');
-  let displayName = name;
-
-  if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
-    displayName = webSettings[fullAccessPath].displayName;
-  }
 
   useEffect(() => {
     renderCount.current++;
   });
 
   useEffect(() => {
-    addNotification(`${parentPath}.${name} changed to ${value}.`);
+    addNotification(`${fullAccessPath} changed to ${value}.`);
   }, [props.value]);
 
   return (

frontend/src/components/GenericComponent.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { ButtonComponent } from './ButtonComponent';
 import { NumberComponent } from './NumberComponent';
 import { SliderComponent } from './SliderComponent';
@@ -12,6 +12,8 @@ import { DeviceConnectionComponent } from './DeviceConnection';
 import { ImageComponent } from './ImageComponent';
 import { ColouredEnumComponent } from './ColouredEnumComponent';
 import { LevelName } from './NotificationsComponent';
+import { getIdFromFullAccessPath } from '../utils/stringUtils';
+import { WebSettingsContext } from '../WebSettings';
 import { setAttribute } from '../socket';
 
 type AttributeType =
@@ -35,7 +37,7 @@ export type SerializedValue = {
   value?: ValueType | ValueType[];
   readonly: boolean;
   doc?: string | null;
-  parameters?: Record<string, string>;
+  parameters?: Record<string, SerializedValue>;
   async?: boolean;
   enum?: Record<string, string>;
 };
@@ -55,6 +57,14 @@ export const GenericComponent = React.memo(
     isInstantUpdate,
     addNotification
   }: GenericComponentProps) => {
+    const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
+    const id = getIdFromFullAccessPath(fullAccessPath);
+    const webSettings = useContext(WebSettingsContext);
+    let displayName = name;
+
+    if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
+      displayName = webSettings[fullAccessPath].displayName;
+    }
 
     function changeCallback(
       value: unknown,
@@ -75,6 +85,8 @@ export const GenericComponent = React.memo(
           value={Boolean(attribute.value)}
           addNotification={addNotification}
           changeCallback={changeCallback}
+          displayName={displayName}
+          id={id}
         />
       );
     } else if (attribute.type === 'float' || attribute.type === 'int') {
@@ -89,6 +101,8 @@ export const GenericComponent = React.memo(
           isInstantUpdate={isInstantUpdate}
           addNotification={addNotification}
           changeCallback={changeCallback}
+          displayName={displayName}
+          id={id}
         />
       );
     } else if (attribute.type === 'Quantity') {
@@ -104,6 +118,8 @@ export const GenericComponent = React.memo(
           isInstantUpdate={isInstantUpdate}
           addNotification={addNotification}
           changeCallback={changeCallback}
+          displayName={displayName}
+          id={id}
         />
       );
     } else if (attribute.type === 'NumberSlider') {
@@ -120,6 +136,8 @@ export const GenericComponent = React.memo(
           isInstantUpdate={isInstantUpdate}
           addNotification={addNotification}
           changeCallback={changeCallback}
+          displayName={displayName}
+          id={id}
         />
       );
     } else if (attribute.type === 'Enum') {
@@ -132,6 +150,8 @@ export const GenericComponent = React.memo(
           enumDict={attribute.enum}
           addNotification={addNotification}
           changeCallback={changeCallback}
+          displayName={displayName}
+          id={id}
         />
       );
     } else if (attribute.type === 'method') {
@@ -143,6 +163,8 @@ export const GenericComponent = React.memo(
             docString={attribute.doc}
             parameters={attribute.parameters}
             addNotification={addNotification}
+            displayName={displayName}
+            id={id}
           />
         );
       } else {
@@ -154,6 +176,8 @@ export const GenericComponent = React.memo(
             parameters={attribute.parameters}
             value={attribute.value as Record<string, string>}
             addNotification={addNotification}
+            displayName={displayName}
+            id={id}
           />
         );
       }
@@ -168,6 +192,8 @@ export const GenericComponent = React.memo(
           isInstantUpdate={isInstantUpdate}
           addNotification={addNotification}
           changeCallback={changeCallback}
+          displayName={displayName}
+          id={id}
         />
       );
     } else if (attribute.type === 'DataService') {
@@ -178,6 +204,8 @@ export const GenericComponent = React.memo(
           parentPath={parentPath}
           isInstantUpdate={isInstantUpdate}
           addNotification={addNotification}
+          displayName={displayName}
+          id={id}
         />
       );
     } else if (attribute.type === 'DeviceConnection') {
@@ -188,6 +216,8 @@ export const GenericComponent = React.memo(
           parentPath={parentPath}
           isInstantUpdate={isInstantUpdate}
           addNotification={addNotification}
+          displayName={displayName}
+          id={id}
         />
       );
     } else if (attribute.type === 'list') {
@@ -199,6 +229,7 @@ export const GenericComponent = React.memo(
           parentPath={parentPath}
           isInstantUpdate={isInstantUpdate}
           addNotification={addNotification}
+          id={id}
         />
       );
     } else if (attribute.type === 'Image') {
@@ -212,6 +243,8 @@ export const GenericComponent = React.memo(
           // Add any other specific props for the ImageComponent here
           format={attribute.value['format']['value'] as string}
           addNotification={addNotification}
+          displayName={displayName}
+          id={id}
         />
       );
     } else if (attribute.type === 'ColouredEnum') {
@@ -225,6 +258,8 @@ export const GenericComponent = React.memo(
           enumDict={attribute.enum}
           addNotification={addNotification}
           changeCallback={changeCallback}
+          displayName={displayName}
+          id={id}
         />
       );
     } else {

frontend/src/components/ImageComponent.tsx

@@ -1,9 +1,7 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
-import { WebSettingsContext } from '../WebSettings';
 import { Card, Collapse, Image } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
 import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
-import { getIdFromFullAccessPath } from '../utils/stringUtils';
 import { LevelName } from './NotificationsComponent';
 
 type ImageComponentProps = {
@@ -14,28 +12,25 @@ type ImageComponentProps = {
   docString: string;
   format: string;
   addNotification: (message: string, levelname?: LevelName) => void;
+  displayName: string;
+  id: string;
 };
 
 export const ImageComponent = React.memo((props: ImageComponentProps) => {
-  const { name, parentPath, value, docString, format, addNotification } = props;
+  const { value, docString, format, addNotification, displayName, id } = props;
 
   const renderCount = useRef(0);
   const [open, setOpen] = useState(true);
-  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
+  const fullAccessPath = [props.parentPath, props.name]
-  const id = getIdFromFullAccessPath(fullAccessPath);
+    .filter((element) => element)
-  const webSettings = useContext(WebSettingsContext);
+    .join('.');
-  let displayName = name;
-
-  if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
-    displayName = webSettings[fullAccessPath].displayName;
-  }
 
   useEffect(() => {
     renderCount.current++;
   });
 
   useEffect(() => {
-    addNotification(`${parentPath}.${name} changed.`);
+    addNotification(`${fullAccessPath} changed.`);
   }, [props.value]);
 
   return (

frontend/src/components/ListComponent.tsx

@@ -1,25 +1,23 @@
 import React, { useEffect, useRef } from 'react';
 import { DocStringComponent } from './DocStringComponent';
-import { Attribute, GenericComponent } from './GenericComponent';
+import { SerializedValue, GenericComponent } from './GenericComponent';
-import { getIdFromFullAccessPath } from '../utils/stringUtils';
 import { LevelName } from './NotificationsComponent';
 
 type ListComponentProps = {
   name: string;
   parentPath?: string;
-  value: Attribute[];
+  value: SerializedValue[];
   docString: string;
   isInstantUpdate: boolean;
   addNotification: (message: string, levelname?: LevelName) => void;
+  id: string;
 };
 
 export const ListComponent = React.memo((props: ListComponentProps) => {
-  const { name, parentPath, value, docString, isInstantUpdate, addNotification } =
+  const { name, parentPath, value, docString, isInstantUpdate, addNotification, id } =
     props;
 
   const renderCount = useRef(0);
-  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
-  const id = getIdFromFullAccessPath(fullAccessPath);
 
   useEffect(() => {
     renderCount.current++;

frontend/src/components/NumberComponent.tsx

@@ -1,7 +1,5 @@
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
-import { WebSettingsContext } from '../WebSettings';
 import '../App.css';
-import { getIdFromFullAccessPath } from '../utils/stringUtils';
 import { LevelName } from './NotificationsComponent';
 import { NumberInputField } from './NumberInputField';
 
@@ -39,7 +37,6 @@ type NumberComponentProps = {
   docString: string;
   isInstantUpdate: boolean;
   unit?: string;
-  showName?: boolean;
   addNotification: (message: string, levelname?: LevelName) => void;
   changeCallback?: (
     value: unknown,
@@ -47,37 +44,31 @@ type NumberComponentProps = {
     prefix?: string,
     callback?: (ack: unknown) => void
   ) => void;
+  displayName?: string;
+  id: string;
 };
 
 export const NumberComponent = React.memo((props: NumberComponentProps) => {
   const {
-    name,
     value,
-    parentPath,
     readOnly,
     docString,
     isInstantUpdate,
     unit,
     addNotification,
-    changeCallback = () => {}
+    changeCallback = () => {},
+    displayName,
+    id
   } = props;
 
-  // Whether to show the name infront of the component (false if used with a slider)
-  const showName = props.showName !== undefined ? props.showName : true;
-
   const renderCount = useRef(0);
-  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
+  const fullAccessPath = [props.parentPath, props.name]
-  const id = getIdFromFullAccessPath(fullAccessPath);
+    .filter((element) => element)
-  const webSettings = useContext(WebSettingsContext);
+    .join('.');
-  let displayName = name;
-
-  if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
-    displayName = webSettings[fullAccessPath].displayName;
-  }
 
   useEffect(() => {
     // emitting notification
-    let notificationMsg = `${parentPath}.${name} changed to ${props.value}`;
+    let notificationMsg = `${fullAccessPath} changed to ${props.value}`;
     if (unit === undefined) {
       notificationMsg += '.';
     } else {
@@ -94,7 +85,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
       <NumberInputField
         name={fullAccessPath}
         value={value}
-        displayName={showName === true ? displayName : null}
+        displayName={displayName}
         unit={unit}
         readOnly={readOnly}
         type={props.type}

frontend/src/components/SliderComponent.tsx

@@ -1,10 +1,8 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
-import { WebSettingsContext } from '../WebSettings';
 import { InputGroup, Form, Row, Col, Collapse, ToggleButton } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
 import { Slider } from '@mui/material';
 import { NumberComponent, NumberObject } from './NumberComponent';
-import { getIdFromFullAccessPath } from '../utils/stringUtils';
 import { LevelName } from './NotificationsComponent';
 
 type SliderComponentProps = {
@@ -24,6 +22,8 @@ type SliderComponentProps = {
     prefix?: string,
     callback?: (ack: unknown) => void
   ) => void;
+  displayName: string;
+  id: string;
 };
 
 export const SliderComponent = React.memo((props: SliderComponentProps) => {
@@ -39,35 +39,30 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
     docString,
     isInstantUpdate,
     addNotification,
-    changeCallback = () => {}
+    changeCallback = () => {},
+    displayName,
+    id
   } = props;
   const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
-  const id = getIdFromFullAccessPath(fullAccessPath);
-  const webSettings = useContext(WebSettingsContext);
-  let displayName = name;
-
-  if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
-    displayName = webSettings[fullAccessPath].displayName;
-  }
 
   useEffect(() => {
     renderCount.current++;
   });
 
   useEffect(() => {
-    addNotification(`${parentPath}.${name} changed to ${value}.`);
+    addNotification(`${fullAccessPath} changed to ${value.value}.`);
   }, [props.value]);
 
   useEffect(() => {
-    addNotification(`${parentPath}.${name}.min changed to ${min}.`);
+    addNotification(`${fullAccessPath}.min changed to ${min.value}.`);
   }, [props.min]);
 
   useEffect(() => {
-    addNotification(`${parentPath}.${name}.max changed to ${max}.`);
+    addNotification(`${fullAccessPath}.max changed to ${max.value}.`);
   }, [props.max]);
 
   useEffect(() => {
-    addNotification(`${parentPath}.${name}.stepSize changed to ${stepSize}.`);
+    addNotification(`${fullAccessPath}.stepSize changed to ${stepSize.value}.`);
   }, [props.stepSize]);
 
   const handleOnChange = (event, newNumber: number | number[]) => {
@@ -145,8 +140,9 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
             type="float"
             value={valueMagnitude}
             unit={valueUnit}
-            showName={false}
+            addNotification={() => {}}
-            addNotification={() => null}
+            changeCallback={(value) => changeCallback(value, name + '.value')}
+            id={id + '-value'}
           />
         </Col>
         <Col xs="auto">

frontend/src/components/StringComponent.tsx

@@ -1,10 +1,8 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Form, InputGroup } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
 import '../App.css';
-import { getIdFromFullAccessPath } from '../utils/stringUtils';
 import { LevelName } from './NotificationsComponent';
-import { WebSettingsContext } from '../WebSettings';
 
 // TODO: add button functionality
 
@@ -22,29 +20,26 @@ type StringComponentProps = {
     prefix?: string,
     callback?: (ack: unknown) => void
   ) => void;
+  displayName: string;
+  id: string;
 };
 
 export const StringComponent = React.memo((props: StringComponentProps) => {
   const {
-    name,
-    parentPath,
     readOnly,
     docString,
     isInstantUpdate,
     addNotification,
-    changeCallback = () => {}
+    changeCallback = () => {},
+    displayName,
+    id
   } = props;
 
   const renderCount = useRef(0);
   const [inputString, setInputString] = useState(props.value);
-  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
+  const fullAccessPath = [props.parentPath, props.name]
-  const id = getIdFromFullAccessPath(fullAccessPath);
+    .filter((element) => element)
-  const webSettings = useContext(WebSettingsContext);
+    .join('.');
-  let displayName = name;
-
-  if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
-    displayName = webSettings[fullAccessPath].displayName;
-  }
 
   useEffect(() => {
     renderCount.current++;
@@ -55,7 +50,7 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
     if (props.value !== inputString) {
       setInputString(props.value);
     }
-    addNotification(`${parentPath}.${name} changed to ${props.value}.`);
+    addNotification(`${fullAccessPath} changed to ${props.value}.`);
   }, [props.value]);
 
   const handleChange = (event) => {
@@ -91,7 +86,6 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
           type="text"
           value={inputString}
           disabled={readOnly}
-          name={name}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
           onBlur={handleBlur}