feat(maintainers): can highlight by email

Author: clemgbld

public/components/views/home/maintainers/maintainers.css

@@ -30,6 +30,10 @@ body.dark .home--maintainers>.person {
   background: linear-gradient(to bottom, rgb(230, 240, 250) 0%, rgb(220, 235, 245) 100%);
 }
 
+body.dark .home--maintainers > .highlighted {
+  background: linear-gradient(to right, rgb(11, 3, 31) 0%, rgba(46, 10, 10, 0.8) 100%);
+}
+
 .home--maintainers>.person:hover {
   border-color: var(--secondary-darker);
   cursor: pointer;

public/components/views/home/maintainers/maintainers.js

@@ -26,25 +26,24 @@ export class Maintainers {
   }
 
   render() {
-    const highlightedContacts = new Set(this.secureDataSet.data.highlighted.contacts
-      .map(({ name }) => name));
     const authors = this.#highlightContacts([...this.secureDataSet.authors.entries()]
-      .sort((left, right) => right[1].packages.size - left[1].packages.size),
-    highlightedContacts);
+      .sort((left, right) => right[1].packages.size - left[1].packages.size));
 
     document.getElementById("authors-count").innerHTML = authors.length;
     document.querySelector(".home--maintainers")
-      .appendChild(this.generate(authors, highlightedContacts));
+      .appendChild(this.generate(authors));
   }
 
-  #highlightContacts(authors, highlightedContacts) {
-    const highlightedAuthors = authors.filter(([name]) => highlightedContacts.has(name));
-    const authorsRest = authors.filter(([name]) => !highlightedContacts.has(name));
+  #highlightContacts(authors) {
+    const highlightedAuthors = authors
+      .filter(([_, contact]) => this.secureDataSet.isHighlighted(contact));
+
+    const authorsRest = authors.filter(([_, contact]) => !this.secureDataSet.isHighlighted(contact));
 
     return [...highlightedAuthors, ...authorsRest];
   }
 
-  generate(authors, highlightedContacts) {
+  generate(authors) {
     const fragment = document.createDocumentFragment();
     const hideItems = authors.length > this.maximumMaintainers;
 
@@ -71,7 +70,7 @@ export class Maintainers {
           })
         ]
       });
-      if (highlightedContacts.has(name)) {
+      if (this.secureDataSet.isHighlighted(data)) {
         person.classList.add("highlighted");
       }
       if (hideItems && id >= this.maximumMaintainers) {

workspaces/vis-network/src/dataset.js

@@ -13,14 +13,16 @@ export default class NodeSecureDataSet extends EventTarget {
    * @param {string[]} [options.warningsToIgnore=[]]
    * @param {"light"|"dark"} [options.theme]
    */
+
+  #highligthedContacts;
+
   constructor(options = {}) {
     super();
     const {
       flagsToIgnore = [],
       warningsToIgnore = [],
       theme = "light"
     } = options;
-
     this.flagsToIgnore = new Set(flagsToIgnore);
     this.warningsToIgnore = new Set(warningsToIgnore);
     this.theme = theme;
@@ -76,6 +78,18 @@ export default class NodeSecureDataSet extends EventTarget {
 
     this.warnings = data.warnings;
 
+    this.#highligthedContacts = data.highlighted.contacts
+      .reduce((acc, { name, email }) => {
+        if (name) {
+          acc.names.add(name);
+        }
+        if (email) {
+          acc.emails.add(email);
+        }
+
+        return acc;
+      }, { names: new Set(), emails: new Set() });
+
     const dataEntries = Object.entries(data.dependencies);
     this.dependenciesCount = dataEntries.length;
 
@@ -210,4 +224,8 @@ export default class NodeSecureDataSet extends EventTarget {
 
     return { nodes, edges };
   }
+
+  isHighlighted(contact) {
+    return this.#highligthedContacts.names.has(contact.name) || this.#highligthedContacts.emails.has(contact.email);
+  }
 }

workspaces/vis-network/test/dataset-payload.json

@@ -1,6 +1,37 @@
 {
   "id": "abcde",
   "rootDepencyName": "pkg1",
+  "highlighted": {
+    "contacts": [
+      {
+        "email": "[email protected]",
+        "dependencies": [
+          "frequency-set",
+          "sec-literal",
+          "js-x-ray"
+        ]
+      },
+    {
+        "name": "Rich Harris",
+        "email": "[email protected]",
+        "dependencies": [
+          "frequency-set",
+          "sec-literal",
+          "js-x-ray"
+        ]
+      },
+      {
+        "name": "Sindre Sorhus",
+        "dependencies": [
+          "is-svg",
+          "ansi-regex",
+          "strip-ansi",
+          "is-fullwidth-code-point",
+          "string-width"
+        ]
+      }
+    ]
+  },
   "dependencies": {
     "pkg2": {
       "versions": {

workspaces/vis-network/test/dataset.test.js

@@ -11,7 +11,6 @@ const dataSetPayload = await getDataSetPayload();
 test("NodeSecureDataSet.init with given payload", async() => {
   const nsDataSet = new NodeSecureDataSet();
   await nsDataSet.init(dataSetPayload);
-
   assert.equal(nsDataSet.data, dataSetPayload, "should set data");
 });
 
@@ -41,6 +40,21 @@ test("NodeSecureDataSet.computeExtensions", () => {
   assert.equal(nsDataSet.extensions[".js"], 2, "should have 2 '.js' extensions'");
 });
 
+test("NodeSecureDataSet.isHighlighted", async() => {
+  const nsDataSet = new NodeSecureDataSet();
+  await nsDataSet.init(dataSetPayload);
+  assert.equal(nsDataSet.isHighlighted({ name: "Unknown" }), false, "should not be hightlighted");
+  assert.equal(nsDataSet.isHighlighted({ name: "Sindre Sorhus" }), true, "name: Sindre Sorhus should be hightlighted");
+  assert.equal(nsDataSet.isHighlighted({ name: "Rich Harris" }), true, "name: Rich Harris should be hightlighted");
+  assert.equal(nsDataSet.isHighlighted({ email: "[email protected]" }),
+    true,
+    "email: [email protected] should be hightlighted");
+
+  assert.equal(nsDataSet.isHighlighted({ email: "[email protected]" }),
+    true,
+    "email: [email protected] should be hightlighted");
+});
+
 test("NodeSecureDataSet.computeLicenses", () => {
   const nsDataSet = new NodeSecureDataSet();
   nsDataSet.computeLicense("MIT");