Share table sorting component & update sortable keys (conda-forge#2675)

Carreau · web-flow · commit 364611168228 · 2025-12-02T11:01:54.000+01:00
diff --git a/src/components/SortableTable/index.jsx b/src/components/SortableTable/index.jsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { useState } from "react";
+
+/**
+ * Custom hook for managing table sorting state with secondary sort support
+ * @param {string} initialSortBy - Initial sort column
+ * @param {string} initialOrder - Initial sort order ("ascending" or "descending")
+ * @returns {{ sort: object, previousSort: object, resort: function }} - Sort state, previous sort state, and resort function
+ */
+export function useSorting(initialSortBy, initialOrder = "ascending") {
+  const [sort, setSort] = useState({ by: initialSortBy, order: initialOrder });
+  const [previousSort, setPreviousSort] = useState(null);
+
+  const resort = (by) => {
+    setSort((prev) => {
+      let order = "ascending";
+      order = by === prev.by && order === prev.order ? "descending" : order;
+      // Save previous sort state (but only if it's a different column)
+      if (by !== prev.by) {
+        setPreviousSort(prev);
+      }
+      return { by, order };
+    });
+  };
+
+  return { sort, previousSort, resort };
+}
+
+/**
+ * Sortable table header component
+ * @param {string} sortKey - The key to sort by when clicked
+ * @param {object} currentSort - Current sort state { by, order }
+ * @param {function} onSort - Callback function when header is clicked
+ * @param {object} styles - CSS module styles object
+ * @param {object} style - Inline styles for the header
+ * @param {React.ReactNode} children - Header content
+ */
+export function SortableHeader({ sortKey, currentSort, onSort, styles, style, children }) {
+  const isActive = currentSort.by === sortKey;
+  const className = isActive ? styles[currentSort.order] : undefined;
+
+  return (
+    <th
+      style={{ cursor: "pointer", userSelect: "none", ...style }}
+      className={className}
+      onClick={() => onSort(sortKey)}
+    >
+      {children}
+    </th>
+  );
+}
diff --git a/src/components/StatusDashboard/current_migrations.jsx b/src/components/StatusDashboard/current_migrations.jsx
@@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
 import { measureProgress } from "@site/src/pages/status/migration";
 import styles from "./styles.module.css";
 import Link from "@docusaurus/Link";
+import { SortableHeader } from "@site/src/components/SortableTable";
 
 const COLLAPSED_KEY = "migration-collapsed";
 const SORT_KEY = "migration-sort";
@@ -135,54 +136,30 @@ function TableContent({ collapsed, name, resort, rows, select, sort, fetched })
           </th>
         </tr>
         <tr className={collapsed ? styles.collapsed : undefined}>
-          <th
-            onClick={() => resort("name")}
-            className={sort.by === "name" ? styles[sort.order] : undefined}
-          >
+          <SortableHeader sortKey="name" currentSort={sort} onSort={resort} styles={styles}>
             Name
-          </th>
-          <th
-            onClick={() => resort("status")}
-            className={sort.by === "status" ? styles[sort.order] : undefined}
-          >
+          </SortableHeader>
+          <SortableHeader sortKey="status" currentSort={sort} onSort={resort} styles={styles}>
             PRs made
-          </th>
-          <th
-            onClick={() => resort("done")}
-            className={sort.by === "done" ? styles[sort.order] : undefined}
-          >
+          </SortableHeader>
+          <SortableHeader sortKey="done" currentSort={sort} onSort={resort} styles={styles}>
             Done
-          </th>
-          <th
-            onClick={() => resort("in-pr")}
-            className={sort.by === "in-pr" ? styles[sort.order] : undefined}
-          >
+          </SortableHeader>
+          <SortableHeader sortKey="in-pr" currentSort={sort} onSort={resort} styles={styles}>
             In PR
-          </th>
-          <th
-            onClick={() => resort("awaiting-pr")}
-            className={sort.by === "awaiting-pr" ? styles[sort.order] : undefined}
-          >
+          </SortableHeader>
+          <SortableHeader sortKey="awaiting-pr" currentSort={sort} onSort={resort} styles={styles}>
             Awaiting PR
-          </th>
-          <th
-            onClick={() => resort("awaiting-parents")}
-            className={sort.by === "awaiting-parents" ? styles[sort.order] : undefined}
-          >
+          </SortableHeader>
+          <SortableHeader sortKey="awaiting-parents" currentSort={sort} onSort={resort} styles={styles}>
             Awaiting parents
-          </th>
-          <th
-            onClick={() => resort("not-solvable")}
-            className={sort.by === "not-solvable" ? styles[sort.order] : undefined}
-          >
+          </SortableHeader>
+          <SortableHeader sortKey="not-solvable" currentSort={sort} onSort={resort} styles={styles}>
             Not solvable
-          </th>
-          <th
-            onClick={() => resort("bot-error")}
-            className={sort.by === "bot-error" ? styles[sort.order] : undefined}
-          >
+          </SortableHeader>
+          <SortableHeader sortKey="bot-error" currentSort={sort} onSort={resort} styles={styles}>
             Bot error
-          </th>
+          </SortableHeader>
         </tr>
       </thead>
       <tbody className={collapsed ? styles.collapsed  : undefined}>
@@ -230,20 +207,81 @@ function TableContent({ collapsed, name, resort, rows, select, sort, fetched })
 }
 
 // Returns a comparator function for sorting table columns.
