feat(indexd): host explorer filter sort

Author: alexfreska

.changeset/shaky-houses-march.md

@@ -0,0 +1,5 @@
+---
+'indexd': minor
+---
+
+The location column now supports filtering by country.

.changeset/stale-dots-ring.md

@@ -0,0 +1,5 @@
+---
+'indexd': minor
+---
+
+The host explorer table can now be sorted by any column.

apps/indexd/components/Data/ColumnFilter.tsx

@@ -0,0 +1,57 @@
+import { Popover, Button } from '@siafoundation/design-system'
+import { Filter16 } from '@siafoundation/react-icons'
+import { Table } from '@tanstack/react-table'
+import { useState } from 'react'
+
+interface ColumnFilterProps<T> {
+  columnId: string
+  table: Table<T>
+  children: React.ReactNode
+}
+
+export function ColumnFilter<T>({
+  columnId,
+  table,
+  children,
+}: ColumnFilterProps<T>) {
+  const [open, setOpen] = useState(false)
+  const column = table.getColumn(columnId)
+  const isFiltered = column?.getIsFiltered()
+
+  if (!column?.getCanFilter()) {
+    return null
+  }
+
+  return (
+    <Popover
+      trigger={
+        <Button
+          variant="ghost"
+          size="none"
+          icon={isFiltered ? 'contrast' : 'verySubtle'}
+        >
+          <Filter16 />
+        </Button>
+      }
+      rootProps={{ open, onOpenChange: setOpen }}
+      contentProps={{ align: 'end', className: 'w-64' }}
+    >
+      <div className="p-3 space-y-3">
+        {children}
+        {isFiltered && (
+          <Button
+            variant="ghost"
+            size="small"
+            onClick={() => {
+              column.setFilterValue(undefined)
+              setOpen(false)
+            }}
+            className="w-full"
+          >
+            Clear Filter
+          </Button>
+        )}
+      </div>
+    </Popover>
+  )
+}

apps/indexd/components/Data/ColumnSort.tsx

@@ -0,0 +1,46 @@
+import { Button } from '@siafoundation/design-system'
+import {
+  ChevronSort16,
+  ChevronSortDown16,
+  ChevronSortUp16,
+} from '@siafoundation/react-icons'
+import { Table } from '@tanstack/react-table'
+
+interface ColumnSortProps<T> {
+  columnId: string
+  table: Table<T>
+}
+
+export function ColumnSort<T>({ columnId, table }: ColumnSortProps<T>) {
+  const column = table.getColumn(columnId)
+  const isSorted = column?.getIsSorted()
+
+  if (!column?.getCanSort()) {
+    return null
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="none"
+      icon={isSorted ? 'contrast' : 'verySubtle'}
+      onClick={() => {
+        if (isSorted === 'asc') {
+          column?.toggleSorting(true)
+        } else if (isSorted === 'desc') {
+          column?.clearSorting()
+        } else {
+          column?.toggleSorting(false)
+        }
+      }}
+    >
+      {isSorted === 'asc' ? (
+        <ChevronSortUp16 />
+      ) : isSorted === 'desc' ? (
+        <ChevronSortDown16 />
+      ) : (
+        <ChevronSort16 />
+      )}
+    </Button>
+  )
+}

apps/indexd/components/Data/CountryFilter.tsx

@@ -0,0 +1,56 @@
+import { Select } from '@siafoundation/design-system'
+import { countryCodeEmoji, getCountryName } from '@siafoundation/units'
+import { Table } from '@tanstack/react-table'
+import { useMemo } from 'react'
+
+interface CountryFilterProps<T extends { location?: { countryCode: string } }> {
+  table: Table<T>
+}
+
+export function CountryFilter<
+  T extends { location?: { countryCode: string } },
+>({ table }: CountryFilterProps<T>) {
+  const column = table.getColumn('location')
+  const facets = useMemo(
+    (): Map<string, number> => column?.getFacetedUniqueValues() || new Map(),
+    [column],
+  )
+  const filterValue = column?.getFilterValue() as string | undefined
+
+  const countryOptions = useMemo(() => {
+    const options: { value: string | undefined; label: string }[] = [
+      { value: '', label: 'All Countries' },
+    ]
+    for (const [code] of facets) {
+      if (code && code !== 'unknown') {
+        options.push({
+          value: code,
+          label: `${countryCodeEmoji(code)} ${getCountryName(code)}`,
+        })
+      }
+    }
+    options.push({
+      value: 'unknown',
+      label: `❓ Unknown`,
+    })
+    return options
+  }, [facets])
+
+  return (
+    <div className="flex flex-col gap-1">
+      <Select
+        value={filterValue || ''}
+        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+          const value = e.target.value
+          column?.setFilterValue(value === '' ? undefined : value)
+        }}
+      >
+        {countryOptions.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </Select>
+    </div>
+  )
+}

apps/indexd/components/Data/Hosts/HostsTab.tsx

@@ -45,9 +45,9 @@ export function HostsTab() {
     data: hosts,
     columns,
     columnFilters,
-    setColumnFilters,
     columnSorts,
     setColumnSorts,
+    setColumnFilters,
     offset,
     limit,
     onRowClick,

apps/indexd/components/Data/Hosts/SidePanelHost.tsx

@@ -21,7 +21,7 @@ export function SidePanelHost() {
     [selectedId, hosts],
   )
   const mapHost = useMemo(() => {
-    if (!host || !host.location) return null
+    if (!host || host.location.countryCode === 'unknown') return null
     const hostData: HostMapHost = {
       id: host.id,
       publicKey: host.id,