diff --git a/README.md b/README.md index ef8ecaf..ec499d5 100644 --- a/README.md +++ b/README.md @@ -831,7 +831,8 @@ Please ensure that the CSS file path is accessible from the server's running loc `pydase` enables users to customize the frontend layout via the `web_settings.json` file. Each key in the file corresponds to the full access path of public attributes, properties, and methods of the exposed service, using dot-notation. - **Custom Display Names**: Modify the `"displayName"` value in the file to change how each component appears in the frontend. - +- **Control Component Visibility**: Utilize the `"display"` key-value pair to control whether a component is rendered in the frontend. Set the value to `true` to make the component visible or `false` to hide it. + The `web_settings.json` file will be stored in the directory specified by `SERVICE_CONFIG_DIR`. You can generate a `web_settings.json` file by setting the `GENERATE_WEB_SETTINGS` to `True`. For more information, see the [configuration section](#configuring-pydase-via-environment-variables). diff --git a/frontend/src/WebSettings.tsx b/frontend/src/WebSettings.tsx index 60067c0..a5e549e 100644 --- a/frontend/src/WebSettings.tsx +++ b/frontend/src/WebSettings.tsx @@ -4,5 +4,6 @@ export const WebSettingsContext = createContext>({}); export type WebSetting = { displayName: string; + display: boolean; index: number; }; diff --git a/frontend/src/components/GenericComponent.tsx b/frontend/src/components/GenericComponent.tsx index 6338c3c..ccc9760 100644 --- a/frontend/src/components/GenericComponent.tsx +++ b/frontend/src/components/GenericComponent.tsx @@ -62,8 +62,13 @@ export const GenericComponent = React.memo( const webSettings = useContext(WebSettingsContext); let displayName = name; - if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) { - displayName = webSettings[fullAccessPath].displayName; + if (webSettings[fullAccessPath]) { + if (webSettings[fullAccessPath].display === false) { + return null; + } + if (webSettings[fullAccessPath].displayName) { + displayName = webSettings[fullAccessPath].displayName; + } } function changeCallback( diff --git a/src/pydase/frontend/asset-manifest.json b/src/pydase/frontend/asset-manifest.json index f6e65ae..c623fb6 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.7ef670d5.css", - "main.js": "/static/js/main.ca0b4800.js", + "main.js": "/static/js/main.97ef73ea.js", "index.html": "/index.html", "main.7ef670d5.css.map": "/static/css/main.7ef670d5.css.map", - "main.ca0b4800.js.map": "/static/js/main.ca0b4800.js.map" + "main.97ef73ea.js.map": "/static/js/main.97ef73ea.js.map" }, "entrypoints": [ "static/css/main.7ef670d5.css", - "static/js/main.ca0b4800.js" + "static/js/main.97ef73ea.js" ] } \ No newline at end of file diff --git a/src/pydase/frontend/index.html b/src/pydase/frontend/index.html index 4410200..c25e22b 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.ca0b4800.js b/src/pydase/frontend/static/js/main.97ef73ea.js similarity index 98% rename from src/pydase/frontend/static/js/main.ca0b4800.js rename to src/pydase/frontend/static/js/main.97ef73ea.js index f91bc6a..2578127 100644 --- a/src/pydase/frontend/static/js/main.ca0b4800.js +++ b/src/pydase/frontend/static/js/main.97ef73ea.js @@ -1,3 +1,3 @@ -/*! For license information please see main.ca0b4800.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