Render dependencies as links

This commit is contained in:
Martchus 2022-04-17 15:04:05 +02:00
parent e0920f10c1
commit 45b172cc2c
6 changed files with 70 additions and 21 deletions

View File

@ -208,6 +208,9 @@
.icon-download {
background-image: url(../img/icon/download.svg);
}
.icon-graph {
background-image: url(../img/icon/graph.svg);
}
/* actions shown on top-right corner of build actions and build action details */
.heading-actions {

View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M19.5 17C19.37 17 19.24 17 19.11 17.04L17.5 13.79C17.95 13.34 18.25 12.71 18.25 12C18.25 10.62 17.13 9.5 15.75 9.5C15.62 9.5 15.5 9.5 15.36 9.54L13.73 6.29C14.21 5.84 14.5 5.21 14.5 4.5C14.5 3.12 13.38 2 12 2S9.5 3.12 9.5 4.5C9.5 5.21 9.79 5.84 10.26 6.29L8.64 9.54C8.5 9.5 8.38 9.5 8.25 9.5C6.87 9.5 5.75 10.62 5.75 12C5.75 12.71 6.05 13.34 6.5 13.79L4.89 17.04C4.76 17 4.63 17 4.5 17C3.12 17 2 18.12 2 19.5C2 20.88 3.12 22 4.5 22S7 20.88 7 19.5C7 18.8 6.71 18.16 6.24 17.71L7.86 14.46C8 14.5 8.12 14.5 8.25 14.5C8.38 14.5 8.5 14.5 8.64 14.46L10.27 17.71C9.8 18.16 9.5 18.8 9.5 19.5C9.5 20.88 10.62 22 12 22S14.5 20.88 14.5 19.5C14.5 18.12 13.38 17 12 17C11.87 17 11.74 17 11.61 17.04L10 13.79C10.46 13.34 10.75 12.71 10.75 12S10.46 10.66 10 10.21L11.61 6.96C11.74 7 11.87 7 12 7S12.26 7 12.39 6.96L14 10.21C13.55 10.66 13.25 11.3 13.25 12C13.25 13.38 14.37 14.5 15.75 14.5C15.88 14.5 16 14.5 16.14 14.46L17.77 17.71C17.3 18.16 17 18.8 17 19.5C17 20.88 18.12 22 19.5 22S22 20.88 22 19.5C22 18.12 20.88 17 19.5 17Z" /></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -115,7 +115,7 @@
</form>
</section>
<section id="package-details-section">
<h2>Package details</h2>
<h2>Package details<span id="package-details-actions" class="heading-actions"></span></h2>
<div id="package-details-container">
<p>No package selected. Use the "Search" to find and select a package.</p>
</div>

View File

@ -623,7 +623,7 @@ function renderBuildActionDetailsTable(buildActionDetails)
displayLabels: ['Missing dependencies', 'Missing libraries'],
fieldAccessors: ['deps', 'libs'],
customRenderer: {
deps: PackageRendering.renderDependency,
deps: PackageRendering.renderDependency.bind(undefined, 'provides'),
},
});
default:

View File

