Merge pull request #308 from ebi-webcomponents/reflected-attributes

Several small changes

package.json

@@ -34,12 +34,12 @@
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-typescript": "11.1.6",
     "@storybook/addon-a11y": "6.5.16",
-    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-actions": "6.5.16",
     "@storybook/addon-essentials": "6.5.16",
     "@storybook/addon-links": "6.5.16",
     "@storybook/addon-storysource": "6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/builder-webpack5": "6.5.16",
+    "@storybook/manager-webpack5": "6.5.16",
     "@storybook/web-components": "6.5.16",
     "@types/d3": "7.4.3",
     "@types/jest": "29.5.12",
@@ -74,6 +74,6 @@
   ],
   "customElements": "custom-elements.json",
   "dependencies": {
-    "rimraff": "^0.0.1-security"
+    "rimraff": "0.0.1-security"
   }
 }

packages/nightingale-colored-sequence/package.json

@@ -17,8 +17,8 @@
   "author": "Gustavo Salazar <gsalazar@ebi.ac.uk>",
   "license": "ISC",
   "dependencies": {
-    "@nightingale-elements/nightingale-new-core": "^5.2.0",
-    "@nightingale-elements/nightingale-sequence": "^5.2.0",
+    "@nightingale-elements/nightingale-new-core": "5.2.0",
+    "@nightingale-elements/nightingale-sequence": "5.2.0",
     "d3": "7.9.0"
   },
   "repository": {

packages/nightingale-filter/package.json

@@ -17,9 +17,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@nightingale-elements/nightingale-manager": "^5.2.0",
-    "@nightingale-elements/nightingale-new-core": "^5.2.0",
-    "lodash-es": "^4.17.11"
+    "@nightingale-elements/nightingale-manager": "5.2.0",
+    "@nightingale-elements/nightingale-new-core": "5.2.0",
+    "lodash-es": "4.17.11"
   },
   "keywords": [
     "nightingale",

packages/nightingale-filter/src/nightingale-filter.ts

@@ -52,6 +52,10 @@ class NightingaleFilter extends NightingaleElement {
     const groupByType = groupBy(this.filters, (f: Filter) => f.type.text);
     return html`
       <style>
+        .group-title {
+          line-height: normal;
+        }
+
         .group {
           margin-bottom: 2.5rem;
         }
@@ -67,14 +71,18 @@ class NightingaleFilter extends NightingaleElement {
           outline: none;
         }
 
+        .protvista_checkbox_input {
+          margin: 0 0.25rem 0 0;
+        }
+
         .protvista_checkbox_label {
           margin-left: 0.2rem;
           line-height: 1rem;
         }
       </style>
       ${Object.entries(groupByType).map(
         ([type, group]) => html`
-          <h4>${type}</h4>
+          <h4 class="group-title">${type}</h4>
           <div class="group">
             ${group.map(
               (filterItem) => html` ${this.getCheckBox(filterItem)} `
@@ -96,6 +104,7 @@ class NightingaleFilter extends NightingaleElement {
           style=${`accent-color: ${color}`}
           checked
           .value="${name}"
+          class="protvista_checkbox_input"
           @change="${() => this.toggleFilter(name)}"
         />
         <span class="protvista_checkbox_label"> ${label} </span>

packages/nightingale-heatmap/package.json

@@ -32,7 +32,7 @@
   },
   "homepage": "https://ebi-webcomponents.github.io/nightingale/",
   "dependencies": {
-    "@nightingale-elements/nightingale-new-core": "^5.2.0",
+    "@nightingale-elements/nightingale-new-core": "5.2.0",
     "d3": "7.9.0"
   }
 }

packages/nightingale-interpro-track/package.json

@@ -33,9 +33,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@nightingale-elements/nightingale-new-core": "^5.2.0",
-    "@nightingale-elements/nightingale-track": "^5.2.0",
+    "@nightingale-elements/nightingale-new-core": "5.2.0",
+    "@nightingale-elements/nightingale-track": "5.2.0",
     "d3": "7.9.0",
-    "lodash-es": "^4.17.15"
+    "lodash-es": "4.17.15"
   }
 }

packages/nightingale-linegraph-track/package.json

@@ -32,7 +32,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@nightingale-elements/nightingale-new-core": "^5.2.0",
+    "@nightingale-elements/nightingale-new-core": "5.2.0",
     "d3": "7.9.0"
   }
 }

packages/nightingale-links/package.json

@@ -30,9 +30,9 @@
   },
   "homepage": "https://ebi-webcomponents.github.io/nightingale/",
   "dependencies": {
-    "@nightingale-elements/nightingale-new-core": "^5.2.0",
-    "@nightingale-elements/nightingale-track": "^5.2.0",
+    "@nightingale-elements/nightingale-new-core": "5.2.0",
+    "@nightingale-elements/nightingale-track": "5.2.0",
     "d3": "7.9.0",
-    "lodash-es": "^4.17.15"
+    "lodash-es": "4.17.15"
   }
 }

packages/nightingale-manager/package.json

@@ -33,6 +33,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@nightingale-elements/nightingale-new-core": "^5.2.0"
+    "@nightingale-elements/nightingale-new-core": "5.2.0"
   }
 }

