hermes - ✅(Solved) Fix [Feature]: Add interactive column sorting to dashboard analytics tables [1 pull requests, 1 participants]

hermes2026-04-29 09:55:26

ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

GitHub issue URL

Helpful · Quick feedback

GitHub stats

NousResearch/hermes-agent#17381•Fetched 2026-04-30 06:48:02

View on GitHub

Comments

Participants

Timeline

Reactions

Author

AllardQuek

Participants

AllardQuek

Timeline (top)

labeled ×3renamed ×2cross-referenced ×1

Code Example

function useTableSort<T extends Record<string, unknown>>(
  data: T[],
  defaultKey: keyof T,
  defaultDir: 'asc' | 'desc' = 'desc'
) {
  const [sortKey, setSortKey] = useState<keyof T>(defaultKey);
  const [sortDir, setSortDir] = useState<'asc' | 'desc'>(defaultDir);

  const sorted = useMemo(() => {
    return [...data].sort((a, b) => {
      const aVal = a[sortKey];
      const bVal = b[sortKey];
      if (aVal === bVal) return 0;
      const cmp = aVal > bVal ? 1 : -1;
      return sortDir === 'asc' ? cmp : -cmp;
    });
  }, [data, sortKey, sortDir]);

  const toggle = (key: keyof T) => {
    if (key === sortKey) {
      setSortDir(d => (d === 'asc' ? 'desc' : 'asc'));
    } else {
      setSortKey(key);
      setSortDir('desc');
    }
  };

  return { sorted, sortKey, sortDir, toggle };
}

---

function SortHeader({ label, col, sortKey, sortDir, toggle }: SortHeaderProps) {
  const active = col === sortKey;
  return (
    <th onClick={() => toggle(col)} style={{ cursor: 'pointer', userSelect: 'none' }}>
      {label} {active ? (sortDir === 'asc' ? '▲' : '▼') : ''}
    </th>
  );
}

---

RAW_BUFFERClick to expand / collapse

Problem or Use Case

The Analytics page in the Hermes dashboard displays usage data across three tables (Daily Usage, Model Usage, Skill Usage) but none of the tables support user-controlled sorting. Sort orders are either hardcoded or absent, making it difficult to browse and compare data — e.g. finding the most-used model, the skill with the most edits, or a specific date range.

Column headers are not interactive. Sort orders are fixed:

Table	Current Sort Behavior
DailyTable	Hardcoded reverse chronological
ModelTable	Hardcoded by total tokens (not shown to user)
SkillTable	Unsorted — raw API data order

Users have no way to reorder data by any column.

Proposed Solution

Clicking a column header should sort the table by that column in ascending order. Clicking again should toggle to descending. The active sort column and direction should be visually indicated (e.g. ▲ / ▼ icons in the header).

Possible Implementation

Add a reusable useTableSort hook and apply it to all three tables with clickable, styled column headers.

Hook:

function useTableSort<T extends Record<string, unknown>>(
  data: T[],
  defaultKey: keyof T,
  defaultDir: 'asc' | 'desc' = 'desc'
) {
  const [sortKey, setSortKey] = useState<keyof T>(defaultKey);
  const [sortDir, setSortDir] = useState<'asc' | 'desc'>(defaultDir);

  const sorted = useMemo(() => {
    return [...data].sort((a, b) => {
      const aVal = a[sortKey];
      const bVal = b[sortKey];
      if (aVal === bVal) return 0;
      const cmp = aVal > bVal ? 1 : -1;
      return sortDir === 'asc' ? cmp : -cmp;
    });
  }, [data, sortKey, sortDir]);

  const toggle = (key: keyof T) => {
    if (key === sortKey) {
      setSortDir(d => (d === 'asc' ? 'desc' : 'asc'));
    } else {
      setSortKey(key);
      setSortDir('desc');
    }
  };

  return { sorted, sortKey, sortDir, toggle };
}

Column header helper:

function SortHeader({ label, col, sortKey, sortDir, toggle }: SortHeaderProps) {
  const active = col === sortKey;
  return (
    <th onClick={() => toggle(col)} style={{ cursor: 'pointer', userSelect: 'none' }}>
      {label} {active ? (sortDir === 'asc' ? '▲' : '▼') : ''}
    </th>
  );
}

Apply to all three tables. Complexity is medium but fully isolated to AnalyticsPage.tsx with no backend changes required.

Alternatives Considered

No response

Feature Type

Developer experience (tests, docs, CI)

Scope

None

Contribution

I'd like to implement this myself and submit a PR

Debug Report (optional)

extent analysis

TL;DR

Implementing the proposed useTableSort hook and applying it to the three tables in the Analytics page will enable user-controlled sorting.

Guidance

Apply the useTableSort hook to each of the three tables (DailyTable, ModelTable, SkillTable) to enable sorting by column.
Use the SortHeader component to create clickable column headers that toggle the sort order.
Verify that the sorting works as expected by testing different columns and sort directions.
Ensure the active sort column and direction are visually indicated using icons (▲ / ▼) in the header.

Example

// Example usage of useTableSort hook in a table component
function MyTable() {
  const { sorted, sortKey, sortDir, toggle } = useTableSort(data, 'defaultKey');
  return (
    <table>
      <thead>
        <tr>
          <SortHeader label="Column 1" col="column1" sortKey={sortKey} sortDir={sortDir} toggle={toggle} />
          <SortHeader label="Column 2" col="column2" sortKey={sortKey} sortDir={sortDir} toggle={toggle} />
        </tr>
      </thead>
      <tbody>
        {sorted.map(row => (
          <tr key={row.id}>
            <td>{row.column1}</td>
            <td>{row.column2}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Notes

The proposed solution does not require any backend changes, and the complexity is isolated to the AnalyticsPage.tsx file.

Recommendation

Apply the workaround by implementing the useTableSort hook and SortHeader component in the Analytics page, as it provides a clear and isolated solution to enable user-controlled sorting.

Vote matrix · Quick signals

Works

Did the solution work? Tap to confirm.

Easy Fix

Was it a quick fix?

Time Saver

Did it save you time?

Blocking

Was it severely blocking?

Common Issue

Are others likely hitting this too?

Flaky / Intermittent

Is it intermittent?

Verified / Reproducible

Can you reproduce it reliably?

#api #authentication setup #request error #file not found #serialization error

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

hermes - ✅(Solved) Fix [Feature]: Add interactive column sorting to dashboard analytics tables [1 pull requests, 1 participants]

Recommended Tools

GitHub issue graph ai analysis

Fix Action

Fixed

PR fix notes

PR #17394: feat(dashboard): add interactive column sorting to analytics tables

Description (problem / solution / changelog)

What does this PR do?

Related Issue

Type of Change

Changes Made

How to Test

Checklist

Code

Documentation & Housekeeping

Screenshots / Logs

Changed files