feat: highlight packages (#740)

Co-authored-by: Raulo Erwan. <erwan.raulo.externe@emeria.eu>

Author: ErwanRaulo

.changeset/little-light-bulb.md

@@ -0,0 +1,6 @@
+---
+"@nodesecure/vis-network": minor
+---
+
+Visualize highlited packages with dashed yellow border
+ 

README.md

@@ -151,6 +151,7 @@ Type a package name directly to search, or prefix with a filter name followed by
 - `ext` — file extension present in the package (e.g. `.js`, `.ts`).
 - `builtin` — Node.js core module used by the package (e.g. `fs`, `path`).
 - `size` — size range (see [size-satisfies](https://github.com/NodeSecure/size-satisfies#usage-example), e.g. `>50kb`, `10kb..200kb`).
+- `highlighted` — all highlighted packages by default.
 
 ## FAQ
 

i18n/arabic.js

@@ -247,7 +247,8 @@ const ui = {
   legend: {
     default: "الحزمة بخير.",
     warn: "الحزمة بها تحذيرات.",
-    friendly: "الحزمة تتم صيانتها بواسطة نفس مؤلفي الحزمة الجذرية."
+    friendly: "الحزمة تتم صيانتها بواسطة نفس مؤلفي الحزمة الجذرية.",
+    highlighted: "الحزمة جزء من الحزم المميزة"
   },
   lockedNavigation: {
     next: "التالي",

i18n/english.js

@@ -322,13 +322,15 @@ const ui = {
       author: "name or email",
       ext: "file extension",
       builtin: "node.js module",
-      size: "e.g. >50kb"
+      size: "e.g. >50kb",
+      highlighted: "all"
     }
   },
   legend: {
     default: "The package is fine.",
     warn: "The package has warnings.",
-    friendly: "The package is maintained by the same authors as the root package."
+    friendly: "The package is maintained by the same authors as the root package.",
+    highlighted: "The package is part of highlighted packages"
   },
   lockedNavigation: {
     next: "Next",

i18n/french.js

@@ -322,13 +322,15 @@ const ui = {
       author: "nom ou email",
       ext: "extension de fichier",
       builtin: "module node.js",
-      size: "ex. >50kb"
+      size: "ex. >50kb",
+      highlighted: "all"
     }
   },
   legend: {
     default: "Rien à signaler.",
     warn: "La dépendance contient des menaces.",
-    friendly: "La dépendance est maintenu par des auteurs du package principal."
+    friendly: "La dépendance est maintenu par des auteurs du package principal.",
+    highlighted: "Le package fait partie des packages mis en évidence"
   },
   lockedNavigation: {
     next: "Suivant",

i18n/turkish.js

@@ -249,7 +249,8 @@ const ui = {
   legend: {
     default: "Paket sorunsuz.",
     warn: "Pakette uyarılar var.",
-    friendly: "Paket, kök paketin yazarlarıyla aynı kişiler tarafından bakılmaktadır."
+    friendly: "Paket, kök paketin yazarlarıyla aynı kişiler tarafından bakılmaktadır.",
+    highlighted: "Paket, vurgulanan paketlerin bir parçasıdır"
   },
   lockedNavigation: {
     next: "Sonraki",

public/components/command-palette/command-palette.js

@@ -11,6 +11,7 @@ import {
   FILTER_HAS_HELPERS,
   FILTER_MULTI_SELECT,
   PRESETS,
+  FILTER_INSTANT_CONFIRM,
   computeMatches,
   getHelperValues
 } from "./filters.js";
@@ -97,12 +98,13 @@ class CommandPalette extends LitElement {
   #init = ({ detail: { linker, packages, network } }) => {
     this.#linker = linker;
     this.#network = network;
-    this.#packages = packages.map(({ id, name, version, flags }) => {
+    this.#packages = packages.map(({ id, name, version, flags, isHighlighted }) => {
       return {
         id: String(id),
         name,
         version,
-        flags
+        flags,
+        isHighlighted
       };
     });
   };
@@ -326,10 +328,15 @@ class CommandPalette extends LitElement {
 
   #selectHelper(helper) {
     if (helper.type === "filter") {
-      this.inputValue = `${helper.value}:`;
-      this.activeFilter = helper.value;
-      this.selectedIndex = -1;
-      this.results = [];
+      if (FILTER_INSTANT_CONFIRM.has(helper.value)) {
+        this.#addQuery(helper.value, "all");
+      }
+      else {
+        this.inputValue = `${helper.value}:`;
+        this.activeFilter = helper.value;
+        this.selectedIndex = -1;
+        this.results = [];
+      }
     }
     else {
       this.#addQuery(this.activeFilter, helper.value);

public/components/command-palette/filters.js

@@ -20,7 +20,7 @@ export const VERSION_PRESETS = [
   { label: "≥ 1.0", value: ">=1.0.0" },
   { label: "< 1.0", value: "<1.0.0" }
 ];
-export const FILTERS_NAME = new Set(["package", "version", "flag", "license", "author", "ext", "builtin", "size"]);
+export const FILTERS_NAME = new Set(["package", "version", "flag", "license", "author", "ext", "builtin", "size", "highlighted"]);
 export const PRESETS = [
   { id: "has_vulnerabilities", filter: "flag", value: "hasVulnerabilities" },
   { id: "has_scripts", filter: "flag", value: "hasScript" },
@@ -32,6 +32,8 @@ export const PRESETS = [
 export const FILTER_HAS_HELPERS = new Set(["license", "ext", "builtin", "author"]);
 // Filters where the mode persists after selection (multi-select)
 export const FILTER_MULTI_SELECT = new Set(["flag"]);
+// Filters that auto-confirm immediately on selection (no text input needed)
+export const FILTER_INSTANT_CONFIRM = new Set(["highlighted"]);
 
 /**
  * Returns per-flag package counts across the full linker.
@@ -243,6 +245,8 @@ function matchesFilter(opt, filterName, inputValue) {
     }
     case "flag":
       return opt.flags.includes(inputValue);
+    case "highlighted":
+      return inputValue === "all" ? opt.isHighlighted === true : opt.isHighlighted !== true;
     default:
       return false;
   }

public/components/legend/legend.js

@@ -90,6 +90,7 @@ class Legend extends LitElement {
        ${this.#createLegendBoxElement(colors.WARN, legend.warn)}
        ${this.#createLegendBoxElement(colors.FRIENDLY, legend.friendly)}
        ${this.#createLegendBoxElement(colors.DEFAULT, legend.default)}
+       ${this.#createLegendBoxElement(colors.HIGHLIGHTED, legend.highlighted)}
     </div>
     `;
   }
@@ -98,7 +99,7 @@ class Legend extends LitElement {
     theme,
     text
   ) {
-    const style = `background-color: ${theme.color}; color: ${theme.font.color};`;
+    const style = `background-color: ${theme.color}; color: ${(theme.font ?? COLORS.LIGHT.DEFAULT.font).color};`;
 
     return html`
     <div class="legend-box" style=${style}>

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

@@ -238,7 +238,7 @@ width: 16px;
           const { packages, email, url = null, npmAvatar } = data;
           const personClasses = {
             person: true,
-            highlighted: this.secureDataSet.isHighlighted(data)
+            highlighted: this.secureDataSet.isHighlightedContact(data)
           };
 
           return html`
@@ -289,9 +289,9 @@ width: 16px;
 
   #highlightContacts(authors) {
     const highlightedAuthors = authors
-      .filter(([_, contact]) => this.secureDataSet.isHighlighted(contact));
+      .filter(([_, contact]) => this.secureDataSet.isHighlightedContact(contact));
 
-    const authorsRest = authors.filter(([_, contact]) => !this.secureDataSet.isHighlighted(contact));
+    const authorsRest = authors.filter(([_, contact]) => !this.secureDataSet.isHighlightedContact(contact));
 
     return [...highlightedAuthors, ...authorsRest];
   }