From 0e9832e2f1d4dfd1779017a533a1f017e2ac1c03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mose=20M=C3=BCller?= Date: Tue, 16 Jan 2024 12:55:18 +0100 Subject: [PATCH 1/6] updates DocStringComponent placement --- frontend/src/components/AsyncMethodComponent.tsx | 8 +++----- frontend/src/components/ButtonComponent.tsx | 2 +- frontend/src/components/ColouredEnumComponent.tsx | 6 ++++-- frontend/src/components/EnumComponent.tsx | 6 ++++-- frontend/src/components/GenericComponent.tsx | 4 ++-- frontend/src/components/ImageComponent.tsx | 5 +++-- frontend/src/components/MethodComponent.tsx | 2 +- frontend/src/components/NumberComponent.tsx | 8 ++++++-- frontend/src/components/SliderComponent.tsx | 6 ++++-- frontend/src/components/StringComponent.tsx | 6 ++++-- 10 files changed, 32 insertions(+), 21 deletions(-) diff --git a/frontend/src/components/AsyncMethodComponent.tsx b/frontend/src/components/AsyncMethodComponent.tsx index 145b0fc..3d507fc 100644 --- a/frontend/src/components/AsyncMethodComponent.tsx +++ b/frontend/src/components/AsyncMethodComponent.tsx @@ -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..ad01b01 100644 --- a/frontend/src/components/ButtonComponent.tsx +++ b/frontend/src/components/ButtonComponent.tsx @@ -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..bf6cf8b 100644 --- a/frontend/src/components/ColouredEnumComponent.tsx +++ b/frontend/src/components/ColouredEnumComponent.tsx @@ -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 { {process.env.NODE_ENV === 'development' && (
Render count: {renderCount.current}
)} - - {displayName} + + {displayName} + + { 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/MethodComponent.tsx b/frontend/src/components/MethodComponent.tsx index 82cc9a4..7b55f89 100644 --- a/frontend/src/components/MethodComponent.tsx +++ b/frontend/src/components/MethodComponent.tsx @@ -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..719319e 100644 --- a/frontend/src/components/NumberComponent.tsx +++ b/frontend/src/components/NumberComponent.tsx @@ -313,10 +313,14 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => { {process.env.NODE_ENV === 'development' && (
Render count: {renderCount.current}
)} -
- {showName && {displayName}} + {showName && ( + + {displayName} + + + )} {
Render count: {renderCount.current}
)} - - {displayName} + + {displayName} + + { {process.env.NODE_ENV === 'development' && (
Render count: {renderCount.current}
)} - - {displayName} + + {displayName} + + Date: Tue, 16 Jan 2024 12:57:35 +0100 Subject: [PATCH 2/6] replaces js interfaces with types --- frontend/src/components/AsyncMethodComponent.tsx | 4 ++-- frontend/src/components/ButtonComponent.tsx | 4 ++-- frontend/src/components/ColouredEnumComponent.tsx | 4 ++-- frontend/src/components/DocStringComponent.tsx | 4 ++-- frontend/src/components/EnumComponent.tsx | 4 ++-- frontend/src/components/GenericComponent.tsx | 4 ++-- frontend/src/components/ImageComponent.tsx | 4 ++-- frontend/src/components/ListComponent.tsx | 4 ++-- frontend/src/components/MethodComponent.tsx | 4 ++-- frontend/src/components/NumberComponent.tsx | 4 ++-- frontend/src/components/SliderComponent.tsx | 4 ++-- frontend/src/components/StringComponent.tsx | 4 ++-- 12 files changed, 24 insertions(+), 24 deletions(-) diff --git a/frontend/src/components/AsyncMethodComponent.tsx b/frontend/src/components/AsyncMethodComponent.tsx index 3d507fc..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; diff --git a/frontend/src/components/ButtonComponent.tsx b/frontend/src/components/ButtonComponent.tsx index ad01b01..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; diff --git a/frontend/src/components/ColouredEnumComponent.tsx b/frontend/src/components/ColouredEnumComponent.tsx index bf6cf8b..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 { diff --git a/frontend/src/components/DocStringComponent.tsx b/frontend/src/components/DocStringComponent.tsx index a440183..0007ad5 100644 --- a/frontend/src/components/DocStringComponent.tsx +++ b/frontend/src/components/DocStringComponent.tsx @@ -1,9 +1,9 @@ import { Badge, Tooltip, OverlayTrigger } from 'react-bootstrap'; import React from 'react'; -interface DocStringProps { +type DocStringProps = { docString?: string; -} +}; export const DocStringComponent = React.memo((props: DocStringProps) => { const { docString } = props; diff --git a/frontend/src/components/EnumComponent.tsx b/frontend/src/components/EnumComponent.tsx index 31d5b90..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 { diff --git a/frontend/src/components/GenericComponent.tsx b/frontend/src/components/GenericComponent.tsx index 368cc0c..7772caf 100644 --- a/frontend/src/components/GenericComponent.tsx +++ b/frontend/src/components/GenericComponent.tsx @@ -27,7 +27,7 @@ type AttributeType = | 'ColouredEnum'; type ValueType = boolean | string | number | object; -export interface Attribute { +export type Attribute = { type: AttributeType; value?: ValueType | ValueType[]; readonly: boolean; @@ -35,7 +35,7 @@ export interface Attribute { parameters?: Record; async?: boolean; enum?: Record; -} +}; type GenericComponentProps = { attribute: Attribute; name: string; diff --git a/frontend/src/components/ImageComponent.tsx b/frontend/src/components/ImageComponent.tsx index 004bbca..371d910 100644 --- a/frontend/src/components/ImageComponent.tsx +++ b/frontend/src/components/ImageComponent.tsx @@ -6,7 +6,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; value: string; @@ -14,7 +14,7 @@ interface ImageComponentProps { docString: string; format: string; addNotification: (message: string, levelname?: LevelName) => void; -} +}; export const ImageComponent = React.memo((props: ImageComponentProps) => { const { name, parentPath, value, docString, format, addNotification } = props; 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 7b55f89..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; diff --git a/frontend/src/components/NumberComponent.tsx b/frontend/src/components/NumberComponent.tsx index 719319e..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 diff --git a/frontend/src/components/SliderComponent.tsx b/frontend/src/components/SliderComponent.tsx index 95853eb..b19ff76 100644 --- a/frontend/src/components/SliderComponent.tsx +++ b/frontend/src/components/SliderComponent.tsx @@ -8,7 +8,7 @@ import { NumberComponent, NumberObject } from './NumberComponent'; import { getIdFromFullAccessPath } from '../utils/stringUtils'; import { LevelName } from './NotificationsComponent'; -interface SliderComponentProps { +type SliderComponentProps = { name: string; min: NumberObject; max: NumberObject; @@ -19,7 +19,7 @@ interface SliderComponentProps { stepSize: NumberObject; isInstantUpdate: boolean; addNotification: (message: string, levelname?: LevelName) => void; -} +}; export const SliderComponent = React.memo((props: SliderComponentProps) => { const renderCount = useRef(0); diff --git a/frontend/src/components/StringComponent.tsx b/frontend/src/components/StringComponent.tsx index c76612c..c916f25 100644 --- a/frontend/src/components/StringComponent.tsx +++ b/frontend/src/components/StringComponent.tsx @@ -9,7 +9,7 @@ import { WebSettingsContext } from '../WebSettings'; // TODO: add button functionality -interface StringComponentProps { +type StringComponentProps = { name: string; parentPath?: string; value: string; @@ -17,7 +17,7 @@ interface StringComponentProps { docString: string; isInstantUpdate: boolean; addNotification: (message: string, levelname?: LevelName) => void; -} +}; export const StringComponent = React.memo((props: StringComponentProps) => { const { name, parentPath, readOnly, docString, isInstantUpdate, addNotification } = From 3e1517e9054d9c9709deda7778ea868db6f5bb69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mose=20M=C3=BCller?= Date: Tue, 16 Jan 2024 13:00:01 +0100 Subject: [PATCH 3/6] udpates dev-guide for adding components --- docs/dev-guide/Adding_Components.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) 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 */}
From 300bd6ca9afe266433ee580e085d14837482dd60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mose=20M=C3=BCller?= Date: Tue, 16 Jan 2024 13:37:39 +0100 Subject: [PATCH 4/6] updates Enum serialization --- src/pydase/utils/serializer.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pydase/utils/serializer.py b/src/pydase/utils/serializer.py index 8233ff3..78d0835 100644 --- a/src/pydase/utils/serializer.py +++ b/src/pydase/utils/serializer.py @@ -67,7 +67,7 @@ class Serializer: def _serialize_enum(obj: Enum) -> dict[str, Any]: value = obj.name readonly = False - doc = get_attribute_doc(obj) + doc = obj.__doc__ if type(obj).__base__.__name__ == "ColouredEnum": obj_type = "ColouredEnum" else: From 616a5cea2180f4725e24faf4b9fe6371780d5d9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mose=20M=C3=BCller?= Date: Tue, 16 Jan 2024 13:44:37 +0100 Subject: [PATCH 5/6] npm run build --- src/pydase/frontend/asset-manifest.json | 6 +++--- src/pydase/frontend/index.html | 2 +- .../static/js/{main.ea55bba6.js => main.dba067e7.js} | 6 +++--- ...ea55bba6.js.LICENSE.txt => main.dba067e7.js.LICENSE.txt} | 0 src/pydase/frontend/static/js/main.dba067e7.js.map | 1 + src/pydase/frontend/static/js/main.ea55bba6.js.map | 1 - 6 files changed, 8 insertions(+), 8 deletions(-) rename src/pydase/frontend/static/js/{main.ea55bba6.js => main.dba067e7.js} (72%) rename src/pydase/frontend/static/js/{main.ea55bba6.js.LICENSE.txt => main.dba067e7.js.LICENSE.txt} (100%) create mode 100644 src/pydase/frontend/static/js/main.dba067e7.js.map delete mode 100644 src/pydase/frontend/static/js/main.ea55bba6.js.map diff --git a/src/pydase/frontend/asset-manifest.json b/src/pydase/frontend/asset-manifest.json index 5ad703d..eb1450b 100644 --- a/src/pydase/frontend/asset-manifest.json +++ b/src/pydase/frontend/asset-manifest.json @@ -1,13 +1,13 @@ { "files": { "main.css": "/static/css/main.2d8458eb.css", - "main.js": "/static/js/main.ea55bba6.js", + "main.js": "/static/js/main.dba067e7.js", "index.html": "/index.html", "main.2d8458eb.css.map": "/static/css/main.2d8458eb.css.map", - "main.ea55bba6.js.map": "/static/js/main.ea55bba6.js.map" + "main.dba067e7.js.map": "/static/js/main.dba067e7.js.map" }, "entrypoints": [ "static/css/main.2d8458eb.css", - "static/js/main.ea55bba6.js" + "static/js/main.dba067e7.js" ] } \ No newline at end of file diff --git a/src/pydase/frontend/index.html b/src/pydase/frontend/index.html index 843cdc2..e6a8b49 100644 --- a/src/pydase/frontend/index.html +++ b/src/pydase/frontend/index.html @@ -1 +1 @@ -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