[jira] [Comment Edited] (AIRAVATA-3477) file selector and other core input editors (radio buttons, etc.)

["Marcus Christie (Jira)" <ji...@apache.org>]

    [ https://issues.apache.org/jira/browse/AIRAVATA-3477?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=17382365#comment-17382365 ] 

Marcus Christie edited comment on AIRAVATA-3477 at 7/16/21, 9:54 PM:
---------------------------------------------------------------------

I've run into a problem trying to set properties on web components. What I'm trying to do is pass in, via property, the {{experimentInput}} instance into an input editor. The input editor uses the metadata in the {{experimentInput}} object to define some of its behavior, for example:
- the name of the input
- whether it is read-only
- validation rules

However, passing the {{experimentInput}} by property doesn't work. If a property is set on a custom element before it is "connected" (see the [web component lifecycle|https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks]), then it isn't automatically propagated to the custom element instance. See also what the Google Web Fundamentals documentation calls [lazy properties|https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties].

There is a pull request to fix this, but it seems to not be getting any attention, unfortunately: https://github.com/vuejs/vue-web-component-wrapper/pull/81

So I think the next best thing, and honestly perhaps a better approach, is to take a store approach and make the experiment data model and thus the experiment inputs available via a store pattern.  That is, each input editor will have access, via a singleton, to a store that will contain a reference to the experiment and/or experiment inputs directly.  I had already started work on a kind of [store pattern|https://github.com/apache/airavata-django-portal/blob/develop/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/store.js], but thought I could communicate amongst the components via attributes, properties and events. Now I'll revisit that work and extend it to be a true store pattern and hold the experiment instance that is being edited.




was (Author: marcuschristie):
I've run into a problem trying to set properties on web components. What I'm trying to do is pass in, via property, the {{experimentInput}} instance into an input editor. The input editor uses the metadata in the {{experimentInput}} object to define some of its behavior, for example:
- the name of the input
- whether it is read-only
- validation rules

However, passing the {{experimentInput}} by property doesn't work. If a property is set on a custom element before it is "connected" (see the [web component lifecycle|https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks], then it isn't automatically propagated to the custom element instance. See also what the Google Web Fundamentals documentation calls [lazy properties|https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties].

There is a pull request to fix this, but it seems to not be getting any attention, unfortunately: https://github.com/vuejs/vue-web-component-wrapper/pull/81

So I think the next best thing, and honestly perhaps a better approach, is to take a store approach and make the experiment data model and thus the experiment inputs available via a store pattern.  That is, each input editor will have access, via a singleton, to a store that will contain a reference to the experiment and/or experiment inputs directly.  I had already started work on a kind of [store pattern|https://github.com/apache/airavata-django-portal/blob/develop/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/store.js], but thought I could communicate amongst the components via attributes, properties and events. Now I'll revisit that work and extend it to be a true store pattern and hold the experiment instance that is being edited.



> file selector and other core input editors (radio buttons, etc.)
> ----------------------------------------------------------------
>
>                 Key: AIRAVATA-3477
>                 URL: https://issues.apache.org/jira/browse/AIRAVATA-3477
>             Project: Airavata
>          Issue Type: New Feature
>            Reporter: Marcus Christie
>            Assignee: Marcus Christie
>            Priority: Major
>
> TODO
> - [x] make experiment, experimentInput, id optional?
> - [x] change readOnly to derived from experimentInput?
> - [ ] add additional wrapper for input editors



--
This message was sent by Atlassian Jira
(v8.3.4#803005)