Implement data-map attribute #61

Joshpolansky · 2024-01-09T22:41:17Z

What

Implement a new attribute "data-map" that can have a complex json object to map variables to values on an object.

Why

This allows the user to specify more complex databinding than just value. As we use more web components, this will allow us to easily integrate them

Open question:

Currently this writes to the objects properties, but does not set the attributes.. do we want a way to do one or the other? I could image have a prefix on the value to set to specify if it's an attribute or property

I might propose that an @ prefix means attribute?

Example useage:

<!-- This is just normal data binding writing to local data -->
<input class="lux-text-value" data-var-name="input.color"/>
<input class="lux-text-value" data-var-name="input.width"/>

<!-- This is new data-map writing local data to arbitrary properties-->
<input id="testInput" 
data-map="{
    'value':{'data-var-name':'testData'}, 
    'style.backgroundColor':'input.color',
    'style.width':'input.width',
    '@myAttribute':'input.attributevalue'
    }"/>

<!-- This is new data-map writing local data to arbitrary properties-->
<div data-map="{'innerHTML':{'data-var-name':'testData'}}">
    <h1>Example</h1>
    <p>Example HMI</p>
</div>

<ob-rudder-medium data-map="{ 'rudderAngle' : 'tmplitTest:tmplit.Slider' , ' rudderSetPointAngle' : 'tmp1itTest:tmplit.Numericlnput' }"/>

shanereetz · 2024-01-09T22:47:06Z

Would you provide a small usage example?

shanereetz · 2024-01-09T22:54:59Z

src/HMI/lux-data-bind.js

@@ -96,6 +96,73 @@ function isEqual(in1, in2) {

 }