packages/nightingale-manager/src/nightingale-manager.ts

@@ -4,32 +4,29 @@ import NightingaleElement from "@nightingale-elements/nightingale-new-core";
 @customElement("nightingale-manager")
 class NightingaleManager extends NightingaleElement {
   @property({
+    attribute: "reflected-attributes",
     converter: {
-      fromAttribute: (value): Map<string, null> | null => {
-        if (!value) {
+      fromAttribute: (reflectedAttributesString): Map<string, null> | null => {
+        if (!reflectedAttributesString) {
           return null;
         }
-        const attributes = value.split(",");
-        if (attributes.indexOf("type") !== -1)
-          throw new Error("'type' can't be used as a protvista attribute");
-        if (attributes.indexOf("value") !== -1)
-          throw new Error("'value' can't be used as a protvista attribute");
-        const mapToReturn = new Map(
-          attributes
+        const reflectedAttributes = reflectedAttributesString.split(",");
+        if (reflectedAttributes.includes("type"))
+          throw new Error("'type' can't be used as a Nightingale attribute");
+        if (reflectedAttributes.includes("value"))
+          throw new Error("'value' can't be used as a Nightingale attribute");
+        return new Map(
+          reflectedAttributes
             .filter(
               (attr: string) =>
-                !NightingaleManager.observedAttributes.includes(attr),
+                !NightingaleManager.observedAttributes.includes(attr)
             )
-            .map((attr: string) => [attr, null]),
+            .map((attr: string) => [attr, null])
         );
-        return mapToReturn;
-      },
-      toAttribute: (value: []) => {
-        return value.join(",");
       },
     },
   })
-  "reflected-attributes"?: Map<string, null> = new Map();
+  "reflectedAttributes"?: Map<string, null> = new Map();
 
   @property({ type: Number })
   length?: number;
@@ -44,29 +41,29 @@ class NightingaleManager extends NightingaleElement {
   "highlight"?: string;
 
   @state()
-  protvistaElements = new Set<HTMLElement>();
+  htmlElements = new Set<HTMLElement>();
 
   @state()
   propertyValues = new Map<string, string>();
 
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener("change", this.changeListener as EventListener);
-    this.style.display = "unset";
+    this.style.display = "block"; // check wherever we have a manager
   }
 
   override attributeChangedCallback(
     attr: string,
     previousValue: string | null,
-    newValue: string | null,
+    newValue: string | null
   ) {
     super.attributeChangedCallback(attr, previousValue, newValue);
     this.applyAttributes();
   }
 
   applyAttributes() {
-    this.protvistaElements.forEach((element: HTMLElement) => {
-      this["reflected-attributes"]?.forEach((value, type) => {
+    this.htmlElements.forEach((element: HTMLElement) => {
+      this.reflectedAttributes?.forEach((value, type) => {
         if (value === false || value === null || value === undefined) {
           element.removeAttribute(type);
         } else {
@@ -90,12 +87,12 @@ class NightingaleManager extends NightingaleElement {
   }
 
   register(element: NightingaleElement) {
-    this.protvistaElements.add(element);
+    this.htmlElements.add(element);
     this.applyAttributes();
   }
 
   unregister(element: NightingaleElement) {
-    this.protvistaElements.delete(element);
+    this.htmlElements.delete(element);
   }
 
   applyProperties(forElementId: string) {
@@ -109,7 +106,7 @@ class NightingaleManager extends NightingaleElement {
         (element as any)[type] = value;
       });
     } else {
-      this.protvistaElements.forEach((element: HTMLElement) => {
+      this.htmlElements.forEach((element: HTMLElement) => {
         if (!element) {
           return;
         }
@@ -122,11 +119,11 @@ class NightingaleManager extends NightingaleElement {
   }
 
   isRegisteredAttribute(attributeName: string) {
-    if (!this["reflected-attributes"]) {
+    if (!this.reflectedAttributes) {
       return false;
     }
     return (
-      [...this["reflected-attributes"].keys()].includes(attributeName) ||
+      [...this.reflectedAttributes.keys()].includes(attributeName) ||
       NightingaleManager.observedAttributes.includes(attributeName)
     );
   }
@@ -142,11 +139,11 @@ class NightingaleManager extends NightingaleElement {
         break;
       default:
         if (this.isRegisteredAttribute(e.detail.type)) {
-          this["reflected-attributes"]?.set(e.detail.type, e.detail.value);
+          this.reflectedAttributes?.set(e.detail.type, e.detail.value);
         }
         Object.keys(e.detail).forEach((key) => {
           if (this.isRegisteredAttribute(key)) {
-            this["reflected-attributes"]?.set(key, e.detail[key]);
+            this.reflectedAttributes?.set(key, e.detail[key]);
           }
         });
         this.applyAttributes();

packages/nightingale-msa/package.json

@@ -29,7 +29,7 @@
   },
   "homepage": "https://ebi-webcomponents.github.io/nightingale/",
   "dependencies": {
-    "@nightingale-elements/nightingale-new-core": "^5.2.0",
+    "@nightingale-elements/nightingale-new-core": "5.2.0",
     "d3": "7.9.0"
   }
 }