IDS webapp with some basic read/write functionality

src/ifctester/ifctester/facet.py

@@ -77,13 +77,16 @@ class Facet:
             templates = self.requirement_templates
 
         for template in templates:
+            total_variables = len(template) - len(template.replace("{", ""))
+            total_replacements = 0
             for key in self.parameters:
                 key = key.replace("@", "")
                 value = getattr(self, key)
                 key_variable = "{" + key + "}"
                 if value is not None and key_variable in template:
                     template = template.replace(key_variable, str(value))
-                if "{" not in template:
+                    total_replacements += 1
+                if total_replacements == total_variables:
                     return template
 
     def to_ids_value(self, parameter):
@@ -574,7 +577,7 @@ class Restriction:
 
     def __str__(self):
         if self.type == "enumeration":
-            msg = "one of '%s'" % "' or '".join(self.options)
+            return "one of '%s'" % "' or '".join(self.options)
         elif self.type == "bounds":
             bounds = {
                 "minInclusive": "larger or equal ",
@@ -582,15 +585,14 @@ class Restriction:
                 "minExclusive": "larger than ",
                 "maxExclusive": "smaller than ",
             }
-            msg = "of value %s" % ", and ".join([bounds[x] + str(self.options[x]) for x in self.options])
+            return "of value %s" % ", and ".join([bounds[x] + str(self.options[x]) for x in self.options])
         elif self.type == "length":
-            msg = "with %s letters" % " and ".join(self.options)
+            return "%s letters long" % " and ".join(self.options)
         elif self.type == "pattern":
-            msg = "with pattern '%s'" % self.options
+            return "the pattern '%s'" % self.options
         # TODO add fractionDigits
         # TODO add totalDigits
         # TODO add whiteSpace
-        return msg
 
 
 class Result:

src/ifctester/webapp/www/app.js

