Skip to content

Commit

Permalink
feat(interface): friendly dependencies & legend
Browse files Browse the repository at this point in the history
  • Loading branch information
PierreDemailly committed Aug 2, 2024
1 parent eb7b60a commit 77a4cb6
Show file tree
Hide file tree
Showing 14 changed files with 241 additions and 21 deletions.
5 changes: 5 additions & 0 deletions i18n/english.js
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,11 @@ const ui = {
"Available licenses": "Available licenses",
"Available flags": "Available flags",
default: "Search options"
},
legend: {
default: "The package is fine.",
warn: "The package has warnings.",
friendly: "The package is maintained by the same authors as the root package."
}
};

Expand Down
5 changes: 5 additions & 0 deletions i18n/french.js
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,11 @@ const ui = {
"Available licenses": "Licences disponibles",
"Available flags": "Drapeaux disponibles",
default: "Options de recherche"
},
legend: {
default: "Rien à signaler.",
warn: "La dépendance contient des menaces.",
friendly: "La dépendance est maintenu par des auteurs du package principal."
}
};

Expand Down
60 changes: 60 additions & 0 deletions public/components/legend/legend.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
#legend {
position: absolute;
right: 10px;
bottom: 40px;
z-index: 30;
max-width: 692px;
padding: 4px;
border-radius: 0 0 0 1rem;
overflow: hidden;
transition: transform 0.3s;
display: none;
flex-direction: column;
justify-content: right;
flex-wrap: wrap;
font-size: 14px;
color: #030421;
padding: 0 10px 10px 0;
border-radius: 4px;
}

.legend-box {
box-sizing: border-box;
display: inline-flex;
flex-direction: row-reverse;
align-items: center;
height: 24px;
border-radius: 4px;
}

.legend-badge {
display: inline-block;
width: 15px;
height: 15px;
margin: 0 5px;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.34);
}

.legend {
font-weight: bold;
padding-left: 6px;
display: none;
}

.legend-box:not(:hover) {
background: transparent !important;
}

.legend-box:hover {
border: 1px solid rgba(48, 56, 165, 0.6);
}

.legend-box:hover > .legend {
display: flex;
align-items: center;
}

.legend-box:hover .legend-badge {
box-shadow: none;
}
74 changes: 74 additions & 0 deletions public/components/legend/legend.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
// Import Internal Dependencies
import { COLORS } from "../../../workspaces/vis-network/src/constants.js";
import { currentLang } from "../../common/utils.js";

export class Legend {
constructor(options = {}) {
const { show = false } = options;
const lang = currentLang();
const theme = "LIGHT";
const legend = document.getElementById("legend");
const colors = COLORS[theme];

const defaultBadgeElement = document.createElement("div");
defaultBadgeElement.classList.add("legend-badge");
defaultBadgeElement.style.backgroundColor = colors.DEFAULT.color;
defaultBadgeElement.style.color = colors.DEFAULT.font.color;
const defaultElement = document.createElement("div");
defaultElement.classList.add("legend");
defaultElement.textContent = window.i18n[lang].legend.default;

const warnBadgeElement = document.createElement("div");
warnBadgeElement.classList.add("legend-badge");
warnBadgeElement.style.backgroundColor = colors.WARN.color;
warnBadgeElement.style.color = colors.WARN.font.color;
const warnElement = document.createElement("div");
warnElement.classList.add("legend");
warnElement.textContent = window.i18n[lang].legend.warn;

const friendlyBadgeElement = document.createElement("div");
friendlyBadgeElement.classList.add("legend-badge");
friendlyBadgeElement.style.backgroundColor = colors.FRIENDLY.color;
friendlyBadgeElement.style.color = colors.FRIENDLY.font.color;
const friendlyElement = document.createElement("div");
friendlyElement.classList.add("legend");
friendlyElement.textContent = window.i18n[lang].legend.friendly;

const warnBox = document.createElement("div");
warnBox.classList.add("legend-box");
warnBox.appendChild(warnBadgeElement);
warnBox.appendChild(warnElement);
warnBox.style.backgroundColor = colors.WARN.color;
warnBox.style.color = colors.WARN.font.color;

const friendlyBox = document.createElement("div");
friendlyBox.classList.add("legend-box");
friendlyBox.appendChild(friendlyBadgeElement);
friendlyBox.appendChild(friendlyElement);
friendlyBox.style.backgroundColor = colors.FRIENDLY.color;
friendlyBox.style.color = colors.FRIENDLY.font.color;

const defaultBox = document.createElement("div");
defaultBox.classList.add("legend-box");
defaultBox.appendChild(defaultBadgeElement);
defaultBox.appendChild(defaultElement);
defaultBox.style.backgroundColor = colors.DEFAULT.color;
defaultBox.style.color = colors.DEFAULT.font.color;

legend.appendChild(warnBox);
legend.appendChild(friendlyBox);
legend.appendChild(defaultBox);

if (show) {
this.show();
}
}

show() {
document.getElementById("legend").style.display = "flex";
}

hide() {
document.getElementById("legend").style.display = "none";
}
}
4 changes: 4 additions & 0 deletions public/components/views/settings/settings.css
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@ input[type="checkbox"] {
cursor: pointer;
}

