fix: sort results lexicographically by labels in their order of appearance (snakemake#3293)

johanneskoester · web-flow · commit a19a0ac3c969 · 2025-02-14T15:00:57.000+01:00
&lt;!--Add a description of your PR here--&gt;

### QC
&lt;!-- Make sure that you can tick the boxes below. --&gt;

* [x] The PR contains a test case for the changes or the changes are
already covered by an existing test case.
* [x] The documentation (`docs/`) is updated to reflect the changes or
this is not necessary (e.g. if the change does neither modify the
language nor the behavior or functionalities of Snakemake).


&lt;!-- This is an auto-generated comment: release notes by coderabbit.ai
--&gt;

## Summary by CodeRabbit

- **New Features**
- **Enhanced Results Display:** Results are now organized and sorted for
clearer, more intuitive presentation.
- **Improved Navigation:** Clicking the breadcrumb now takes you back to
the main menu, streamlining the navigation experience.

&lt;!-- end of auto-generated comment: release notes by coderabbit.ai --&gt;
diff --git a/snakemake/report/html_reporter/template/components/abstract_results.js b/snakemake/report/html_reporter/template/components/abstract_results.js
@@ -100,7 +100,38 @@ class AbstractResults extends React.Component {
         if (this.isLabelled()) {
             labels = this.getLabels();
         }
-        return this.getResults().map(function ([path, entry]) {
+        let entries = this.getResults().map(function ([path, entry]) {
+            let entryLabels;
+            let key;
+            if (labels !== undefined) {
+                entryLabels = labels.map(function (label) {
+                    return entry.labels[label] || "";
+                });
+                key = labels.join();
+            } else {
+                entryLabels = [path];
+                key = path;
+            }
+
+            return {
+                key: key,
+                path: path,
+                labels: entryLabels
+            };
+        });
+
+        entries = entries.sort(function (a, b) {
+            // sort labels lexicographically, first element is the most important
+            for (let i = 0; i < a.labels.length; i++) {
+                let comparison = a.labels[i].localeCompare(b.labels[i]);
+                if (comparison !== 0) {
+                    return comparison;
+                }
+            }
+            return 0;
+        });
+
+        return entries.map(function (entry) {
             let actions = e(
                 "td",
                 { className: "p-1 text-right" },
@@ -109,7 +140,7 @@ class AbstractResults extends React.Component {
                     { className: "inline-flex gap-1", role: "group" },
                     e(
                         ResultViewButton,
-                        { resultPath: path, app: app }
+                        { resultPath: entry.path, app: app }
                     ),
                     e(
                         Button,
@@ -122,34 +153,20 @@ class AbstractResults extends React.Component {
                 )
             );
 
-            let entryLabels;
-            let key;
-            if (labels !== undefined) {
-                entryLabels = labels.map(function (label) {
-                    return e(
-                        "td",
-                        { className: "p-1" },
-                        entry.labels[label] || ""
-                    );
-                });
-                key = labels.join();
-            } else {
-                entryLabels = e(
-                    "td",
-                    { className: "p-1" },
-                    path
-                );
-                key = path;
-            }
-
             return [
                 e(
                     "tr",
-                    { key: key },
-                    entryLabels,
+                    { key: entry.key },
+                    entry.labels.map(function (labelValue) {
+                        return e(
+                            "td",
+                            { className: "p-1" },
+                            labelValue
+                        );
+                    }),
                     actions
                 )
             ];
-        })
+        });
     }
 }
diff --git a/snakemake/report/html_reporter/template/components/navbar.js b/snakemake/report/html_reporter/template/components/navbar.js
@@ -205,7 +205,8 @@ class Navbar extends React.Component {
         if (isSingleDefaultCategory()) {
             return undefined;
         }
-        return { name: "Results", func: undefined };
+        let setView = this.props.app.setView;
+        return { name: "Results", func: function () { setView({ navbarMode: "menu", category: undefined, subcategory: undefined }) } };
     }
 
     getSearchResultsBreadcrumb() {

Original file line number	Diff line number	Diff line change
`@@ -205,7 +205,8 @@ class Navbar extends React.Component {`
`205`	`205`	`if (isSingleDefaultCategory()) {`
`206`	`206`	`return undefined;`
`207`	`207`	`}`
`208`		`- return { name: "Results", func: undefined };`
	`208`	`+ let setView = this.props.app.setView;`
	`209`	`+ return { name: "Results", func: function () { setView({ navbarMode: "menu", category: undefined, subcategory: undefined }) } };`
`209`	`210`	`}`
`210`	`211`
`211`	`212`	`getSearchResultsBreadcrumb() {`