@@ -0,0 +1,869 @@
+"use strict";
+
+feather.replace()
+
+var ns = 'http://standards.buildingsmart.org/IDS';
+var xs = 'http://www.w3.org/2001/XMLSchema';
+
+class IDSContainer extends HTMLElement {
+    connectedCallback() {
+        this.ids = null;
+        this.containerId = crypto.randomUUID();
+    }
+}
+
+class IDSInfo extends HTMLElement {
+    load(idsElement) {
+        this.idsElement = idsElement;
+        var idsInfoElements = this.getElementsByTagName('ids-info-element');
+        for (var i=0; i<idsInfoElements.length; i++) {
+            var name = idsInfoElements[i].attributes['name'].value;
+            idsInfoElements[i].load(idsElement, idsElement.getElementsByTagNameNS(ns, name)[0]);
+        }
+    }
+}
+
+class IDSInfoElement extends HTMLElement {
+    connectedCallback() {
+        this.contentEditable = true;
+        this.addEventListener('input', this.input);
+        this.addEventListener('blur', this.blur);
+        this.defaultValue = this.textContent;
+        if (this.defaultValue == 'date()') {
+            this.defaultValue = new Date().toISOString().split('T')[0];
+            this.textContent = this.defaultValue;
+        }
+        this.title = this.attributes['name'].value.replace(/^\w/, (c) => c.toUpperCase());
+    }
+
+    load(idsParentElement, idsElement) {
+        this.idsElement = idsElement;
+        this.idsParentElement = idsParentElement;
+        if (idsElement) {
+            this.textContent = idsElement.textContent;
+        }
+        this.idsElement ? this.classList.remove('null') : this.classList.add('null');
+        this.validate() ? this.classList.remove('error') : this.classList.add('error');
+    }
+
+    input(e) {
+        if ( ! this.idsElement && this.textContent) {
+            this.add();
+        }
+        this.idsElement ? this.idsElement.textContent = this.textContent : null;
+        this.idsElement ? this.classList.remove('null') : this.classList.add('null');
+        this.validate() ? this.classList.remove('error') : this.classList.add('error');
+    }
+
+    blur(e) {
+        if (this.idsElement && ( ! this.textContent)) {
+            this.remove();
+        }
+        if ( ! this.textContent) {
+            this.textContent = this.defaultValue;
+        }
+        this.idsElement ? this.classList.remove('null') : this.classList.add('null');
+        this.validate() ? this.classList.remove('error') : this.classList.add('error');
+    }
+
+    validate() {
+        if (this.attributes['name'].value == 'author') {
+            return this.textContent.match(new RegExp('[^@]+@[^\.]+\..+')) != null;
+        } else if (this.attributes['name'].value == 'date') {
+            return this.textContent.match(new RegExp('[0-9]{4}-[0-9]{2}-[0-9]{2}')) != null;
+        }
+        return true;
+    }
+
+    add() {
+        var container = this.closest('ids-container');
+        this.idsElement = container.ids.createElementNS(ns, this.attributes["name"].value);
+        this.idsElement.textContent = this.textContent;
+        this.idsParentElement.appendChild(this.idsElement);
+    }
+
+    remove() {
+        this.idsParentElement.removeChild(this.idsElement);
+        this.idsElement = null;
+    }
+}
+
+class IDSSpecRemove extends HTMLElement {
+    connectedCallback() {
+        this.addEventListener('click', this.click);
+    }
+
+    click(e) {
+        var specs = this.closest('ids-specs');
+        var spec = this.closest('ids-spec');
+        specs.idsElement.removeChild(spec.idsElement);
+        specs.idsElement.dispatchEvent(new Event('ids-spec-remove'));
+    }
+}
+
+class IDSSpecMove extends HTMLElement {
+    connectedCallback() {
+        this.direction = this.attributes['direction'].value;
+        this.addEventListener('click', this.click);
+    }
+
+    load(idsElement) {
+        var self = this;
+        this.idsElement = idsElement;
+        this.render();
+    }
+
+    render() {
+        var index = Array.prototype.indexOf.call(this.idsElement.parentElement.children, this.idsElement);
+        if (index == 0 && this.direction == 'up') {
+            this.classList.add('hidden');
+        } else if (index == this.idsElement.parentElement.children.length - 1 && this.direction == 'down') {
+            this.classList.add('hidden');
+        } else {
+            this.classList.remove('hidden');
+        }
+    }
+
+    click(e) {
+        if (this.direction == "up") {
+            this.idsElement.parentElement.insertBefore(this.idsElement, this.idsElement.previousElementSibling);
+        } else if (this.direction == "down") {
+            var nextNextSibling = this.idsElement.nextElementSibling.nextElementSibling;
+            this.idsElement.parentElement.insertBefore(this.idsElement, nextNextSibling);
+        }
+        this.idsElement.parentElement.dispatchEvent(new Event('ids-spec-move'));
+    }
+}
+
+class IDSSpecAdd extends HTMLElement {
+    connectedCallback() {
+        this.addEventListener('click', this.click);
+    }
+
+    click(e) {
+        var specs = this.closest('ids-specs');
+        var spec = this.closest('ids-spec');
+
+        var container = this.closest('ids-container');
+        var newSpec = container.ids.createElementNS(ns, "specification");
+        var newApplicability = container.ids.createElementNS(ns, "applicability");
+        var newRequirements = container.ids.createElementNS(ns, "requirements");
+
+        specs.idsElement.insertBefore(newSpec, spec.idsElement.nextElementSibling);
+        newSpec.appendChild(newApplicability);
+        newSpec.appendChild(newRequirements);
+        specs.idsElement.dispatchEvent(new Event('ids-spec-add'));
+    }
+}
+
+class IDSSpecHandle extends HTMLElement {
+    connectedCallback() {
+        this.addEventListener('dragstart', this.dragstart);
+        this.addEventListener('dragend', this.dragend);
+    }
+
+    dragstart(e) {
+        var snippet = this.getElementsByClassName('snippet')[0];
+        snippet.style.left = e.clientX + 'px';
+        snippet.style.top = e.clientY + 'px';
+        var dropzones = document.getElementsByTagName('ids-spec');
+        for (var i=0; i<dropzones.length; i++) {
+            dropzones[i].classList.add('dropzone');
+        }
+        snippet.classList.remove('hidden');
+        this.closest('ids-spec').style.opacity = '0.3';
+    }
+
+    dragend(e) {
+        var snippet = this.getElementsByClassName('snippet')[0];
+        snippet.classList.add('hidden');
+        this.closest('ids-spec').style.opacity = '1';
+        var dropzones = document.getElementsByTagName('ids-spec');
+        for (var i=0; i<dropzones.length; i++) {
+            dropzones[i].classList.remove('dropzone');
+            dropzones[i].classList.remove('dragover');
+        }
+    }
+}
+
+class IDSSpecCounter extends HTMLElement {
+    connectedCallback() {
+        var spec = this.closest('ids-spec');
+        var index = Array.prototype.indexOf.call(spec.parentElement.children, spec);
+        this.textContent = index;
+    }
+}
+
+class IDSSpecAnchor extends HTMLElement {
+    connectedCallback() {
+        var spec = this.closest('ids-spec');
+        var index = Array.prototype.indexOf.call(spec.parentElement.children, spec);
+        var container = this.closest('ids-container');
+        var a = this.getElementsByTagName('a')[0];
+        a.setAttribute('href', '#' + container.containerId + '-' + index);
+    }
+}
+
+class IDSSpecTarget extends HTMLElement {
+    connectedCallback() {
+        var spec = this.closest('ids-spec');
+        var index = Array.prototype.indexOf.call(spec.parentElement.children, spec);
+        var container = this.closest('ids-container');
+        var a = document.createElement("a");
+        a.setAttribute('id', container.containerId + '-' + index);
+        this.appendChild(a);
+    }
+}
+
+class IDSSpecAttribute extends HTMLElement {
+    connectedCallback() {
+        this.name = this.attributes['name'].value;
+        if ( ! this.attributes['readonly']) {
+            this.contentEditable = true;
+            this.addEventListener('input', this.input);
+            this.addEventListener('blur', this.blur);
+        }
+        this.defaultValue = this.textContent;
+    }
+
+    load(idsElement) {
+        var self = this;
+        this.idsElement = idsElement;
+        this.idsElement.addEventListener('ids-spec-attribute-' + this.name, function() { self.render(); });
+        this.render();
+    }
+
+    render() {
+        this.idsAttribute = this.idsElement.attributes[this.name];
+        if (this.idsAttribute) {
+            if (this.textContent != this.idsAttribute.value) {
+                this.textContent = this.idsAttribute.value;
+            }
+        }
+        this.idsAttribute ? this.classList.remove('null') : this.classList.add('null');
+        if ( ! this.textContent) {
+            this.textContent = this.defaultValue;
+        }
+    }
+
+    input(e) {
+        if ( ! this.idsAttribute && this.textContent) {
+            this.add();
+        }
+        if (this.idsAttribute && ! this.textContent) {
+            this.remove();
+        }
+        if (this.idsAttribute) {
+            this.idsAttribute.value = this.textContent;
+        }
+        this.idsElement.dispatchEvent(new Event('ids-spec-attribute-' + this.name));
+    }
+
+    blur(e) {
+        if (this.idsAttribute && ! this.textContent) {
+            this.remove();
+            this.idsElement.dispatchEvent(new Event('ids-spec-attribute-' + this.name));
+        }
+    }
+
+    add() {
+        this.idsElement.setAttribute(this.attributes['name'].value, this.textContent);
+        this.idsAttribute = this.idsElement.attributes[this.attributes['name'].value];
+    }
+
+    remove() {
+        this.idsElement.attributes.removeNamedItem(this.attributes['name'].value);
+        this.idsAttribute = null;
+    }
+}
+
+class IDSFacets extends HTMLElement {
+    load(idsElement) {
+        var self = this;
+        this.idsElement = idsElement;
+        this.idsElement.addEventListener('ids-facet-remove', function() { self.render(); });
+        this.render();
+    }
+
+    render() {
+        var template = this.getElementsByTagName('template')[0];
+
+        var children = [];
+        for (var i=0; i<this.children.length; i++) {
+            if (this.children[i] != template) {
+                children.push(this.children[i]);
+            }
+        }
+
+        for (var i=0; i<children.length; i++) {
+            this.removeChild(children[i]);
+        }
+
+        var facets = this.idsElement.children;
+        for (var i=0; i<facets.length; i++) {
+            this.appendChild(template.content.cloneNode(true));
+            var facet = this.children[this.children.length-1];
+            var facetElements = facet.getElementsByTagName('ids-facet');
+            for (var j=0; j<facetElements.length; j++) {
+                facetElements[j].load(facets[i]);
+            }
+            var facetInstructionsElements = facet.getElementsByTagName('ids-facet-instructions');
+            for (var j=0; j<facetInstructionsElements.length; j++) {
+                facetInstructionsElements[j].load(facets[i]);
+            }
+        }
+        feather.replace();
+    }
+}
+
+class IDSFacetInstructions extends HTMLElement {
+    connectedCallback() {
+        this.contentEditable = true;
+        this.defaultValue = this.textContent;
+        this.addEventListener('input', this.input);
+        this.addEventListener('blur', this.blur);
+    }
+
+    load(idsElement) {
+        this.idsElement = idsElement;
+        this.idsAttribute = this.idsElement.attributes['instructions']
+        if (this.idsAttribute) {
+            this.textContent = this.idsAttribute.value;
+        }
+        this.idsAttribute ? this.classList.remove('null') : this.classList.add('null');
+    }
+
+    input(e) {
+        if ( ! this.idsAttribute && this.textContent) {
+            this.add();
+        }
+        this.idsAttribute ? this.idsAttribute.value = this.textContent : null;
+        this.idsAttribute ? this.classList.remove('null') : this.classList.add('null');
+    }
+
+    blur(e) {
+        if (this.idsAttribute && ! this.textContent) {
+            this.remove();
+        }
+        if ( ! this.textContent) {
+            this.textContent = this.defaultValue;
+        }
+        this.idsAttribute ? this.classList.remove('null') : this.classList.add('null');
+    }
+
+    add() {
+        this.idsElement.setAttribute('instructions', this.textContent);
+        this.idsAttribute = this.idsElement.attributes['instructions'];
+    }
+
+    remove() {
+        this.idsElement.attributes.removeNamedItem('instructions');
+        this.idsAttribute = null;
+    }
+}
+
+class IDSFacetRemove extends HTMLElement {
+    connectedCallback() {
+        this.addEventListener('click', this.click);
+    }
+
+    click(e) {
+        var idsElement = this.closest('div').getElementsByTagName('ids-facet')[0].idsElement;
+        var parentElement = idsElement.parentElement;
+        parentElement.removeChild(idsElement);
+        parentElement.dispatchEvent(new Event('ids-facet-remove'));
+    }
+}
+
+class IDSFacet extends HTMLElement {
+    load(idsElement) {
+        this.idsElement = idsElement;
+        this.type = this.attributes['type'].value;
+        this.params = [];
+        if (this.idsElement.localName == 'entity') {
+            this.loadEntity();
+        } else if (this.idsElement.localName == 'attribute') {
+            this.loadAttribute()
+        } else if (this.idsElement.localName == 'classification') {
+            this.loadClassification();
+        } else if (this.idsElement.localName == 'property') {
+            this.loadProperty();
+        } else if (this.idsElement.localName == 'material') {
+            this.loadMaterial();
+        } else if (this.idsElement.localName == 'partOf') {
+            this.loadPartOf();
+        }
+
+        var paramElements = this.getElementsByTagName('ids-param');
+        for (var i=0; i<paramElements.length; i++) {
+            paramElements[i].load(this.params[i]);
+        }
+    }
+
+    renderTemplate(templates, parameters) {
+        for (var i=0; i<templates.length; i++) {
+            var hasKeys = true;
+            for (var key in parameters) {
+                if (templates[i].indexOf('{' + key + '}') == -1) {
+                    hasKeys = false;
+                    break;
+                } else {
+                    templates[i] = templates[i].replace('{' + key + '}', parameters[key]);
+                }
+            }
+            if (hasKeys) {
+                return templates[i];
+            }
+        }
+    }
+
+    loadEntity() {
+        if (this.type == 'applicability') {
+            var templates = [
+                'All {name} data',
+                'All {name} data of type {type}',
+                'All {name} data having a type of either {typeEnumeration}',
+            ];
+        } else if (this.type == 'requirement') {
+            var templates = [
+                'Shall be {name} data',
+                'Shall be {name} data of type {type}',
+                'Shall be {name} data with a type of either {typeEnumeration}',
+            ];
+        }
+
+        var parameters = {};
+
+        var name = this.idsElement.getElementsByTagNameNS(ns, 'name')[0];
+        var value = this.getIdsValue(name);
+        if (value.type == 'simpleValue') {
+            var content = this.capitalise(value.content.toLowerCase().replace('ifc', ''))
+            parameters.name = '<ids-param filter="entityName">' + content + '</ids-param>';
+            this.params.push(value.param);
+        }
+        var predefinedTypes = this.idsElement.getElementsByTagNameNS(ns, 'predefinedType');
+        if (predefinedTypes.length) {
+            value = this.getIdsValue(predefinedTypes[0]);
+            if (value.type == 'simpleValue') {
+                parameters.type = '<ids-param>' + value.content + '</ids-param>';
+                this.params.push(value.param);
+            } else if (value.type == 'enumeration') {
+                parameters.typeEnumeration = '<ids-param>' + value.content + '</ids-param>';
+                this.params.push(value.param);
+            }
+        }
+
+        this.innerHTML = this.renderTemplate(templates, parameters);
+    }
+
+    loadAttribute() {
+        if (this.type == 'applicability') {
+            var templates = [
+                'Data where the {name} is provided',
+                'Data where the {name} is {value}',
+                'Data where the {name} follows the convention of {valuePattern}',
+                'Data where the {name} is either {valueEnumeration}',
+            ];
+        } else if (this.type == 'requirement') {
+            var templates = [
+                'The {name} shall be provided',
+                'The {name} shall be {value}',
+                'The {name} shall follow the convention of {valuePattern}',
+                'The {name} shall be either {valueEnumeration}'
+            ];
+        }
+
+        var parameters = {};
+
+        var name = this.idsElement.getElementsByTagNameNS(ns, 'name')[0];
+        var value = this.getIdsValue(name);
+        if (value.type == 'simpleValue') {
+            parameters.name = '<ids-param filter="attributeName">' + this.sentence(value.content) + '</ids-param>';
+            this.params.push(value.param);
+        }
+        var values = this.idsElement.getElementsByTagNameNS(ns, 'value');
+        if (values.length) {
+            value = this.getIdsValue(values[0]);
+            if (value.type == 'simpleValue') {
+                parameters.value = '<ids-param>' + value.content + '</ids-param>';
+                this.params.push(value.param);
+            } else if (value.type == 'pattern') {
+                parameters.valuePattern = '<ids-param class="pattern">' + value.content + '</ids-param>';
+                this.params.push(value.param);
+            } else if (value.type == 'enumeration') {
+                parameters.valueEnumeration = '<ids-param>' + value.content + '</ids-param>';
+                this.params.push(value.param);
+            }
+        }
+
+        this.innerHTML = this.renderTemplate(templates, parameters);
+    }
+
+    loadClassification() {
+        if (this.type == 'applicability') {
+            var templates = [
+                'Data classified using {system}',
+                'Data classified as {reference}',
+                'Data classified following the convention of {referencePattern}',
+                'Data having a {system} reference of {reference}',
+                'Data having a {system} reference following the convention of {referencePattern}',
+            ];
+        } else if (this.type == 'requirement') {
+            var templates = [
+                'Shall be classified using {system}',
+                'Shall be classified as {reference}',
+                'Shall be classified following the convention of {referencePattern}',
+                'Shall have a {system} reference of {reference}',
+                'Shall have a {system} reference following the convention of {referencePattern}',
+            ];
+        }
+
+        var parameters = {};
+
+        var value;
+        var systems = this.idsElement.getElementsByTagNameNS(ns, 'system');
+        if (systems.length) {
+            value = this.getIdsValue(systems[0]);
+            if (value.type == 'simpleValue') {
+                parameters.system = '<ids-param>' + value.content + '</ids-param>';
+                this.params.push(value.param);
+            }
+        }
+        var references = this.idsElement.getElementsByTagNameNS(ns, 'value');
+        if (references.length) {
+            value = this.getIdsValue(references[0]);
+            if (value.type == 'simpleValue') {
+                parameters.reference = '<ids-param>' + value.content + '</ids-param>';
+                this.params.push(value.param);
+            } else if (value.type == 'pattern') {
+                parameters.referencePattern = '<ids-param class="pattern">' + value.content + '</ids-param>';
+                this.params.push(value.param);
+            }
+        }
+
+        this.innerHTML = this.renderTemplate(templates, parameters);
+    }
+
+    loadProperty() {
+        if (this.type == 'applicability') {
+            var templates = [
+                'Elements with {name} data in the dataset {pset}',
+                'Elements with {name} data of {value} in the dataset {pset}',
+                'Elements with {name} data following the convention of {valuePattern} in the dataset {pset}',
+                'Elements with {name} data with either {valueEnumeration} in the dataset {pset}',
+            ];
+        } else if (this.type == 'requirement') {
+            var templates = [
+                '{name} data shall be provided in the dataset {pset}',
+                '{name} data shall be {value} and in the dataset {pset}',
+                '{name} data shall follow the convention of {valuePattern} and in the dataset {pset}',
+                '{name} data shall be one of {valueEnumeration} and in the dataset {pset}',
+            ];
+        }
+
+        var parameters = {};
+
+        var name = this.idsElement.getElementsByTagNameNS(ns, 'name')[0];
+        var value = this.getIdsValue(name);
+        if (value.type == 'simpleValue') {
+            parameters.name = '<ids-param filter="propertyName">' + this.sentence(value.content) + '</ids-param>';
+            this.params.push(value.param);
+        }
+
+        var values = this.idsElement.getElementsByTagNameNS(ns, 'value');
+        if (values.length) {
+            value = this.getIdsValue(values[0]);
+            if (value.type == 'simpleValue') {
+                parameters.value = '<ids-param>' + value.content + '</ids-param>';
+                this.params.push(value.param);
+            } else if (value.type == 'pattern') {
+                parameters.valuePattern = '<ids-param class="pattern">' + value.content + '</ids-param>';
+                this.params.push(value.param);
+            } else if (value.type == 'enumeration') {
+                parameters.valueEnumeration = '<ids-param>' + value.content + '</ids-param>';
+                this.params.push(value.param);
+            }
+        }
+
+        var propertySet = this.idsElement.getElementsByTagNameNS(ns, 'propertySet')[0];
+        value = this.getIdsValue(propertySet);
+        if (value.type == 'simpleValue') {
+            parameters.pset = '<ids-param>' + value.content + '</ids-param>';
+            this.params.push(value.param);
+        }
+
+        this.innerHTML = this.renderTemplate(templates, parameters);
+    }
+
+    loadMaterial() {
+        if (this.type == 'applicability') {
+            var templates = [
+                'All data with a {value} material',
+                'All data with a material of either {valueEnumeration}',
+                'All data with a material',
+            ];
+        } else if (this.type == 'requirement') {
+            var templates = [
+                'Shall shall have a material of {value}',
+                'Shall have a material of either {valueEnumeration}',
+                'Shall have a material',
+            ];
+        }
+
+        var parameters = {};
+
+        var value;
+        var values = this.idsElement.getElementsByTagNameNS(ns, 'value');
+        if (values.length) {
+            value = this.getIdsValue(values[0]);
+            if (value.type == 'simpleValue') {
+                parameters.value = '<ids-param>' + value.content + '</ids-param>';
+                this.params.push(value.param);
+            } else if (value.type == 'pattern') {
+                parameters.valuePattern = '<ids-param class="pattern">' + value.content + '</ids-param>';
+                this.params.push(value.param);
+            } else if (value.type == 'enumeration') {
+                parameters.valueEnumeration = '<ids-param>' + value.content + '</ids-param>';
+                this.params.push(value.param);
+            }
+        }
+
+
+        this.innerHTML = this.renderTemplate(templates, parameters);
+    }
+
+    loadPartOf() {
+        var templates = ['Must be part of a {entity}']
+
+        var parameters = {};
+
+        var content = this.capitalise(this.idsElement.attributes['entity'].value.toLowerCase().replace('ifc', ''))
+        parameters.entity = '<ids-param filter="entityName">' + content + '</ids-param>';
+        this.params.push(this.idsElement);
+
+        this.innerHTML = this.renderTemplate(templates, parameters);
+    }
+
+    getIdsValue(element) {
+        var simpleValues = element.getElementsByTagNameNS(ns, 'simpleValue');
+        if (simpleValues.length) {
+            return {type: 'simpleValue', param: simpleValues[0], content: simpleValues[0].textContent}
+        }
+        var restriction = element.getElementsByTagNameNS(xs, 'restriction')[0];
+        var patterns = restriction.getElementsByTagNameNS(xs, 'pattern');
+        if (patterns.length) {
+            return {type: 'pattern', param: patterns[0], content: patterns[0].attributes['value'].value}
+        }
+        var enumerations = restriction.getElementsByTagNameNS(xs, 'enumeration');
+        if (enumerations.length) {
+            var values = [];
+            for (var i=0; i<enumerations.length; i++) {
+                values.push(enumerations[i].attributes['value'].value);
+            }
+            return {type: 'enumeration', param: restriction, content: values.join(' or ')}
+        }
+    }
+
+    capitalise(text) {
+        return text.toLowerCase().replace(/^\w/, (c) => c.toUpperCase());
+    }
+
+    sentence(text) {
+        // E.g. ElevationOfSSLRelative --> Elevation Of S S L Relative
+        var words = text.match(/([A-Z]?[^A-Z]*)/g).slice(0,-1);
+        var mergedWords = [];
+        var mergedWord = '';
+        for (var i=0; i<words.length; i++) {
+            if (words[i].length == 1) {
+                mergedWord += words[i];
+                if (i == words.length-1) {
+                    mergedWords.push(mergedWord);
+                }
+            } else {
+                if (mergedWord.length) {
+                    mergedWords.push(mergedWord);
+                    mergedWord = '';
+                }
+                mergedWords.push(words[i]);
+            }
+        }
+        // E.g. Elevation Of S S L Relative --> Elevation Of SSL Relative
+        return mergedWords.join(' ');
+    }
+}
+
+class IDSParam extends HTMLElement {
+    connectedCallback() {
+        this.contentEditable = true;
+        this.addEventListener('input', this.input);
+        this.filter = this.attributes['filter'] ? this.attributes['filter'].value : null;
+    }
+
+    load(idsElement) {
+        this.idsElement = idsElement;
+    }
+
+    input(e) {
+        if (this.filter == 'entityName') {
+            this.idsElement.textContent = 'IFC' + this.textContent.toUpperCase();
+        } else if (this.filter == 'attributeName' || this.filter == 'propertyName') {
+            this.idsElement.textContent = this.textContent.replace(/\s+/g, '');
+        } else {
+            this.idsElement.textContent = this.textContent;
+        }
+    }
+}
+
+class IDSSpecs extends HTMLElement {
+    load(idsElement) {
+        var self = this;
+        this.idsElement = idsElement;
+        this.idsElement.addEventListener('ids-spec-remove', function() { self.render(); });
+        this.idsElement.addEventListener('ids-spec-add', function() { self.render(); });
+        this.idsElement.addEventListener('ids-spec-move', function() { self.render(); });
+        this.render();
+    }
+
+    render() {
+        var template = this.getElementsByTagName('template')[0];
+
+        var children = [];
+        for (var i=0; i<this.children.length; i++) {
+            if (this.children[i] != template) {
+                children.push(this.children[i]);
+            }
+        }
+
+        for (var i=0; i<children.length; i++) {
+            this.removeChild(children[i]);
+        }
+
+        var idsSpecs = this.idsElement.getElementsByTagNameNS(ns, 'specification');
+        for (var i=0; i<idsSpecs.length; i++) {
+            this.appendChild(template.content.cloneNode(true));
+            var spec = this.children[this.children.length-1];
+            spec.load(idsSpecs[i]);
+        }
+        feather.replace();
+    }
+}
+
+class IDSSpec extends HTMLElement {
+    connectedCallback() {
+        this.addEventListener('dragenter', this.dragenter);
+        this.addEventListener('dragover', this.dragover);
+        this.addEventListener('drop', this.drop);
+    }
+
+    dragenter(e) {
+        if (e.target.classList.contains('dropzone')) {
+            var dropzones = document.getElementsByTagName('ids-spec');
+            for (var i=0; i<dropzones.length; i++) {
+                dropzones[i].classList.remove('dragover');
+            }
+            e.target.classList.add('dragover');
+        }
+    }
+
+    load(idsElement) {
+        var self = this;
+        this.idsElement = idsElement;
+
+        var children = this.getElementsByTagName('ids-spec-attribute');
+        for (var i=0; i<children.length; i++) {
+            children[i].load(idsElement);
+        }
+
+        var children = this.getElementsByTagName('ids-facets');
+        for (var i=0; i<children.length; i++) {
+            children[i].load(idsElement.getElementsByTagNameNS(ns, children[i].attributes['name'].value)[0]);
+        }
+
+        var children = this.getElementsByTagName('ids-spec-move');
+        for (var i=0; i<children.length; i++) {
+            children[i].load(idsElement);
+        }
+    }
+
+    dragover(e) {
+        // The HTML draggable API is terrible.
+        e.preventDefault();
+    }
+
+    drop(e) {
+        e.preventDefault();
+    }
+}
+
+class IDSLoader extends HTMLElement {
+    connectedCallback() {
+        var self = this;
+        this.addEventListener('click', this.launchFileBrowser);
+    }
+
+    launchFileBrowser(accept, callback) {
+        var inputElement = document.createElement("input");
+        inputElement.idsLoader = this;
+        inputElement.type = "file";
+        inputElement.accept = '.xml';
+        inputElement.multiple = false;
+        inputElement.addEventListener("change", this.loadFile)
+        inputElement.dispatchEvent(new MouseEvent("click")); 
+    }
+
+    loadFile(e) {
+        var self = this.idsLoader;
+        var read = new FileReader();
+        read.readAsBinaryString(this.files[0]);
+        read.onloadend = function() {
+            var parser = new DOMParser();
+            var xml = parser.parseFromString(read.result, "text/xml")
+            var container = self.closest('ids-container')
+            container.ids = xml;
+            container.idsElement = xml;
+            window.xxx = xml; // TODO
+            self.loadSpecs(container);
+        }
+    }
+
+    loadSpecs(container) {
+        container.getElementsByTagName('ids-info')[0].load(container.ids.getElementsByTagNameNS(ns, 'info')[0]);
+        var specsElements = container.getElementsByTagName('ids-specs');
+        for (var i=0; i<specsElements.length; i++) {
+            var specs = specsElements[i];
+            specs.load(container.ids.getElementsByTagNameNS(ns, 'specifications')[0]);
+        }
+    }
+}
+
+class IDSSave extends HTMLElement {
+    connectedCallback() {
+        this.addEventListener('click', this.click);
+    }
+
+    click() {
+        var xmlString = new XMLSerializer().serializeToString(this.closest('ids-container').ids);
+        console.log(xmlString);
+    }
+}
+
+window.customElements.define('ids-container', IDSContainer);
+window.customElements.define('ids-loader', IDSLoader);
+window.customElements.define('ids-save', IDSSave);
+window.customElements.define('ids-info', IDSInfo);
+window.customElements.define('ids-info-element', IDSInfoElement);
+window.customElements.define('ids-specs', IDSSpecs);
+window.customElements.define('ids-spec', IDSSpec);
+window.customElements.define('ids-spec-handle', IDSSpecHandle);
+window.customElements.define('ids-spec-remove', IDSSpecRemove);
+window.customElements.define('ids-spec-move', IDSSpecMove);
+window.customElements.define('ids-spec-add', IDSSpecAdd);
+window.customElements.define('ids-spec-attribute', IDSSpecAttribute);
+window.customElements.define('ids-spec-counter', IDSSpecCounter);
+window.customElements.define('ids-spec-anchor', IDSSpecAnchor);
+window.customElements.define('ids-spec-target', IDSSpecTarget);
+window.customElements.define('ids-facets', IDSFacets);
+window.customElements.define('ids-facet', IDSFacet);
+window.customElements.define('ids-facet-remove', IDSFacetRemove);
+window.customElements.define('ids-facet-instructions', IDSFacetInstructions);
+window.customElements.define('ids-param', IDSParam);

