From 83cd07feee9166fd32b960dd37f27be8c9bb8117 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mose=20M=C3=BCller?= Date: Mon, 11 Dec 2023 16:06:53 +0100 Subject: [PATCH 01/10] updates SliderComponent to emit attribute updates (instead of full state dict) --- frontend/src/components/SliderComponent.tsx | 42 ++------------------- 1 file changed, 4 insertions(+), 38 deletions(-) diff --git a/frontend/src/components/SliderComponent.tsx b/frontend/src/components/SliderComponent.tsx index fc4bb3a..6cd7464 100644 --- a/frontend/src/components/SliderComponent.tsx +++ b/frontend/src/components/SliderComponent.tsx @@ -58,50 +58,17 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => { addNotification(`${parentPath}.${name}.stepSize changed to ${stepSize}.`); }, [props.stepSize]); - const emitSliderUpdate = ( - name: string, - parentPath: string, - value: number, - callback?: (ack: unknown) => void, - min: number = props.min, - max: number = props.max, - stepSize: number = props.stepSize - ) => { - setAttribute( - name, - parentPath, - { - value: value, - min: min, - max: max, - step_size: stepSize - }, - callback - ); - }; const handleOnChange = (event, newNumber: number | number[]) => { // This will never be the case as we do not have a range slider. However, we should // make sure this is properly handled. if (Array.isArray(newNumber)) { newNumber = newNumber[0]; } - emitSliderUpdate(name, parentPath, newNumber); + setAttribute(`${name}.value`, parentPath, newNumber); }; const handleValueChange = (newValue: number, valueType: string) => { - switch (valueType) { - case 'min': - emitSliderUpdate(name, parentPath, value, undefined, newValue); - break; - case 'max': - emitSliderUpdate(name, parentPath, value, undefined, min, newValue); - break; - case 'stepSize': - emitSliderUpdate(name, parentPath, value, undefined, min, max, newValue); - break; - default: - break; - } + setAttribute(`${name}.${valueType}`, parentPath, newValue); }; return ( @@ -136,13 +103,12 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => { null} /> @@ -197,7 +163,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => { handleValueChange(Number(e.target.value), 'stepSize')} + onChange={(e) => handleValueChange(Number(e.target.value), 'step_size')} /> From dc4c9ff58f3b1d589c9322b9882b52834afffccd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mose=20M=C3=BCller?= Date: Mon, 11 Dec 2023 16:07:38 +0100 Subject: [PATCH 02/10] removes unused customEmitUpdate prop from NumberComponent --- frontend/src/components/NumberComponent.tsx | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/frontend/src/components/NumberComponent.tsx b/frontend/src/components/NumberComponent.tsx index bc973d7..0e23c0d 100644 --- a/frontend/src/components/NumberComponent.tsx +++ b/frontend/src/components/NumberComponent.tsx @@ -18,12 +18,6 @@ interface NumberComponentProps { isInstantUpdate: boolean; unit?: string; showName?: boolean; - customEmitUpdate?: ( - name: string, - parent_path: string, - value: number, - callback?: (ack: unknown) => void - ) => void; addNotification: (message: string, levelname?: LevelName) => void; } @@ -123,10 +117,6 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => { // Whether to show the name infront of the component (false if used with a slider) const showName = props.showName !== undefined ? props.showName : true; - // If emitUpdate is passed, use this instead of the setAttribute from the socket - // Also used when used with a slider - const emitUpdate = - props.customEmitUpdate !== undefined ? props.customEmitUpdate : setAttribute; const renderCount = useRef(0); // Create a state for the cursor position @@ -263,7 +253,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => { selectionEnd )); } else if (key === 'Enter' && !isInstantUpdate) { - emitUpdate(name, parentPath, Number(newValue)); + setAttribute(name, parentPath, Number(newValue)); return; } else { console.debug(key); @@ -272,7 +262,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => { // Update the input value and maintain the cursor position if (isInstantUpdate) { - emitUpdate(name, parentPath, Number(newValue)); + setAttribute(name, parentPath, Number(newValue)); } setInputString(newValue); @@ -284,7 +274,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => { const handleBlur = () => { if (!isInstantUpdate) { // If not in "instant update" mode, emit an update when the input field loses focus - emitUpdate(name, parentPath, Number(inputString)); + setAttribute(name, parentPath, Number(inputString)); } }; From 13fba6d3d67f4e72c23d693b4e52393cd860c178 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mose=20M=C3=BCller?= Date: Mon, 11 Dec 2023 16:08:13 +0100 Subject: [PATCH 03/10] npm run build --- src/pydase/frontend/asset-manifest.json | 6 +++--- src/pydase/frontend/index.html | 2 +- .../static/js/{main.7f907b0f.js => main.05752ba8.js} | 6 +++--- ...7f907b0f.js.LICENSE.txt => main.05752ba8.js.LICENSE.txt} | 0 src/pydase/frontend/static/js/main.05752ba8.js.map | 1 + src/pydase/frontend/static/js/main.7f907b0f.js.map | 1 - 6 files changed, 8 insertions(+), 8 deletions(-) rename src/pydase/frontend/static/js/{main.7f907b0f.js => main.05752ba8.js} (70%) rename src/pydase/frontend/static/js/{main.7f907b0f.js.LICENSE.txt => main.05752ba8.js.LICENSE.txt} (100%) create mode 100644 src/pydase/frontend/static/js/main.05752ba8.js.map delete mode 100644 src/pydase/frontend/static/js/main.7f907b0f.js.map diff --git a/src/pydase/frontend/asset-manifest.json b/src/pydase/frontend/asset-manifest.json index 0f7bd34..e0c0317 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.7f907b0f.js", + "main.js": "/static/js/main.05752ba8.js", "index.html": "/index.html", "main.2d8458eb.css.map": "/static/css/main.2d8458eb.css.map", - "main.7f907b0f.js.map": "/static/js/main.7f907b0f.js.map" + "main.05752ba8.js.map": "/static/js/main.05752ba8.js.map" }, "entrypoints": [ "static/css/main.2d8458eb.css", - "static/js/main.7f907b0f.js" + "static/js/main.05752ba8.js" ] } \ No newline at end of file diff --git a/src/pydase/frontend/index.html b/src/pydase/frontend/index.html index 0a351b3..accda1d 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.7f907b0f.js b/src/pydase/frontend/static/js/main.05752ba8.js similarity index 70% rename from src/pydase/frontend/static/js/main.7f907b0f.js rename to src/pydase/frontend/static/js/main.05752ba8.js index 9138e0e..1e6fdce 100644 --- a/src/pydase/frontend/static/js/main.7f907b0f.js +++ b/src/pydase/frontend/static/js/main.05752ba8.js @@ -1,3 +1,3 @@ -/*! For license information please see main.7f907b0f.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