Render dependencies as links

srv/static/css/specifics.css

@@ -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 {

srv/static/img/icon/graph.svg

@@ -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>

srv/static/index.html

@@ -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>

srv/static/js/buildactionspage.js

@@ -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:

srv/static/js/genericrendering.js

@@ -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;

srv/static/js/packagerendering.js

@@ -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 renderPackageDetailsLink(row)
-export function renderDependency(value)
 {
-    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,
+            dependencies: renderDependency.bind(undefined, 'provides'),
-            optionalDependencies: renderDependency,
+            optionalDependencies: renderDependency.bind(undefined, 'provides'),
-            provides: renderDependency,
+            provides: renderDependency.bind(undefined, 'depends'),
-            replaces: renderDependency,
+            replaces: renderDependency.bind(undefined, 'provides'),
-            conflicts: renderDependency,
+            conflicts: renderDependency.bind(undefined, 'provides'),
-            libprovides: GenericRendering.renderArrayAsCommaSeparatedString,
+            libprovides: renderLibraries.bind(undefined, 'libdepends'),
-            libdepends: GenericRendering.renderArrayAsCommaSeparatedString,
+            libdepends: renderLibraries.bind(undefined, 'libprovides'),
-            'sourceInfo.makeDependencies': renderDependency,
+            'sourceInfo.makeDependencies': renderDependency.bind(undefined, 'provides'),
-            'sourceInfo.checkDependencies': renderDependency,
+            '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);
 }