src/ifctester/webapp/www/index.html

@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <title>IfcTester</title>
+        <meta name="description" content="{{meta_description}}">
+        <meta name="viewport" content="width=device-width">
+        <link rel="author" href="{{baseurl}}humans.txt">
+        <link rel="shortcut icon" href="{{baseurl}}assets/images/favicon.png">
+        <link rel="apple-touch-icon" href="{{baseurl}}images/apple-touch-icon.png">
+        <link rel="apple-touch-icon" sizes="57x57" href="{{baseurl}}images/apple-touch-icon-57x57.png">
+        <link rel="apple-touch-icon" sizes="72x72" href="{{baseurl}}images/apple-touch-icon-72x72.png">
+        <link rel="apple-touch-icon" sizes="114x114" href="{{baseurl}}images/apple-touch-icon-114x114.png">
+        <link rel="apple-touch-icon" sizes="144x144" href="{{baseurl}}images/apple-touch-icon-144x144.png">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Nova+Mono&display=swap" rel="stylesheet"> 
+        <link rel="stylesheet" href="normalize.css">
+        <link rel="stylesheet" href="style.css">
+        <!--<script src="{{baseurl}}assets/js/vendor/modernizr-2.6.2.min.js"></script>-->
+    </head>
+    <body>
+        <ifc-tester>
+            <header>
+                IfcTester
+                <a href="#"><i data-feather="plus"></i>New Spec</a>
+                <span>
+                    <a href="#"><i data-feather="settings"></i>Settings</a>
+                    <a href="#"><i data-feather="help-circle"></i>Heeeelllp!</a>
+                </span>
+            </header>
+            <ids-container>
+                <div class="ids">
+                    <div style="position: relative;">
+                        <div class="ids-controls">
+                            <ids-loader>
+                                <a href="#">
+                                    <i data-feather="upload"></i> LOAD
+                                </a>
+                            </ids-loader>
+                            <ids-save>
+                                <a href="#">
+                                    <i data-feather="download"></i> SAVE
+                                </a>
+                            </ids-save>
+                            <a href="#">
+                                <i data-feather="play"></i> AUDIT MODEL
+                            </a>
+                            <span>
+                                <a href="#">
+                                    <i data-feather="x"></i> CLOSE
+                                </a>
+                            </span>
+                        </div>
+                        <ids-info>
+                            <h1><ids-info-element name="title">My information requirements</ids-info-element></h1>
+                            <p>
+                                <i data-feather="mail"></i>
+                                <ids-info-element name="author">john@doe.com</ids-info-element>
+                                <i data-feather="tag"></i>
+                                <ids-info-element name="version">1.0.0</ids-info-element>
+                                <i data-feather="calendar"></i>
+                                <ids-info-element name="date">date()</ids-info-element>
+                                <i data-feather="crosshair"></i>
+                                <ids-info-element name="milestone">Construction</ids-info-element>
+                            </p>
+                            <p>
+                                <ids-info-element name="description">
+                                    An example suite of OpenBIM requirements for data quality audits
+                                </ids-info-element>
+                            </p>
+                            <p>
+                                &copy; <ids-info-element name="copyright">Company Inc.</ids-info-element>
+                            </p>
+                        </ids-info>
+                        <ids-specs>
+                            <template>
+                                <ids-spec>
+                                    <ids-spec-target></ids-spec-target>
+                                    <h2>
+                                        <a href="#"><i data-feather="play"></i></a>
+                                        <ids-spec-handle class="draggable" draggable="true">
+                                            <i data-feather="move"></i>
+                                            <div class="snippet hidden">Move specification</div>
+                                        </ids-spec-handle>
+                                        <ids-spec-remove>
+                                            <i data-feather="x"></i>
+                                        </ids-spec-remove>
+                                        <ids-spec-attribute name="name">Requirement name</ids-spec-attribute>
+                                    </h2>
+                                    <div class="spec-contents">
+                                        <p class="spec-description">
+                                            <ids-spec-attribute name="description">
+                                                Describe why the requirement is important to the project.
+                                            </ids-spec-attribute>
+                                        </p>
+                                        <p>
+                                            <ids-spec-attribute name="instructions">
+                                                Provide instructions on who is responsible and how to achieve it.
+                                            </ids-spec-attribute>
+                                        </p>
+                                        <h3>
+                                            <span class="controls">
+                                                <ids-facet-add>
+                                                    <i data-feather="plus"></i>
+                                                </ids-facet-add>
+                                            </span>
+                                            Applies to:
+                                        </h3>
+                                        <ids-facets name="applicability">
+                                            <template>
+                                                <div class="facet">
+                                                    <span class="facet-controls">
+                                                        <ids-facet-remove>
+                                                            <i data-feather="x"></i>
+                                                        </ids-facet-remove>
+                                                    </span>
+                                                    <ids-facet type="applicability"></ids-facet>
+                                                </div>
+                                            </template>
+                                        </ids-facets>
+                                        <h3>
+                                            <span class="controls">
+                                                <ids-facet-add>
+                                                    <i data-feather="plus"></i>
+                                                </ids-facet-add>
+                                            </span>
+                                            Requirements:
+                                        </h3>
+                                        <ids-facets name="requirements">
+                                            <template>
+                                                <div class="facet">
+                                                    <span class="facet-controls">
+                                                        <ids-facet-remove>
+                                                            <i data-feather="x"></i>
+                                                        </ids-facet-remove>
+                                                    </span>
+                                                    <ids-facet type="requirement"></ids-facet>
+                                                    <ids-facet-instructions class="requirement-instructions" title="Instructions">
+                                                        Optionally write instructions about how to achieve this requirement.
+                                                    </ids-facet-instructions>
+                                                </div>
+                                            </template>
+                                        </ids-facets>
+                                    </div>
+                                    <div class="divider">
+                                        <span class="placeholder">
+                                            <i data-feather="align-justify"></i>
+                                        </span>
+                                        <span class="controls">
+                                            <ids-spec-add>
+                                                <i data-feather="plus"></i>
+                                            </ids-spec-add>
+                                            <ids-spec-move direction="down">
+                                                <i data-feather="chevron-down"></i>
+                                            </ids-spec-move>
+                                            <ids-spec-move direction="up">
+                                            <i data-feather="chevron-up"></i>
+                                            </ids-spec-move>
+                                        </span>
+                                    </div>
+                                <ids-spec>
+                            </template>
+                        </ids-specs>
+                    </div>
+                </div>
+                <nav>
+                    <ids-specs>
+                        <template>
+                            <ids-spec>
+                                <ids-spec-counter></ids-spec-counter>
+                                <ids-spec-anchor>
+                                    <a href="#ids-spec-target">
+                                        <ids-spec-attribute name="name" readonly>Requirement name</ids-spec-attribute>
+                                    </a>
+                                </ids-spec-anchor>
+                            </ids-spec>
+                        </template>
+                    </ids-specs>
+                </nav>
+            </ids-container>
+        </ifc-tester>
+        <script src="https://unpkg.com/feather-icons"></script>
+        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+        <script>window.jQuery || document.write('<script src="{{baseurl}}assets/js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
+        <script src="app.js"></script>
+    </body>
+</html>

src/ifctester/webapp/www/normalize.css

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

src/ifctester/webapp/www/style.css

@@ -0,0 +1,369 @@
+:root {
+    --green: #ccd5ae;
+    --red: #f08080;
+    --blue: #5aa9e6;
+    --light-blue: #7fc8f8;
+    --highlight: #faedcd;
+    --fg: #444;
+}
+html {
+    height: 100%;
+	scroll-behavior: smooth;
+}
+body {
+    height: calc(100% - 40px);
+    font-size: 0.8rem;
+    background-color: #FFF;
+    font-family: 'Libre Baskerville', serif;
+    border: 0px;
+    margin: 0px;
+    padding: 0px;
+    color: var(--fg);
+    transition: 0.3s ease-out;
+}
+header {
+    background-color: #333;
+    color: var(--blue);
+    font-family: 'Nova Mono', monospace;
+    height: 40px;
+    line-height: 40px;
+    padding-left: 10px;
+    padding-right: 10px;
+    text-transform: uppercase;
+}
+header a {
+    text-decoration: none;
+    margin-left: 10px;
+}
+header a:hover {
+    color: white;
+}
+header svg {
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+    margin-top: -3px;
+    margin-right: 5px;
+}
+header span {
+    float: right;
+}
+* {
+    transition: 0.3s ease-out;
+}
+h3 {
+    font-family: 'Nova Mono', monospace;
+    text-transform: uppercase;
+    font-size: 0.8rem;
+    color: #ccc;
+}
+a {
+    color: #5aa9e6;
+}
+a:hover {
+    color: #7fc8f8;
+}
+.ids {
+    width: 700px;
+    height: calc(100%);
+    overflow: scroll;
+    float: left;
+    background-color: #f9f9f9;
+    padding-left: 20px;
+    padding-right: 20px;
+    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+}
+.ids-controls {
+    font-family: 'Nova Mono', monospace;
+    background-color: #f9f9f9;
+    background-color: #eee;
+    padding: 10px;
+    /*box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;*/
+}
+.ids-controls span {
+    float: right;
+}
+.ids-controls:hover a {
+    opacity: 1;
+    transition: 0.3s ease-out;
+}
+.ids-controls ids-loader a {
+    margin-left: 0px;
+}
+.ids-controls a {
+    margin-left: 10px;
+    font-size: 0.8rem;
+    /*
+    opacity: 0.4;
+    transition: 0.3s ease-in;
+    border-radius: 5px;
+    border: 1px solid var(--blue);
+    padding: 10px;
+    */
+    text-decoration: none;
+    cursor: pointer;
+}
+.ids-controls a svg {
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+    top: -2px;
+    position: relative;
+}
+.divider {
+    margin-top: -10px;
+    margin-bottom: 25px;
+    border-bottom: 1px dashed #ccc;
+    text-align: center;
+    color: #ccc;
+}
+.dragover {
+    background-color: var(--blue) !important;
+}
+.dropzone {
+    background-color: var(--highlight);
+}
+ids-spec .controls ids-facet-add {
+    position: absolute;
+    margin-left: -30px;
+    margin-top: -5px;
+}
+ids-spec .controls {
+    display: none;
+}
+ids-spec:hover .placeholder {
+    display: none;
+}
+ids-spec:hover .controls {
+    display: inline;
+}
+ids-spec:hover ids-spec-add:hover svg {
+    color: var(--blue);
+    cursor: pointer;
+}
+ids-spec:hover ids-spec-move:hover svg {
+    color: var(--fg);
+    cursor: pointer;
+}
+.divider svg {
+    display: inline-block;
+    position: relative;
+    top: 27px;
+    background-color: #f9f9f9;
+    padding: 10px;
+}
+ids-spec {
+    display: block;
+    padding-left: 30px;
+    overflow: hidden;
+}
+ids-spec h2 a, .spec h2 a {
+    display: none;
+}
+ids-spec:hover h2 a, .spec:hover h2 a {
+    display: inline-block;
+    position: absolute;
+    margin-left: -30px;
+    margin-top: -3px;
+    cursor: pointer;
+}
+ids-spec .draggable {
+    display: none;
+}
+ids-spec ids-spec-remove {
+    display: none;
+}
+ids-spec:hover ids-spec-remove {
+    display: inline-block;
+    position: absolute;
+    margin-left: -30px;
+    margin-top: 57px;
+    cursor: pointer;
+    color: #aaa;
+}
+ids-spec:hover ids-spec-remove:hover {
+    color: var(--red);
+}
+ids-spec:hover .draggable:hover {
+    color: var(--fg);
+}
+ids-spec:hover .draggable {
+    display: inline-block;
+    position: absolute;
+    margin-left: -30px;
+    margin-top: 27px;
+    cursor: grab;
+    color: #aaa;
+}
+ids-spec ids-spec-handle .snippet {
+    position: fixed;
+    z-index: 1;
+    background-color: var(--blue);
+    padding: 5px;
+    color: #f9f9f9;
+    text-transform: uppercase;
+    font-size: 0.7rem;
+    font-family: 'Nova Mono', monospace;
+    top: 0px;
+    left: 0px;
+}
+.spec-contents {
+    margin-left: 30px;
+    max-height: 9999px;
+}
+.spec-description {
+    font-weight: bold;
+}
+.facet .facet-controls {
+    display: none;
+}
+.facet:hover .facet-controls {
+    display: inline;
+}
+.facet:hover .facet-controls ids-facet-remove {
+    color: #aaa;
+    position: absolute;
+    margin-top: -3px;
+    margin-left: -30px;
+    cursor: pointer;
+}
+.facet:hover .facet-controls ids-facet-remove:hover svg {
+    color: var(--red);
+}
+.facet {
+    padding-left: 30px;
+    margin-bottom: 10px;
+}
+.facet .requirement-instructions.null {
+    display: none;
+}
+.facet:hover .requirement-instructions.null {
+    display: block;
+    z-index: 99;
+    position: absolute;
+    width: 300px;
+    padding: 10px;
+    border-radius: 5px;
+    background-color: #e0e0e0;
+    color: #aaa;
+    /*box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;*/
+    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+    margin-top: 2px;
+}
+.requirement-instructions {
+    display: block;
+    margin-left: 30px;
+    margin-top: 5px;
+    font-size: 0.8rem;
+}
+.pattern {
+    font-family: 'Nova Mono', monospace;
+    border-bottom: 1px dotted #555;
+    background-color: #faedcd;
+    cursor: help;
+    font-family: monospace;
+    text-overflow: ellipsis;
+    max-width: 250px;
+    white-space: nowrap;
+    overflow: hidden;
+    display: inline-block;
+    bottom: -5px;
+    position: relative;
+}
+.result-icon {
+    display: inline-block;
+    position: absolute;
+    margin-left: -30px;
+    margin-top: -2px;
+    cursor: help;
+}
+.result-icon.pass {
+    color: var(--green);
+}
+.result-icon.fail {
+    color: var(--red);
+}
+.result-icon:hover {
+    color: var(--blue);
+}
+.hidden {
+    display: none;
+}
+.error {
+    color: var(--red);
+    transition: 0.3s ease-out;
+}
+.null {
+    /*opacity: 0.4;*/
+    color: #ccc;
+    transition: 0.3s ease-out;
+}
+.null:hover {
+    color: var(--fg) !important;
+}
+[contenteditable] {
+    outline: 0px solid transparent;
+}
+*[contentEditable="true"] {
+    /*box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;*/
+    border-radius: 5px;
+    cursor: pointer;
+}
+*[contentEditable="true"]:hover {
+    outline: 1px solid var(--blue);
+    outline-offset: 2px;
+    display: inline-block;
+    /*background-color: rgba(0, 0, 0, 0.1);*/
+    background-color: #e0e0e0;
+}
+*[contentEditable="true"]:focus {
+    background-color: var(--light-blue);
+    outline: 0px;
+    padding: 5px;
+    margin: -5px;
+    display: inline-block;
+    cursor: text;
+}
+ids-info {
+    text-align: center;
+    margin-bottom: 20px;
+    display: block;
+}
+ids-info p {
+    font-size: 0.8rem;
+}
+ids-info svg {
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+}
+ids-info-element[ids-tag="description"] {
+    font-style: italic;
+}
+ids-param {
+    font-style: italic;
+}
+ids-facet {
+    display: block;
+}
+nav {
+    position: relative;
+    float: left;
+    width: 200px;
+    /*background-color: #fafafa;*/
+    overflow-x: hidden; /* Disable horizontal scroll */
+    overflow-y: scroll;
+    height: 100%;
+    /*
+    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
+    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
+    */
+    /*box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;*/
+    font-size: 0.7rem;
+}
+nav ids-spec {
+    padding-left: 0px;
+    border-bottom: 1px dashed #ccc;
+    padding: 15px;
+    display: block;
+}