label {
color: #4a5e68;
}

button.save {
height: 30px;
width: 100px;
Expand Down
9 changes: 6 additions & 3 deletions public/components/views/settings/settings.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,17 @@ export class Settings {
/** @type {HTMLInputElement[]} */
flagsCheckbox: document.querySelectorAll("input[name='flags']"),
/** @type {HTMLInputElement} */
shortcutsSection: document.querySelector(".shortcuts")
shortcutsSection: document.querySelector(".shortcuts"),
/** @type {HTMLInputElement} */
showFriendlyDependenciesCheckbox: document.querySelector("#show-friendly")
};

this.saveButton = document.querySelector(".save");
this.saveButton.addEventListener("click", () => this.saveSettings().catch(console.error));
this.saveButton.classList.add("disabled");

this.dom.defaultPackageMenu.addEventListener("change", () => this.enableSaveButton());
for (const checkbox of [...this.dom.warningsCheckbox, ...this.dom.flagsCheckbox]) {
for (const checkbox of [...this.dom.warningsCheckbox, ...this.dom.flagsCheckbox, this.dom.showFriendlyDependenciesCheckbox]) {
checkbox.addEventListener("change", () => this.enableSaveButton());
}

Expand Down Expand Up @@ -154,7 +156,8 @@ export class Settings {

const newConfig = {
defaultPackageMenu: this.dom.defaultPackageMenu.value || Settings.defaultMenuName,
ignore: { flags: new Set(), warnings: new Set() }
ignore: { flags: new Set(), warnings: new Set() },
showFriendlyDependencies: this.dom.showFriendlyDependenciesCheckbox.checked
};

for (const checkbox of this.dom.warningsCheckbox) {
Expand Down
1 change: 1 addition & 0 deletions public/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
@import url("./font/mononoki/mononoki.css");

@import url("./components/locker/locker.css");
@import url("./components/legend/legend.css");
@import url("./components/popup/popup.css");
@import url("./components/file-box/file-box.css");
@import url("./components/expandable/expandable.css");
Expand Down
9 changes: 9 additions & 0 deletions public/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { Wiki } from "./components/wiki/wiki.js";
import { SearchBar } from "./components/searchbar/searchbar.js";
import { Popup } from "./components/popup/popup.js";
import { Locker } from "./components/locker/locker.js";
import { Legend } from "./components/legend/legend.js";

// Import Views Components
import { Settings } from "./components/views/settings/settings.js";
Expand Down Expand Up @@ -40,6 +41,7 @@ document.addEventListener("DOMContentLoaded", async() => {
NodeSecureNetwork.networkElementId = "dependency-graph";
const nsn = new NodeSecureNetwork(secureDataSet, { i18n: window.i18n[utils.currentLang()] });
window.locker = new Locker(nsn);
const legend = new Legend({ show: window.settings.config.showFriendlyDependencies });
new HomeView(secureDataSet, nsn);

window.addEventListener("package-info-closed", () => {
Expand Down Expand Up @@ -90,6 +92,13 @@ document.addEventListener("DOMContentLoaded", async() => {
nsn.neighbourHighlight(networkNavigation.currentNodeParams, window.i18n[utils.currentLang()]);
updateShowInfoMenu(networkNavigation.currentNodeParams);
}

if (event.detail.showFriendlyDependencies) {
legend.show();
}
else {
legend.hide();
}
});

// Initialize searchbar
Expand Down
9 changes: 9 additions & 0 deletions views/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,8 @@
<i class="icon-lock-open"></i>
<p>[[=z.token('network.unlocked')]]</p>
</div>
<div id="legend">
</div>
</div>
<div id="settings--view" class="view hidden">
<h1><i class="icon-cog"></i>[[=z.token('settings.general.title')]]</h1>
Expand Down Expand Up @@ -254,6 +256,13 @@ <h1><i class="icon-cog"></i>[[=z.token('settings.general.title')]]</h1>
<label for="flags">🎭 isDuplicate</label>
</div>
</div>

<hr>

<div>
<input type="checkbox" id="show-friendly" name="show-friendly"/>
<label for="show-friendly">Show friendly dependencies</label>
</div>
</form>
<button class="save">[[=z.token('settings.general.save')]]</button>
<div class="line">
Expand Down
21 changes: 18 additions & 3 deletions workspaces/vis-network/src/constants.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
// Import Internal Dependencies
import * as utils from "./utils.js";

/**
* SELECTED -> The color when a Node is selected.
* CONNECTED_IN -> The color for first-degree nodes connected in the selected one.
Expand Down Expand Up @@ -42,6 +39,12 @@ export const COLORS = Object.freeze({
color: "#FFF"
}
},
FRIENDLY: {
color: "#e3fde3",
font: {
color: "#0e4522"
}
},
CONNECTED_IN: {
color: "#C8E6C9",
font: {
Expand All @@ -68,6 +71,18 @@ export const COLORS = Object.freeze({
color: "#FFF"
}
},
SELECTED_GROUP: {
color: "#1A237E",
font: {
color: "#FFF"
}
},
SELECTED_LOCK: {
color: "#0D47A1",
font: {
color: "#FFF"
}
},
DEFAULT: {
color: "rgba(150, 200, 200, 0.15)",
font: {
Expand Down
28 changes: 26 additions & 2 deletions workspaces/vis-network/src/dataset.js
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,12 @@ export default class NodeSecureDataSet extends EventTarget {
this.rawEdgesData = [];
this.rawNodesData = [];

const rootDependency = dataEntries.find(([name]) => name === data.rootDependencyName);
const rootContributors = [
rootDependency[1].metadata.author,
...rootDependency[1].metadata.maintainers,
...rootDependency[1].metadata.publishers
];
for (const [packageName, descriptor] of dataEntries) {
const contributors = [descriptor.metadata.author, ...descriptor.metadata.maintainers, ...descriptor.metadata.publishers];
for (const [currVersion, opt] of Object.entries(descriptor.versions)) {
Expand Down Expand Up @@ -98,17 +104,35 @@ export default class NodeSecureDataSet extends EventTarget {
flags,
hasWarnings ? this.flagsToIgnore : new Set([...this.flagsToIgnore, "hasWarnings"])
);
const isFriendly = window.settings.config.showFriendlyDependencies & rootContributors.some(
(rootContributor) => contributors.some((contributor) => {
if (contributor.email && contributor.email === rootContributor.email) {
return true;
}
else if (contributor.name && contributor.name === rootContributor.name) {
return true;
}

return false;
})
);
opt.isFriendly = isFriendly;
this.packages.push({
id,
name: packageName,
version: currVersion,
hasWarnings,
flags: flagStr.replace(/\s/g, ""),
links
links,
isFriendly
});

const label = `<b>${packageName}@${currVersion}</b>${flagStr}\n<b>[${prettyBytes(size)}]</b>`;
const color = utils.getNodeColor(id, hasWarnings);
const color = utils.getNodeColor({
id,
hasWarnings,
isFriendly
});
color.font.multi = "html";

this.linker.set(Number(id), opt);
Expand Down
8 changes: 4 additions & 4 deletions workspaces/vis-network/src/network.js
Original file line number Diff line number Diff line change
Expand Up @@ -266,9 +266,9 @@ export default class NodeSecureNetwork {

this.highlightEnabled = false;
for (const node of allNodes) {
const { id, hasWarnings } = this.linker.get(Number(node.id));
const { id, hasWarnings, isFriendly } = this.linker.get(Number(node.id));

Object.assign(node, utils.getNodeColor(id, hasWarnings, this.theme));
Object.assign(node, utils.getNodeColor({ id, hasWarnings, theme: this.theme, isFriendly }));
}

this.lastHighlightedIds = null;
Expand Down Expand Up @@ -427,9 +427,9 @@ export default class NodeSecureNetwork {
else if (this.highlightEnabled) {
this.highlightEnabled = false;
for (const node of Object.values(allNodes)) {
const { id, hasWarnings } = this.linker.get(Number(node.id));
const { id, hasWarnings, isFriendly } = this.linker.get(Number(node.id));

Object.assign(node, utils.getNodeColor(id, hasWarnings, this.theme));
Object.assign(node, utils.getNodeColor({ id, hasWarnings, theme: this.theme, isFriendly }));
}
}

Expand Down
Loading

0 comments on commit 77a4cb6

Please sign in to comment.