diff --git a/docs/dev-guide/Adding_Components.md b/docs/dev-guide/Adding_Components.md index 28a939b..3aded07 100644 --- a/docs/dev-guide/Adding_Components.md +++ b/docs/dev-guide/Adding_Components.md @@ -118,7 +118,7 @@ import { ChevronDown, ChevronRight } from 'react-bootstrap-icons'; import { getIdFromFullAccessPath } from '../utils/stringUtils'; import { LevelName } from './NotificationsComponent'; -interface ImageComponentProps { +type ImageComponentProps = { name: string; parentPath?: string; readOnly: boolean; @@ -165,14 +165,15 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => { onClick={() => setOpen(!open)} style={{ cursor: 'pointer' }} // Change cursor style on hover > - {displayName} {open ? : } + {displayName} + + {open ? : } {process.env.NODE_ENV === 'development' && (

Render count: {renderCount.current}

)} - {/* Your component TSX here */}
diff --git a/frontend/src/components/AsyncMethodComponent.tsx b/frontend/src/components/AsyncMethodComponent.tsx index 145b0fc..6c21d8f 100644 --- a/frontend/src/components/AsyncMethodComponent.tsx +++ b/frontend/src/components/AsyncMethodComponent.tsx @@ -6,7 +6,7 @@ import { getIdFromFullAccessPath } from '../utils/stringUtils'; import { LevelName } from './NotificationsComponent'; import { WebSettingsContext } from '../WebSettings'; -interface AsyncMethodProps { +type AsyncMethodProps = { name: string; parentPath: string; parameters: Record; @@ -14,7 +14,7 @@ interface AsyncMethodProps { docString?: string; hideOutput?: boolean; addNotification: (message: string, levelname?: LevelName) => void; -} +}; export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => { const { name, parentPath, docString, value: runningTask, addNotification } = props; @@ -102,14 +102,12 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => { {process.env.NODE_ENV === 'development' && (
Render count: {renderCount.current}
)} -
- Function: {displayName} - -
+
Function: {displayName}
{args}
diff --git a/frontend/src/components/ButtonComponent.tsx b/frontend/src/components/ButtonComponent.tsx index 8d8f868..86aad75 100644 --- a/frontend/src/components/ButtonComponent.tsx +++ b/frontend/src/components/ButtonComponent.tsx @@ -6,7 +6,7 @@ import { DocStringComponent } from './DocStringComponent'; import { getIdFromFullAccessPath } from '../utils/stringUtils'; import { LevelName } from './NotificationsComponent'; -interface ButtonComponentProps { +type ButtonComponentProps = { name: string; parentPath?: string; value: boolean; @@ -14,7 +14,7 @@ interface ButtonComponentProps { docString: string; mapping?: [string, string]; // Enforce a tuple of two strings addNotification: (message: string, levelname?: LevelName) => void; -} +}; export const ButtonComponent = React.memo((props: ButtonComponentProps) => { const { name, parentPath, value, readOnly, docString, addNotification } = props; @@ -48,7 +48,6 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
Render count: {renderCount.current}
)} - { disabled={readOnly} onChange={(e) => setChecked(e.currentTarget.checked)}> {displayName} + ); diff --git a/frontend/src/components/ColouredEnumComponent.tsx b/frontend/src/components/ColouredEnumComponent.tsx index 0f5f5c0..d26c3d6 100644 --- a/frontend/src/components/ColouredEnumComponent.tsx +++ b/frontend/src/components/ColouredEnumComponent.tsx @@ -6,7 +6,7 @@ import { DocStringComponent } from './DocStringComponent'; import { getIdFromFullAccessPath } from '../utils/stringUtils'; import { LevelName } from './NotificationsComponent'; -interface ColouredEnumComponentProps { +type ColouredEnumComponentProps = { name: string; parentPath: string; value: string; @@ -14,7 +14,7 @@ interface ColouredEnumComponentProps { readOnly: boolean; enumDict: Record; addNotification: (message: string, levelname?: LevelName) => void; -} +}; export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentProps) => { const { @@ -53,10 +53,12 @@ export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentPro {process.env.NODE_ENV === 'development' && (
Render count: {renderCount.current}
)} - - {displayName} + + {displayName} + + {readOnly ? ( // Display the Form.Control when readOnly is true { const { docString } = props; diff --git a/frontend/src/components/EnumComponent.tsx b/frontend/src/components/EnumComponent.tsx index c486ecf..a78ca4f 100644 --- a/frontend/src/components/EnumComponent.tsx +++ b/frontend/src/components/EnumComponent.tsx @@ -6,14 +6,14 @@ import { getIdFromFullAccessPath } from '../utils/stringUtils'; import { DocStringComponent } from './DocStringComponent'; import { LevelName } from './NotificationsComponent'; -interface EnumComponentProps { +type EnumComponentProps = { name: string; parentPath: string; value: string; docString?: string; enumDict: Record; addNotification: (message: string, levelname?: LevelName) => void; -} +}; export const EnumComponent = React.memo((props: EnumComponentProps) => { const { @@ -52,10 +52,12 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => { {process.env.NODE_ENV === 'development' && (
Render count: {renderCount.current}
)} - - {displayName} + + {displayName} + + ; async?: boolean; enum?: Record; -} +}; type GenericComponentProps = { attribute: Attribute; name: string; @@ -95,7 +95,7 @@ export const GenericComponent = React.memo( void; -} +}; export const ImageComponent = React.memo((props: ImageComponentProps) => { const { name, parentPath, value, docString, format, addNotification } = props; @@ -48,14 +48,15 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => { onClick={() => setOpen(!open)} style={{ cursor: 'pointer' }} // Change cursor style on hover > - {displayName} {open ? : } + {displayName} + + {open ? : } {process.env.NODE_ENV === 'development' && (

Render count: {renderCount.current}

)} - {/* Your component JSX here */} {format === '' && value === '' ? (

No image set in the backend.

diff --git a/frontend/src/components/ListComponent.tsx b/frontend/src/components/ListComponent.tsx index 8272277..be46634 100644 --- a/frontend/src/components/ListComponent.tsx +++ b/frontend/src/components/ListComponent.tsx @@ -4,14 +4,14 @@ import { Attribute, GenericComponent } from './GenericComponent'; import { getIdFromFullAccessPath } from '../utils/stringUtils'; import { LevelName } from './NotificationsComponent'; -interface ListComponentProps { +type ListComponentProps = { name: string; parentPath?: string; value: Attribute[]; docString: string; isInstantUpdate: boolean; addNotification: (message: string, levelname?: LevelName) => void; -} +}; export const ListComponent = React.memo((props: ListComponentProps) => { const { name, parentPath, value, docString, isInstantUpdate, addNotification } = diff --git a/frontend/src/components/MethodComponent.tsx b/frontend/src/components/MethodComponent.tsx index 82cc9a4..f7e3929 100644 --- a/frontend/src/components/MethodComponent.tsx +++ b/frontend/src/components/MethodComponent.tsx @@ -6,14 +6,14 @@ import { DocStringComponent } from './DocStringComponent'; import { getIdFromFullAccessPath } from '../utils/stringUtils'; import { LevelName } from './NotificationsComponent'; -interface MethodProps { +type MethodProps = { name: string; parentPath: string; parameters: Record; docString?: string; hideOutput?: boolean; addNotification: (message: string, levelname?: LevelName) => void; -} +}; export const MethodComponent = React.memo((props: MethodProps) => { const { name, parentPath, docString, addNotification } = props; @@ -89,12 +89,12 @@ export const MethodComponent = React.memo((props: MethodProps) => { )}
setHideOutput(!hideOutput)} style={{ cursor: 'pointer' }}> Function: {displayName} -
{args}
diff --git a/frontend/src/components/NumberComponent.tsx b/frontend/src/components/NumberComponent.tsx index dd2481d..32e0361 100644 --- a/frontend/src/components/NumberComponent.tsx +++ b/frontend/src/components/NumberComponent.tsx @@ -32,7 +32,7 @@ export type FloatObject = { }; export type NumberObject = IntObject | FloatObject | QuantityObject; -interface NumberComponentProps { +type NumberComponentProps = { name: string; type: 'float' | 'int'; parentPath?: string; @@ -43,7 +43,7 @@ interface NumberComponentProps { unit?: string; showName?: boolean; addNotification: (message: string, levelname?: LevelName) => void; -} +}; // TODO: highlight the digit that is being changed by setting both selectionStart and // selectionEnd @@ -313,10 +313,14 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => { {process.env.NODE_ENV === 'development' && (
Render count: {renderCount.current}
)} -
- {showName && {displayName}} + {showName && ( + + {displayName} + + + )} void; -} +}; export const SliderComponent = React.memo((props: SliderComponentProps) => { const renderCount = useRef(0); @@ -105,10 +105,12 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
Render count: {renderCount.current}
)} - - {displayName} + + {displayName} + + void; -} +}; export const StringComponent = React.memo((props: StringComponentProps) => { const { name, parentPath, readOnly, docString, isInstantUpdate, addNotification } = @@ -70,9 +70,11 @@ export const StringComponent = React.memo((props: StringComponentProps) => { {process.env.NODE_ENV === 'development' && (
Render count: {renderCount.current}
)} - - {displayName} + + {displayName} + + pydase App
\ No newline at end of file +pydase App
\ No newline at end of file diff --git a/src/pydase/frontend/static/js/main.ea55bba6.js b/src/pydase/frontend/static/js/main.dba067e7.js similarity index 72% rename from src/pydase/frontend/static/js/main.ea55bba6.js rename to src/pydase/frontend/static/js/main.dba067e7.js index e3d3329..cbe0330 100644 --- a/src/pydase/frontend/static/js/main.ea55bba6.js +++ b/src/pydase/frontend/static/js/main.dba067e7.js @@ -1,3 +1,3 @@ -/*! For license information please see main.ea55bba6.js.LICENSE.txt */ -(()=>{var e={694:(e,t)=>{var n;!function(){"use strict";var r={}.hasOwnProperty;function o(){for(var e=[],t=0;t{"use strict";e.exports=function(e,t,n,r,o,a,i,s){if(!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,o,a,i,s],u=0;(l=new Error(t.replace(/%s/g,(function(){return c[u++]})))).name="Invariant Violation"}throw l.framesToPop=1,l}}},888:(e,t,n)=>{"use strict";var r=n(47);function o(){}function a(){}a.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,a,i){if(i!==r){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:a,resetWarningCache:o};return n.PropTypes=n,n}},7:(e,t,n)=>{e.exports=n(888)()},47:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},463:(e,t,n)=>{"use strict";var r=n(791),o=n(296);function a(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n