@jinntec/fore 1.5.0 → 1.7.0

package/src/fx-model.js

@@ -6,7 +6,13 @@ import {evaluateXPath, evaluateXPathToBoolean} from './xpath-evaluation.js';
 import {XPathUtil} from './xpath-util.js';
 
 /**
- * @ts-check
+ * The model of this Fore scope. It holds all the intances, binding, submissions and custom functions that
+ * as required.
+ *
+ * The model is updatin by executing rebuild (as needed), recalculate and revalidate in turn.
+ *
+ * After the cycle is run all modelItems have updated their stete to reflect latest computations.
+ *
  */
 export class FxModel extends HTMLElement {
     static dataChanged = false;
@@ -103,7 +109,6 @@ export class FxModel extends HTMLElement {
         // console.time('instance-loading');
         const instances = this.querySelectorAll('fx-instance');
         if (instances.length > 0) {
-            console.group('init instances');
             const promises = [];
             instances.forEach(instance => {
                 promises.push(instance.init());
@@ -119,7 +124,6 @@ export class FxModel extends HTMLElement {
             await Fore.dispatch(this, 'model-construct-done', {model: this});
             this.inited = true;
             this.updateModel();
-            console.groupEnd();
         } else {
             // ### if there's no instance one will created
             await this.dispatchEvent(
@@ -145,17 +149,20 @@ export class FxModel extends HTMLElement {
     updateModel() {
         // console.time('updateModel');
         this.rebuild();
+/*
         if (this.skipUpdate){
             console.info('%crecalculate/revalidate skipped - no bindings', 'font-style: italic; background: #90a4ae; color:lightgrey; padding:0.3rem 5rem 0.3rem 0.3rem;display:block;width:100%;');
             return;
         }
+*/
         this.recalculate();
         this.revalidate();
+        // console.log('updateModel finished with modelItems ', this.modelItems);
+
         // console.timeEnd('updateModel');
     }
 
     rebuild() {
-        console.info('%crebuild', 'font-style: italic; background: #90a4ae; color:white; padding:0.3rem 5rem 0.3rem 0.3rem;display:block;width:100%;');
         this.mainGraph = new DepGraph(false); // do: should be moved down below binds.length check but causes errors in tests.
         this.modelItems = [];
 
@@ -172,14 +179,11 @@ export class FxModel extends HTMLElement {
         });
 
         console.log(`mainGraph`, this.mainGraph);
-        // console.log(`rebuild mainGraph calc order`, this.mainGraph.overallOrder());
+        console.log(`rebuild mainGraph calc order`, this.mainGraph.overallOrder());
 
         // this.dispatchEvent(new CustomEvent('rebuild-done', {detail: {maingraph: this.mainGraph}}));
         Fore.dispatch(this,'rebuild-done',{maingraph:this.mainGraph});
-        console.log(
-            `rebuild finished with modelItems ${this.modelItems.length} item(s)`,
-            this.modelItems,
-        );
+        console.log('mainGraph', this.mainGraph);
     }
 
     /**
@@ -188,20 +192,15 @@ export class FxModel extends HTMLElement {
      * todo: use 'changed' flag on modelItems to determine subgraph for recalculation. Flag already exists but is not used.
      */
     recalculate() {
-        console.info('%crecalculate', 'font-style: italic; background: #90a4ae; color:white; padding:0.3rem 5rem 0.3rem 0.3rem;display:block;width:100%;');
-
         if (!this.mainGraph) {
             return;
         }
 
-        console.group('### recalculate');
-        console.log('changed nodes ', this.changed);
-
-
-        console.time('recalculate');
+        // console.log('changed nodes ', this.changed);
         this.computes = 0;
 
         this.subgraph = new DepGraph(false);
+        // ### create the subgraph for all changed modelItems
         if (this.changed.length !== 0) {
             // ### build the subgraph
             this.changed.forEach(modelItem => {
@@ -246,22 +245,16 @@ export class FxModel extends HTMLElement {
             const toRefresh = [...this.changed];
             this.formElement.toRefresh = toRefresh;
             this.changed = [];
-            console.log('subgraph', this.subgraph);
-            this.dispatchEvent(
-                new CustomEvent('recalculate-done', {detail: {subgraph: this.subgraph}}),
-            );
+            Fore.dispatch(this,'recalculate-done',{graph:this.subgraph,computes:this.computes})
         } else {
             const v = this.mainGraph.overallOrder(false);
             v.forEach(path => {
                 const node = this.mainGraph.getNodeData(path);
                 this.compute(node, path);
             });
+            Fore.dispatch(this,'recalculate-done',{graph:this.mainGraph,computes:this.computes})
         }
-        console.log(`recalculated ${this.computes} modelItems`);
-
-        console.timeEnd('recalculate');
         console.log('recalculate finished with modelItems ', this.modelItems);
-        console.groupEnd();
     }
 
     /*
@@ -323,13 +316,13 @@ export class FxModel extends HTMLElement {
                             }
                         }
         */
+                const expr = modelItem.bind[property];
                 if (property === 'calculate') {
-                    const expr = modelItem.bind[property];
                     const compute = evaluateXPath(expr, modelItem.node, this);
                     modelItem.value = compute;
                     modelItem.readonly = true; // calculated nodes are always readonly
                 } else if (property !== 'constraint' && property !== 'type') {
-                    const expr = modelItem.bind[property];
+                    // ### re-compute the Boolean value of all facets expect 'constraint' and 'type' which are handled in revalidate()
                     if (expr) {
                         const compute = evaluateXPathToBoolean(expr, modelItem.node, this);
                         modelItem[property] = compute;
@@ -363,11 +356,9 @@ export class FxModel extends HTMLElement {
      *
      */
     revalidate() {
-        console.info('%crevalidate', 'font-style: italic; background: #90a4ae; color:white; padding:0.3rem 5rem 0.3rem 0.3rem;display:block;width:100%;');
 
         if (this.modelItems.length === 0) return true;
 
-        console.group('### revalidate');
         console.time('revalidate');
 
         // reset submission validation
@@ -384,7 +375,7 @@ export class FxModel extends HTMLElement {
                         */
                 if (typeof bind.hasAttribute === 'function' && bind.hasAttribute('constraint')) {
                     const constraint = bind.getAttribute('constraint');
-                    if (constraint) {
+                    if (constraint && modelItem.node) {
                         const compute = evaluateXPathToBoolean(constraint, modelItem.node, this);
                         // console.log('modelItem validity computed: ', compute);
                         modelItem.constraint = compute;
@@ -400,7 +391,6 @@ export class FxModel extends HTMLElement {
                         modelItem.required = compute;
                         this.formElement.addToRefresh(modelItem); // let fore know that modelItem needs refresh
                         if (!modelItem.node.textContent) {
-                            console.log('modelItem required check failed: ');
                             valid = false;
                         }
                         // if (!compute) valid = false;
@@ -417,12 +407,16 @@ export class FxModel extends HTMLElement {
                 }
             }
         });
-        console.timeEnd('revalidate');
         console.log('modelItems after revalidate: ', this.modelItems);
-        console.groupEnd();
         return valid;
     }
 
+    addChanged(modelItem){
+        if(this.inited){
+            this.changed.push(modelItem);
+        }
+    }
+
     /**
      *
      * @param node
@@ -455,7 +449,11 @@ export class FxModel extends HTMLElement {
         // console.log('instances array ',Array.from(this.instances));
 
         const instArray = Array.from(this.instances);
-        return instArray.find(inst => inst.id === id);
+        const found = instArray.find(inst => inst.id === id);
+        if(!found){
+            return this.getDefaultInstance(); // if id is not found always defaults to first in doc order
+        }
+        return found;
     }
 
     evalBinding(bindingExpr) {

package/src/fx-submission.js

@@ -3,6 +3,7 @@ import {Relevance} from './relevance.js';
 import {foreElementMixin} from './ForeElementMixin.js';
 import {evaluateXPathToString, evaluateXPath} from './xpath-evaluation.js';
 import getInScopeContext from './getInScopeContext.js';
+import {XPathUtil} from "./xpath-util.js";
 
 /**
  * todo: validate='false'
@@ -11,6 +12,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     constructor() {
         super();
         this.attachShadow({mode: 'open'});
+        this.parameters = new Map();
     }
 
     connectedCallback() {
@@ -45,9 +47,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
             ? this.getAttribute('serialization')
             : 'xml';
 
-        // if (!this.hasAttribute('url')) throw new Error(`url is required for submission: ${this.id}`);
-        if (!this.hasAttribute('url')) console.warn(`url is required for submission: ${this.id}`);
-        this.url = this.getAttribute('url');
+        this.url = this.hasAttribute('url') ? this.getAttribute('url'):null;
 
         this.targetref = this.hasAttribute('targetref') ? this.getAttribute('targetref') : null;
 
@@ -90,31 +90,15 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
                 return;
             }
         }
-        console.log('model updated....');
         await this._serializeAndSend();
     }
 
-    /**
-     * resolves template expressions for a single attribute
-     * @param expr the attribute value to evaluate
-     * @param node the attribute node used for scoped resolution
-     * @returns {*}
-     * @private
-     */
-    _evaluateAttributeTemplateExpression(expr, node) {
-        const matches = expr.match(/{[^}]*}/g);
-        if (matches) {
-            matches.forEach(match => {
-                console.log('match ', match);
-                const naked = match.substring(1, match.length - 1);
-                const inscope = getInScopeContext(node, naked);
-                const result = evaluateXPathToString(naked, inscope, this.getOwnerForm());
-                const replaced = expr.replaceAll(match, result);
-                console.log('replacing ', expr, ' with ', replaced);
-                expr = replaced;
-            });
+    _getProperty(attrName){
+        if(this.parameters.has(attrName)){
+            return this.parameters.get(attrName);
+        } else {
+            return this.getAttribute(attrName);
         }
-        return expr;
     }
 
     /**
@@ -123,18 +107,23 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
      * @private
      */
     async _serializeAndSend() {
-        const resolvedUrl = this._evaluateAttributeTemplateExpression(this.url, this);
-
+        const url = this._getProperty('url');
+        const resolvedUrl = this.evaluateAttributeTemplateExpression(url,this);
+        console.log('resolvedUrl',resolvedUrl);
         const instance = this.getInstance();
-        console.log('instance type', instance.type);
+        if (!instance) {
+            Fore.dispatch(this, 'warn', {message: `instance not found ${instance.getAttribute('id')}`})
+        }
+        const instType = instance.getAttribute('type');
+        // console.log('instance type', instance.type);
 
         let serialized;
         if (this.serialization === 'none') {
             serialized = undefined;
         } else {
             // const relevant = this.selectRelevant(instance.type);
-            const relevant = Relevance.selectRelevant(this, instance.type);
-            serialized = this._serialize(instance.type, relevant);
+            const relevant = Relevance.selectRelevant(this, instType);
+            serialized = this._serialize(instType, relevant);
         }
 
         // let serialized = serializer.serializeToString(relevant);
@@ -150,6 +139,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
             this._handleResponse(data);
             // this.dispatch('submit-done', {});
             Fore.dispatch(this, 'submit-done', {});
+            this.parameters.clear();
             return;
         }
 
@@ -162,9 +152,10 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
                 const serialized = localStorage.getItem(key);
                 if (!serialized) {
                     Fore.dispatch(this, 'submit-error', {message: `Error reading key ${key} from localstorage`});
+                    this.parameters.clear();
                     return;
                 }
-                let data = this._parse(serialized, instance);
+                const data = this._parse(serialized, instance);
                 this._handleResponse(data);
                 if (this.method === 'consume') {
                     localStorage.removeItem(key);
@@ -191,7 +182,6 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
 
         // ### setting headers
         const headers = this._getHeaders();
-        console.log('headers', headers);
 
         if (!this.methods.includes(this.method.toLowerCase())) {
             // this.dispatch('error', { message: `Unknown method ${this.method}` });
@@ -201,8 +191,10 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
         try {
             const response = await fetch(resolvedUrl, {
                 method: this.method,
-                mode: 'cors',
-                credentials: 'include',
+                /*
+                                mode: 'cors',
+                                credentials: 'include',
+                */
                 headers,
                 body: serialized,
             });
@@ -220,32 +212,34 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
                 contentType.startsWith('text/markdown')
             ) {
                 const text = await response.text();
-                this._handleResponse(text);
+                this._handleResponse(text, resolvedUrl,contentType);
             } else if (contentType.startsWith('application/json')) {
                 const json = await response.json();
-                this._handleResponse(json);
+                this._handleResponse(json, resolvedUrl,contentType);
             } else if (contentType.startsWith('application/xml')) {
                 const text = await response.text();
                 const xml = new DOMParser().parseFromString(text, 'application/xml');
-                this._handleResponse(xml);
+                this._handleResponse(xml, resolvedUrl,contentType);
             } else {
                 const blob = await response.blob();
-                this._handleResponse(blob);
+                this._handleResponse(blob, resolvedUrl,contentType);
             }
 
             // this.dispatch('submit-done', {});
             Fore.dispatch(this, 'submit-done', {});
         } catch (error) {
             Fore.dispatch(this, 'submit-error', {error: error.message});
+        } finally {
+            this.parameters.clear();
         }
     }
 
     _parse(serialized, instance) {
         let data = null;
-        if (serialized && instance.type === 'xml') {
+        if (serialized && instance.getAttribute('type') === 'xml') {
             data = new DOMParser().parseFromString(serialized, 'application/xml');
         }
-        if (serialized && instance.type === 'json') {
+        if (serialized && instance.getAttribute('type') === 'json') {
             data = JSON.parse(serialized);
         }
         return data;
@@ -319,8 +313,8 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
      * @param data
      * @private
      */
-    _handleResponse(data) {
-        console.log('_handleResponse ', data);
+    _handleResponse(data, resolvedUrl, contentType) {
+        // console.log('_handleResponse ', data);
 
         /*
         // ### responses need to be handled depending on their type.
@@ -358,8 +352,8 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
                 } else {
                     const instanceData = data;
                     targetInstance.instanceData = instanceData;
-                    console.log('### replaced instance ', this.getModel().instances);
-                    console.log('### replaced instance ', targetInstance.instanceData);
+                    // console.log('### replaced instance ', this.getModel().instances);
+                    // console.log('### replaced instance ', targetInstance.instanceData);
                 }
 
                 // Skip any refreshes if the model is not yet inited
@@ -373,12 +367,21 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
         }
 
         if (this.replace === 'all') {
-            document.getElementsByTagName('html')[0].innerHTML = data;
+            document.open();
+            document.write(data);
+            document.close();
+            window.location.href = resolvedUrl;
+            // document.getElementsByTagName('html')[0].innerHTML = data;
         }
-        if (this.replace === 'target') {
-            const target = this.getAttribute('target');
+        if (this.replace === 'target' && contentType.startsWith('text/html')) {
+            // const target = this.getAttribute('target');
+            const target = this._getProperty('target');
             const targetNode = document.querySelector(target);
-            targetNode.innerHTML = data;
+            if(targetNode){
+                targetNode.innerHTML = data;
+            }else{
+                Fore.dispatch(this, 'submit-error', {message:`targetNode for selector ${target} not found`});
+            }
         }
         if (this.replace === 'redirect') {
             window.location.href = data;

package/src/getInScopeContext.js

@@ -1,6 +1,4 @@
 import { evaluateXPathToFirstNode } from './xpath-evaluation.js';
-import {Fore} from './fore.js';
-
 import {XPathUtil} from './xpath-util.js';
 
 function _getElement(node) {
@@ -29,8 +27,8 @@ function _getModelInContext(node) {
 }
 
 function _getInitialContext(node, ref) {
-    const parentBind = Fore.getClosest('[ref]', node);
-    const localFore = Fore.getClosest('fx-fore', node);
+    const parentBind = XPathUtil.getClosest('[ref]', node);
+    const localFore = XPathUtil.getClosest('fx-fore', node);
 
     const model = _getModelInContext(node);
 
@@ -62,12 +60,12 @@ export default function getInScopeContext(node, ref) {
     if(parentElement.nodeName === 'FX-FORE'){
         return parentElement.getModel().getDefaultInstance().getDefaultContext();
     }
-    const parentBind = Fore.getClosest('[ref]', parentElement.parentNode);
-    if (parentBind && parentBind.nodeName === 'FX-GROUP') {
+    const parentBind = XPathUtil.getClosest('[ref]', parentElement.parentNode);
+    if (parentBind && (parentBind.nodeName === 'FX-GROUP' || parentBind.nodeName === 'FX-CONTROL')) {
         return parentBind.nodeset;
     }
 
-    const repeatItem = Fore.getClosest('fx-repeatitem', parentElement);
+    const repeatItem = XPathUtil.getClosest('fx-repeatitem', parentElement);
     if (repeatItem) {
         if (node.nodeName === 'context') {
             return evaluateXPathToFirstNode(
@@ -80,8 +78,8 @@ export default function getInScopeContext(node, ref) {
     }
 
   // ### check for repeatitems created by fx-repeat-attributes - this could possibly be unified with standard repeats
-  // const repeatItemFromAttrs = Fore.getClosest('.fx-repeatitem', parentElement);
-  // const repeatItemFromAttrs = Fore.getClosest('.fx-repeatitem', parentElement);
+  // const repeatItemFromAttrs = XPathUtil.getClosest('.fx-repeatitem', parentElement);
+  // const repeatItemFromAttrs = XPathUtil.getClosest('.fx-repeatitem', parentElement);
   const repeatItemFromAttrs = parentElement.closest('.fx-repeatitem');
 
   if (repeatItemFromAttrs) {
@@ -91,7 +89,7 @@ export default function getInScopeContext(node, ref) {
     const index = Array.from(parent.children).indexOf(repeatItemFromAttrs);
 
     // ### fetching nodeset from fx-repeat-attributes element
-    const repeatFromAttributes = Fore.getClosest('fx-repeat-attributes', parentElement);
+    const repeatFromAttributes = XPathUtil.getClosest('fx-repeat-attributes', parentElement);
     return repeatFromAttributes.nodeset[index];
   }
 

package/src/lab/fore-component.js

@@ -0,0 +1,90 @@
+/**
+ * a simple component that wraps a Fore page and puts it into shadowDom.
+ *
+ * HTML link elements passed as children will be used to construct a CSSStyleSheet that is passed
+ * to the shadowDOM.
+ * @customElement
+ */
+export class ForeComponent extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'})
+        this.src = ''
+    }
+
+    connectedCallback() {
+        this.src= this.getAttribute('src');
+        const style = `
+          :host {
+            display:block;
+          }
+        `;
+        const html = `
+          <fx-fore src="${this.src}">
+          </fx-fore>
+          <slot id="default"></slot>
+        `;
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                ${style}
+            </style>
+            ${html}
+        `;
+
+        /*
+         * wait for slotchange, then filter document.stylesheets to construct CSSStyleSheet
+         */
+        const slot = this.shadowRoot.querySelector('#default');
+        slot.addEventListener('slotchange', async event => {
+            const children = event.target.assignedElements();
+            const hostedStylesheet = children.filter(
+                linkElem => linkElem.nodeName.toUpperCase() === 'LINK',
+            );
+            if(!hostedStylesheet) return;
+            const allCSS = [...document.styleSheets]
+                .map((styleSheet) => {
+                    if(hostedStylesheet.find(sh => sh.href === styleSheet.href)){
+                        try {
+                            return [...styleSheet.cssRules]
+                                .map((rule) => rule.cssText)
+                                .join('');
+                        } catch (e) {
+                            console.log('Access to stylesheet %s is denied. Ignoring…', styleSheet.href);
+                        }
+                    }
+                })
+                .filter(Boolean)
+                .join('\n');
+
+            const sheet = new CSSStyleSheet();
+            sheet.replaceSync(allCSS);
+            this.shadowRoot.adoptedStyleSheets = [sheet];
+        });
+
+/*
+        const eventSlot = this.shadowRoot.querySelector('slot[name="event"]');
+        eventSlot.addEventListener('slotchange', async event => {
+            const children = event.target.assignedElements();
+            console.log('events', children)
+        });
+*/
+        const eventTmpl = this.querySelector('fx-action');
+        if(eventTmpl){
+            // const clone = eventTmpl.content.cloneNode(true);
+            const clone = eventTmpl.cloneNode(true);
+            this.removeChild(eventTmpl);
+            // const content = document.importNode(clone, true);
+
+            const fore = this.shadowRoot.querySelector('fx-fore');
+            // fore.appendChild(content.firstElementChild);
+            fore.appendChild(clone);
+        }
+
+    }
+
+}
+
+if (!customElements.get('fore-component')) {
+    customElements.define('fore-component', ForeComponent);
+}

package/src/lab/instance-inspector.js

@@ -0,0 +1,56 @@
+import '../../index.js';
+// import '@jinntec/jinn-codemirror/src/jinn-code-mirror.js';
+
+/**
+ * a simple component that wraps a Fore page and puts it into shadowDom.
+ *
+ * HTML link elements passed as children will be used to construct a CSSStyleSheet that is passed
+ * to the shadowDOM.
+ * @customElement
+ */
+export class InstanceInspector extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'})
+    }
+
+    connectedCallback() {
+        this.id= this.getAttribute('id');
+        const style = `
+          :host {
+            display:block;
+            background:blue;           
+          }
+          section, fx-control, jinn-codemirror{
+            display:block;
+            width:100%;
+            height:100%;
+          }
+        `;
+        const html = `
+        <section>
+            <fx-control ref="instance('${this.id}')" as="node">
+                <label>${this.id}</label>
+                <jinn-codemirror mode="xml" class="widget"></jinn-codemirror>
+            </fx-control>
+        </section>
+        <slot></slot>
+        `;
+
+        this.innerHTML = `
+            <style>
+                ${style}
+            </style>
+            ${html}
+        `;
+
+
+        this.closest('fx-fore').refresh();
+
+    }
+
+}
+
+if (!customElements.get('instance-inspector')) {
+    customElements.define('instance-inspector', InstanceInspector);
+}

package/src/lab/template.html

@@ -0,0 +1,16 @@
+<fx-fore>
+  <fx-message event="ready">hey from component</fx-message>
+                <fx-model>
+                    <fx-instance>
+                        <data>
+                            <greeting>Hello Universe</greeting>
+                        </data>
+                    </fx-instance>
+                </fx-model>
+
+                <div class="static {greeting}">Greeting: {greeting}</div>
+                <fx-control ref="greeting" update-event="input">
+                    <label>Hey!</label>
+                </fx-control>
+<!--                <slot></slot>-->
+</fx-fore>

package/src/relevance.js

@@ -38,6 +38,19 @@ export class Relevance {
         const { attributes } = n;
         if (attributes) {
           Array.from(attributes).forEach(attr => {
+            if (element.nonrelevant === 'empty' && !Relevance._isRelevant(element, attr)) {
+              clone.setAttribute(attr.nodeName, '');
+            }else
+            if (Relevance._isRelevant(element, attr)) {
+              clone.setAttribute(attr.nodeName, attr.value);
+            } else {
+              // if (element.nonrelevant === 'empty') {
+              //   clone.setAttribute(attr.nodeName, '');
+              // } else{
+                clone.removeAttribute(attr.nodeName);
+              // }
+            }
+/*
             if (Relevance._isRelevant(element, attr)) {
               clone.setAttribute(attr.nodeName, attr.value);
             } else if (element.nonrelevant === 'empty') {
@@ -45,6 +58,7 @@ export class Relevance {
             } else {
               clone.removeAttribute(attr.nodeName);
             }
+*/
           });
         }
         return Relevance._filterRelevant(element, n, clone);
@@ -56,9 +70,21 @@ export class Relevance {
 
   static _isRelevant(element, node) {
     const mi = element.getModel().getModelItem(node);
-    if (!mi || mi.relevant) {
+
+    // ### remove empty attributes as these usually are not expected in most XML languages.
+    if(node.nodeType === Node.ATTRIBUTE_NODE
+        && node.nodeValue === ''){
+      return false;
+    }
+    // ### no modelItem means no constraints
+    if(!mi){
       return true;
     }
+    // ### modelItem 'relevant' is defined and 'true'
+    if ( mi.relevant) {
+      return true;
+    }
+
     return false;
   }
 }