+// Set a value deep within an arbitrary object
+LUX.setDeepObjectValue = function (obj, prop, value) {
+	//Note: This function was pulled out of Lux 


Could you clarify the meaning of "this function was pulled out of LUX"? Maybe it was pulled from a separate file in the repo? I find it confusing since this still is in the LUX repo.

Also, it is unclear why this is "risky"

there is a setDeepValue in Lux.js. I didn't want to modify that because i don't know if there are ramifications to the way it was functioning

shanereetz · 2024-01-09T22:56:01Z

src/HMI/lux-data-bind.js

@@ -96,6 +96,73 @@ function isEqual(in1, in2) {

 }

+// Set a value deep within an arbitrary object
+LUX.setDeepObjectValue = function (obj, prop, value) {


Requesting to add a docstring for what these arguments signify

sclaiborne · 2024-01-09T22:58:10Z

src/HMI/lux-data-bind.js

+	function updateParameterValue($element, localMachine, key, dataVarName) {
+		let keyname = key.replace('.','-')
+		if ($element.attr('data-var-name-added-' + keyname) != dataVarName) {
+			$element.attr('data-var-name-added-' + keyname, dataVarName)
+			localMachine.initCyclicReadGroup(LUX.getDataReadGroup($element), dataVarName);
+		}
+		let value = localMachine.value(dataVarName);
+		if ($element.attr('data-machine-value-' + keyname) != value) {
+			$element.attr('data-machine-value-' + keyname, value)
+			$element.each((index, val) => {
+				LUX.setDeepObjectValue(val, key, value);			
+			});
+		}
+	}
+
+	function updateParameter($element, elMachine, key, value) {
+		if (typeof value === 'string') {
+			updateParameterValue($element, elMachine, key, value);
+			return
+		}
+
+		if (typeof value === 'object' && value['data-var-name']) {
+			let {
+				['data-var-name']:dataVarName,
+				machine
+			} = value;		
+			let localMachine = window[machine] 
+			if(localMachine == undefined){
+				localMachine = elMachine;
+			} 
+			updateParameterValue($element, localMachine, key, dataVarName);
+			return
+		}
+	}


Declaring these everytime the function is called feels wasteful

ya, i was thinking that too, but i also don't want to pollute, where should they go?

You could declare them on the function LUX.updateDataMaps.updateParameters = function....

shanereetz · 2024-01-09T23:06:18Z

example/HMI/views/main.handlebars

+<input id="testInput" 
+data-map="{
+    'value':{'data-var-name':'testData'}, 
+    'style.backgroundColor':'input.color',


Since the focus of the PR is on working with web components, can you tell me more about the choice to make this custom mapping attribute, vs leveraging slots on web components?

I'm not sure how slots are relevant, what do you mean? My understanding is that slots are used when you want to integrate user supplied html into the web component, but this is about setting values on the web component

Here is an example usage with a web component:

<ob-rudder-medium data-map="{ 'rudderAngle' : 'tmplitTest:tmplit.Slider' , ' rudderSetPointAngle' : 'tmp1itTest:tmplit.Numericlnput' }"/>

Slots could be relevant for uses like input forms, because (I think) the slot could just be one part of the component, with the binding already applied.

<my-fancy-input> <slot name="userInput" data-var-name="PLC:varToWriteTo" /> <slot name="otherThing" data-var-name="OtherVar"/> </my-fancy-input>

But on second thought, what is even more relevant than slots is custom attributes on web components. I believe with these you could expose certain component-specific parameters, rather than using an all-in-one mapping. I think it would be much more readable / usable, but would perhaps limit which attributes you could bind to.

Loosely-psuedocoded-example:
<od-rudder-medium data-rudder="tmplitTest:tmplit.Slider" data-rudder-angle="tmplit1Test.NumericInput"/>

The biggest downside I see to the mapping, is readability and how easily one could misspell part of the mapping, and then break all of the mapping for that component.

The main use case is web-components that we don't build. This is mainly useful for third party components, and means we don't have to consider how the data will map when creating components

Note that the od-rudder-medium example is from open-bridge

I don't see why it requires internal knowledge of the components, the normal use case would likely not use deep structures. You just have to know what properties to set, which would be the case with any solution.

I don't think we should build data binding into our components, IMO they should really be standalone and not consider integration into lux. The data-map solution covers all use cases, although I agree the json string is not ideal.

I was considering something like

data-lux-[arbitrary property] = "my.pv.name" but I'm not sure this is actually very good from an implementation standpoint, because there aren't great built-in ways to get data-lux* for all elements although that might not be correct.

Can you give any examples of more dev-friendly apis?

I just tried using document.querySelectorAll('[data-lux*]') and it throws an error that it isn't a valid selector

The only way I see that we could do it is with something like

let elements = Array.from(document.querySelectorAll('*')).filter(el => Array.from(el.attributes).some(attr => attr.name.startsWith('data-lux')) );

but that is really inefficient

I tested this and it's ~100x slower

it looks like attributes aren't case sensitive (they are always lower case) so we can't actually support properties with this

Joshpolansky added 2 commits January 5, 2024 21:21

Add datamap feature

bf6cec0

Fix deep values for classes

2228533

Joshpolansky requested review from sclaiborne and lawrencegsullivan January 9, 2024 22:41

Joshpolansky linked an issue Jan 9, 2024 that may be closed by this pull request

Add support for arbitrary data mapping #58

Open

Joshpolansky requested a review from shanereetz January 9, 2024 22:42

add test code

6d5b7d7

shanereetz reviewed Jan 9, 2024

View reviewed changes

sclaiborne reviewed Jan 9, 2024

View reviewed changes

Joshpolansky added 2 commits January 9, 2024 15:03

Add doc string

7b84ee3

Add example to doc string

f85385d

shanereetz reviewed Jan 9, 2024

View reviewed changes

Support both syntaxes and update examples

b72eaed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement data-map attribute #61

Implement data-map attribute #61

Joshpolansky commented Jan 9, 2024 •

edited

Loading

shanereetz commented Jan 9, 2024

shanereetz Jan 9, 2024 •

edited

Loading

Joshpolansky Jan 9, 2024

shanereetz Jan 9, 2024

sclaiborne Jan 9, 2024

Joshpolansky Jan 9, 2024

sclaiborne Jan 10, 2024

shanereetz Jan 9, 2024

Joshpolansky Jan 9, 2024

shanereetz Jan 9, 2024 •

edited

Loading

Joshpolansky Jan 9, 2024

Joshpolansky Jan 9, 2024

Joshpolansky Jan 10, 2024

Joshpolansky Jan 10, 2024

Joshpolansky Jan 10, 2024

Joshpolansky Jan 10, 2024

Joshpolansky Jan 10, 2024

Implement data-map attribute #61

Are you sure you want to change the base?

Implement data-map attribute #61

Conversation

Joshpolansky commented Jan 9, 2024 • edited Loading

What

Why

shanereetz commented Jan 9, 2024

shanereetz Jan 9, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shanereetz Jan 9, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Joshpolansky commented Jan 9, 2024 •

edited

Loading

shanereetz Jan 9, 2024 •

edited

Loading

shanereetz Jan 9, 2024 •

edited

Loading