-function compare(by, order) {
+// Supports secondary sorting: when primary values are equal, falls back to previousSort
+export function compare(by, order, previousSort = null) {
+  const secondaryComparator = previousSort ? compare(previousSort.by, previousSort.order, null) : null;
+
+  const applySecondarySort = (primaryResult, a, b) => {
+    if (primaryResult !== 0 || !secondaryComparator) return primaryResult;
+    return secondaryComparator(a, b);
+  };
+
   switch (by) {
     case "name":
-      return order === "ascending"
-        ? (a, b) => a.name.localeCompare(b.name)
-        : (a, b) => b.name.localeCompare(a.name);
+      return (a, b) => {
+        const result = order === "ascending"
+          ? a.name.localeCompare(b.name)
+          : b.name.localeCompare(a.name);
+        return applySecondarySort(result, a, b);
+      };
     case "status":
-      return order === "ascending"
-        ? (a, b) => a.progress.percentage - b.progress.percentage
-        : (a, b) => b.progress.percentage - a.progress.percentage;
+      return (a, b) => {
+        const result = order === "ascending"
+          ? a.progress.percentage - b.progress.percentage
+          : b.progress.percentage - a.progress.percentage;
+        return applySecondarySort(result, a, b);
+      };
+    case "migration_status":
+      return (a, b) => {
+        const result = order === "ascending"
+          ? (a.migration_status_order ?? 999) - (b.migration_status_order ?? 999)
+          : (b.migration_status_order ?? 999) - (a.migration_status_order ?? 999);
+        return applySecondarySort(result, a, b);
+      };
+    case "ci_status":
+      return (a, b) => {
+        const aOrder = a.ci_status_order ?? 999;
+        const bOrder = b.ci_status_order ?? 999;
+        let result;
+        // Always put items with no CI status (order >= 999) last
+        if (aOrder >= 999 && bOrder < 999) result = 1;
+        else if (aOrder < 999 && bOrder >= 999) result = -1;
+        else if (aOrder >= 999 && bOrder >= 999) result = 0;
+        else {
+          // Normal sorting for items with CI status
+          result = order === "ascending" ? aOrder - bOrder : bOrder - aOrder;
+        }
+        return applySecondarySort(result, a, b);
+      };
+    case "num_descendants":
+      return (a, b) => {
+        const result = order === "ascending"
+          ? (a.num_descendants ?? 0) - (b.num_descendants ?? 0)
+          : (b.num_descendants ?? 0) - (a.num_descendants ?? 0);
+        return applySecondarySort(result, a, b);
+      };
+    case "updated_at":
+      return (a, b) => {
+        const aTimestamp = a.updated_at_timestamp ?? 0;
+        const bTimestamp = b.updated_at_timestamp ?? 0;
+        let result;
+        // Always put items with no timestamp (0) last
+        if (aTimestamp === 0 && bTimestamp !== 0) result = 1;
+        else if (aTimestamp !== 0 && bTimestamp === 0) result = -1;
+        else if (aTimestamp === 0 && bTimestamp === 0) result = 0;
+        else {
+          // Normal sorting for items with timestamps
+          result = order === "ascending" ? aTimestamp - bTimestamp : bTimestamp - aTimestamp;
+        }
+        return applySecondarySort(result, a, b);
+      };
     default:
-      return order === "ascending"
-        ? (a, b) => a.details[by].length - b.details[by].length
-        : (a, b) => b.details[by].length - a.details[by].length;
+      return (a, b) => {
+        const result = order === "ascending"
+          ? a.details[by].length - b.details[by].length
+          : b.details[by].length - a.details[by].length;
+        return applySecondarySort(result, a, b);
+      };
   }
 }
 
diff --git a/src/pages/status/migration/index.jsx b/src/pages/status/migration/index.jsx
@@ -10,6 +10,8 @@ import { Tooltip } from "react-tooltip";
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import moment from 'moment';
+import { compare } from '@site/src/components/StatusDashboard/current_migrations';
+import { useSorting, SortableHeader } from '@site/src/components/SortableTable';
 
 // GitHub GraphQL MergeStateStatus documentation
 // Reference: https://docs.github.com/en/graphql/reference/enums#mergestatestatus
@@ -337,15 +339,26 @@ function Graph(props) {
 function Table({ details }) {
   const defaultFilters = ORDERED.reduce((filters, [status, _, toggled]) => ({ ...filters, [status]: toggled }), {});
   const [filters, setState] = useState(defaultFilters);
+  const { sort, previousSort, resort } = useSorting("num_descendants", "descending");
   const feedstock = details._feedstock_status;
+
+  const CI_STATUS_ORDER = { clean: 0, behind: 1, has_hooks: 2, unknown: 3, unstable: 4, blocked: 5, dirty: 6, draft: 7, "": 999 };
+
+  // Transform data to match expected structure for compare function
   const rows = ORDERED.reduce((rows, [status]) => (
     filters[status] ? rows :
-      rows.concat((details[status]).map(name => ([name, status])))
-  ), []).sort((a, b) => (
-    feedstock[b[0]]["num_descendants"] - feedstock[a[0]]["num_descendants"]
-    || ORDERED.findIndex(x => x[0] == a[1]) - ORDERED.findIndex(x => x[0] == b[1])
-    || a[0].localeCompare(b[0]))
-  );
+      rows.concat((details[status]).map(name => {
+        const feedstockData = feedstock[name];
+        return {
+          name,
+          status,
+          migration_status_order: ORDERED.findIndex(x => x[0] == status),
+          ci_status_order: CI_STATUS_ORDER[feedstockData["pr_status"] || ""] ?? 8,
+          num_descendants: feedstockData["num_descendants"] ?? 0,
+          updated_at_timestamp: feedstockData["updated_at"] ? new Date(feedstockData["updated_at"]).getTime() : 0,
+        };
+      }))
+  ), []).sort(compare(sort.by, sort.order, previousSort));
 
   return (
     <>
@@ -357,17 +370,27 @@ function Table({ details }) {
       {rows.length > 0 && <table>
         <thead>
           <tr>
-            <th style={{ width: 200 }}>Name</th>
-            <th style={{ width: 115 }}>Migration Status</th>
-            <th style={{ width: 115 }}>CI Status</th>
-            <th style={{ width: 115 }}>Last Updated</th>
-            <th style={{ width: 115 }}>Total number of children</th>
+            <SortableHeader sortKey="name" currentSort={sort} onSort={resort} styles={styles} style={{ width: 200 }}>
+              Name
+            </SortableHeader>
+            <SortableHeader sortKey="migration_status" currentSort={sort} onSort={resort} styles={styles} style={{ width: 115 }}>
+              Migration Status
+            </SortableHeader>
+            <SortableHeader sortKey="ci_status" currentSort={sort} onSort={resort} styles={styles} style={{ width: 115 }}>
+              CI Status
+            </SortableHeader>
+            <SortableHeader sortKey="updated_at" currentSort={sort} onSort={resort} styles={styles} style={{ width: 115 }}>
+              Last Updated
+            </SortableHeader>
+            <SortableHeader sortKey="num_descendants" currentSort={sort} onSort={resort} styles={styles} style={{ width: 115 }}>
+              Total number of children
+            </SortableHeader>
             <th style={{ flex: 1 }}>Immediate children</th>
           </tr>
         </thead>
         <tbody>
-          {rows.map(([name, status], i) =>
-            <Row key={i}>{{ feedstock: feedstock[name], name, status }}</Row>
+          {rows.map((row, i) =>
+            <Row key={i}>{{ feedstock: feedstock[row.name], name: row.name, status: row.status }}</Row>
           )}
         </tbody>
       </table>}
diff --git a/src/pages/status/migration/styles.module.css b/src/pages/status/migration/styles.module.css
@@ -193,3 +193,17 @@
   align-items: center;
   gap: 8px;
 }
+
+.migration_details table th {
+  position: relative;
+}
+
+.migration_details table th.ascending::after {
+  content: " △";
+  font-size: smaller;
+}
+
+.migration_details table th.descending::after {
+  content: " ▽";
+  font-size: smaller;
+}