@ -168,6 +168,9 @@ export function renderLink(value, row, handler, tooltip, href, middleClickHref)
if (tooltip !== undefined) {
linkElement.title = tooltip;
}
if (handler === undefined) {
return linkElement;
}
linkElement.onclick = function () {
handler(value, row);
return false;

View File

@ -4,10 +4,44 @@ import * as CustomRendering from './customrendering.js';
import * as SinglePageHelper from './singlepage.js';
import * as Utils from './utils.js';
/// \brief Renders a dependency object.
export function renderDependency(value)
export function renderPackageDetailsLink(row)
{
if (value.length < 1) {
return GenericRendering.renderLink(row.name, row, queryPackageDetails, 'Show package details', undefined,
'#package-details-section?' + encodeURIComponent(row.db + (row.dbArch ? '@' + row.dbArch : '') + '/' + row.name));
}
const modeTooltip = {provides: 'dependency', requires: 'dependency', libprovides: 'library', librequires: 'library'};
export function renderPackageSearchLink(name, mode, text)
{
const tooltip = 'Search for ' + (mode !== undefined ? modeTooltip[mode] : 'package');
if (mode === undefined) {
mode = 'name';
}
const params = '#package-search-section?name=' + encodeURIComponent(name) + '&mode=' + encodeURIComponent(mode);
return GenericRendering.renderLink(text || name, undefined, undefined, tooltip, undefined, params);
}
/// \brief Renders library names.
export function renderLibraries(mode, value)
{
if (!Array.isArray(value) || value.length < 1) {
return GenericRendering.renderArrayAsCommaSeparatedString(value);
}
const containerElement = document.createElement('span');
value.forEach(function (libraryName) {
if (containerElement.firstChild) {
containerElement.appendChild(document.createTextNode(' '));
}
containerElement.appendChild(renderPackageSearchLink(libraryName, mode));
});
return containerElement;
}
/// \brief Renders a dependency object.
export function renderDependency(mode, value)
{
if (!Array.isArray(value) || value.length < 1) {
return GenericRendering.renderArrayAsCommaSeparatedString(value);
}
const list = document.createElement('ul');
@ -22,7 +56,7 @@ export function renderDependency(value)
res += mode + dependency.version;
}
}
item.appendChild(document.createTextNode(res));
item.appendChild(renderPackageSearchLink(res, mode || 'provides'));
if (dependency.description) {
const descriptionSpan = document.createElement('span');
descriptionSpan.appendChild(document.createTextNode(' - ' + dependency.description));
@ -61,15 +95,15 @@ export function renderPackage(packageObj, withoutBasics)
},
licenses: GenericRendering.renderArrayAsCommaSeparatedString,
groups: GenericRendering.renderArrayAsCommaSeparatedString,
dependencies: renderDependency,
optionalDependencies: renderDependency,
provides: renderDependency,
replaces: renderDependency,
conflicts: renderDependency,
libprovides: GenericRendering.renderArrayAsCommaSeparatedString,
libdepends: GenericRendering.renderArrayAsCommaSeparatedString,
'sourceInfo.makeDependencies': renderDependency,
'sourceInfo.checkDependencies': renderDependency,
dependencies: renderDependency.bind(undefined, 'provides'),
optionalDependencies: renderDependency.bind(undefined, 'provides'),
provides: renderDependency.bind(undefined, 'depends'),
replaces: renderDependency.bind(undefined, 'provides'),
conflicts: renderDependency.bind(undefined, 'provides'),
libprovides: renderLibraries.bind(undefined, 'libdepends'),
libdepends: renderLibraries.bind(undefined, 'libprovides'),
'sourceInfo.makeDependencies': renderDependency.bind(undefined, 'provides'),
'sourceInfo.checkDependencies': renderDependency.bind(undefined, 'provides'),
'packageInfo.arch': function(value, row) {
const sourceInfo = row.sourceInfo;
const sourceArchs = sourceInfo !== undefined ? sourceInfo.archs : undefined;
@ -87,12 +121,6 @@ export function renderPackage(packageObj, withoutBasics)
return table;
}
export function renderPackageDetailsLink(row)
{
return GenericRendering.renderLink(row.name, row, queryPackageDetails, 'Show package details', undefined,
'#package-details-section?' + encodeURIComponent(row.db + (row.dbArch ? '@' + row.dbArch : '') + '/' + row.name));
}
function makePackageID(row)
{
return row.db + (row.dbArch ? '@' + row.dbArch : '') + '/' + row.name;
@ -111,6 +139,18 @@ function switchToPackageDetails(packageID)
SinglePageHelper.updateHashPreventingSectionInitializer('#package-details-section?' + encodeURIComponent(packageID));
}
function renderPackageActions(pkg)
{
const container = document.createElement('span');
container.appendChild(CustomRendering.renderIconLink('graph', undefined, undefined, 'Show dependend packages',
undefined, '#package-search-section?name=' + encodeURIComponent(pkg.name) + '&mode=depends'));
container.appendChild(CustomRendering.renderIconLink('table-refresh', undefined, function() {
queryPackageDetails(undefined, pkg);
return false;
}, 'Refresh package details', undefined, '#package-details-section?' + encodeURIComponent(makePackageID(pkg))));
return container;
}
export function showPackageDetails(ajaxRequest, row)
{
const packageID = makePackageID(row);
@ -133,6 +173,8 @@ export function showPackageDetails(ajaxRequest, row)
packageObj.db = row.db;
packageObj.dbArch = row.dbArch;
packageDetailsContainer.appendChild(renderPackage(packageObj, true));
const packageActions = Utils.getAndEmptyElement('package-details-actions');
packageActions.appendChild(renderPackageActions(packageObj));
switchToPackageDetails(packageID);
}