Allow changing column visibility (#8392)

Author: egbertbouman

src/tribler/ui/package-lock.json

@@ -30,7 +30,6 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "i18next": "^23.11.4",
-    "javascript-time-ago": "^2.5.10",
     "js-cookie": "^3.0.5",
     "jszip": "^3.10.1",
     "lucide-react": "^0.292.0",

src/tribler/ui/package.json

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import toast from 'react-hot-toast';
 import { Torrent } from "@/models/torrent.model";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
-import { formatTimeAgo } from "@/lib/utils";
+import { formatTimeRelative } from "@/lib/utils";
 import { triblerService } from "@/services/tribler.service";
 import { isErrorDict } from "@/services/reporting";
 
@@ -55,7 +55,7 @@ export function SwarmHealth({ torrent }: { torrent: Torrent }) {
                 </TooltipTrigger>
                 <TooltipContent>
                     <span>
-                        {torrent.last_tracker_check === 0 ? 'Not checked' : `Checked ${formatTimeAgo(torrent.last_tracker_check)}`}
+                        {torrent.last_tracker_check === 0 ? 'Not checked' : `Checked ${formatTimeRelative(torrent.last_tracker_check)}`}
                     </span>
                 </TooltipContent>
             </Tooltip>

src/tribler/ui/src/components/swarm-health.tsx

@@ -1,16 +1,25 @@
 import { SetStateAction, useEffect, useRef, useState } from 'react';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { getCoreRowModel, useReactTable, flexRender, getFilteredRowModel, getPaginationRowModel, getExpandedRowModel, getSortedRowModel } from '@tanstack/react-table';
-import type { ColumnDef, Row, PaginationState, RowSelectionState, ColumnFiltersState, ExpandedState, ColumnDefTemplate, HeaderContext, SortingState } from '@tanstack/react-table';
+import type { ColumnDef, Row, PaginationState, RowSelectionState, ColumnFiltersState, ExpandedState, ColumnDefTemplate, HeaderContext, SortingState, VisibilityState, Header, Column } from '@tanstack/react-table';
 import { cn } from '@/lib/utils';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel } from './select';
 import { Button } from './button';
-import { ArrowDownIcon, ArrowUpIcon, ChevronLeftIcon, ChevronRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon } from '@radix-ui/react-icons';
+import { ArrowDownIcon, ArrowUpIcon, ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon } from '@radix-ui/react-icons';
 import * as SelectPrimitive from "@radix-ui/react-select"
 import type { Table as ReactTable } from '@tanstack/react-table';
 import { useTranslation } from 'react-i18next';
 import { useResizeObserver } from '@/hooks/useResizeObserver';
 import useKeyboardShortcut from 'use-keyboard-shortcut';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from './dropdown-menu';
+import { triblerService } from '@/services/tribler.service';
+
+
+declare module '@tanstack/table-core/build/lib/types' {
+    export interface ColumnMeta<TData extends RowData, TValue> {
+        hide_by_default: boolean;
+    }
+}
 
 
 export function getHeader<T>(name: string, translate: boolean = true, addSorting: boolean = true): ColumnDefTemplate<HeaderContext<T, unknown>> | undefined {
@@ -42,15 +51,22 @@ export function getHeader<T>(name: string, translate: boolean = true, addSorting
     }
 }
 
-function getStoredSortingState(key?: string) {
-    if (key) {
-        let sortingString = localStorage.getItem(key);
-        if (sortingString) {
-            return JSON.parse(sortingString);
-        }
+function getState(type: "columns" | "sorting", name?: string) {
+    let stateString = triblerService.guiSettings[type];
+    if (stateString && name) {
+        return JSON.parse(stateString)[name];
     }
 }
 
+function setState(type: "columns" | "sorting", name: string, state: SortingState | VisibilityState) {
+    let stateString = triblerService.guiSettings[type];
+    let stateSettings = stateString ? JSON.parse(stateString) : {};
+    stateSettings[name] = state;
+
+    triblerService.guiSettings[type] = JSON.stringify(stateSettings);
+    triblerService.setSettings({ ui: triblerService.guiSettings });
+}
+
 interface ReactTableProps<T extends object> {
     data: T[];
     columns: ColumnDef<T>[];
@@ -65,6 +81,7 @@ interface ReactTableProps<T extends object> {
     allowSelect?: boolean;
     allowSelectCheckbox?: boolean;
     allowMultiSelect?: boolean;
+    allowColumnToggle?: string;
     filters?: { id: string, value: string }[];
     maxHeight?: string | number;
     expandable?: boolean;
@@ -85,6 +102,7 @@ function SimpleTable<T extends object>({
     allowSelect,
     allowSelectCheckbox,
     allowMultiSelect,
+    allowColumnToggle,
     filters,
     maxHeight,
     expandable,
@@ -98,21 +116,47 @@ function SimpleTable<T extends object>({
     const [rowSelection, setRowSelection] = useState<RowSelectionState>(initialRowSelection || {});
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(filters || [])
     const [expanded, setExpanded] = useState<ExpandedState>({});
-    const [sorting, setSorting] = useState<SortingState>(getStoredSortingState(storeSortingState) || []);
+    const [sorting, setSorting] = useState<SortingState>(getState("sorting", storeSortingState) || []);
 
-    useKeyboardShortcut(
-        ["Control", "A"],
-        keys => {
-            if (allowMultiSelect) {
-                table.toggleAllRowsSelected(true);
-            }
-        },
-        {
-            overrideSystem: true,
-            ignoreInputFields: true,
-            repeatOnHold: false
+    //Get stored column visibility and add missing visibilities with their defaults.
+    const visibilityState = getState("columns", allowColumnToggle) || {};
+    let col: any;
+    for (col of columns) {
+        if (col.accessorKey && col.accessorKey in visibilityState === false) {
+            visibilityState[col.accessorKey] = col.meta?.hide_by_default !== true;
+        }
+    }
+    const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(visibilityState);
+
+    useKeyboardShortcut(["Control", "A"], () => {
+        if (allowMultiSelect) {
+            table.toggleAllRowsSelected(true);
         }
-    );
+    }, { overrideSystem: true, repeatOnHold: false });
+    useKeyboardShortcut(["ArrowUp"], () => {
+        let ids = Object.keys(rowSelection);
+        let rows = table.getSortedRowModel().rows;
+        let index = rows.findIndex((row) => ids.includes(row.id));
+        let next = rows[index - 1] || rows[0];
+
+        let selection: any = {};
+        selection[next.id.toString()] = true;
+        table.setRowSelection(selection);
+
+        document.querySelector("[data-state='selected']")?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
+    });
+    useKeyboardShortcut(["ArrowDown"], () => {
+        let ids = Object.keys(rowSelection);
+        let rows = table.getSortedRowModel().rows;
+        let index = rows.findLastIndex((row) => ids.includes(row.id));
+        let next = rows[index + 1] || rows[rows.length - 1];
+
+        let selection: any = {};
+        selection[next.id.toString()] = true;
+        table.setRowSelection(selection);
+
+        document.querySelector("[data-state='selected']")?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
+    });
 
     const table = useReactTable({
         data,
@@ -127,11 +171,13 @@ function SimpleTable<T extends object>({
             pagination,
             rowSelection,
             columnFilters,
+            columnVisibility,
             expanded,
             sorting
         },
         getFilteredRowModel: getFilteredRowModel(),
         onColumnFiltersChange: setColumnFilters,
+        onColumnVisibilityChange: setColumnVisibility,
         onPaginationChange: setPagination,
         onRowSelectionChange: (arg: SetStateAction<RowSelectionState>) => {
             if (allowSelect || allowSelectCheckbox || allowMultiSelect) setRowSelection(arg);
@@ -173,10 +219,16 @@ function SimpleTable<T extends object>({
 
     useEffect(() => {
         if (storeSortingState) {
-            localStorage.setItem(storeSortingState, JSON.stringify(sorting));
+            setState("sorting", storeSortingState, sorting);
         }
     }, [sorting]);
 
+    useEffect(() => {
+        if (allowColumnToggle) {
+            setState("columns", allowColumnToggle, columnVisibility);
+        }
+    }, [columnVisibility]);
+
     // For some reason the ScrollArea scrollbar is only shown when it's set to a specific height.
     // So, we wrap it in a parent div, monitor its size, and set the height of the table accordingly.
     const parentRef = useRef<HTMLTableElement>(null);
@@ -186,12 +238,16 @@ function SimpleTable<T extends object>({
         <>
             <div ref={parentRef} className='flex-grow flex'>
                 <Table maxHeight={maxHeight ?? (parentRect?.height ?? 200)}>
-                    <TableHeader>
+                    <TableHeader className='z-10'>
                         {table.getHeaderGroups().map((headerGroup) => (
                             <TableRow key={headerGroup.id} className="bg-neutral-100 hover:bg-neutral-100 dark:bg-neutral-900 dark:hover:bg-neutral-900">
                                 {headerGroup.headers.map((header, index) => {
                                     return (
-                                        <TableHead key={header.id} className={cn({ 'pl-4': index === 0, 'pr-4': index + 1 === headerGroup.headers.length, })}>
+                                        <TableHead key={header.id} className={cn({
+                                            'pl-4': index === 0,
+                                            'pr-4': !allowColumnToggle && index + 1 === headerGroup.headers.length,
+                                            'pr-0': !!allowColumnToggle
+                                        })}>
                                             {header.isPlaceholder
                                                 ? null
                                                 : flexRender(
@@ -201,6 +257,41 @@ function SimpleTable<T extends object>({
                                         </TableHead>
                                     )
                                 })}
+                                {allowColumnToggle && <TableHead key="toggleColumns" className="w-2 pl-1 pr-3 cursor-pointer hover:text-black dark:hover:text-white">
+                                    <DropdownMenu>
+                                        <DropdownMenuTrigger asChild>
+                                            <DotsHorizontalIcon className="h-4 w-4" />
+                                        </DropdownMenuTrigger>
+                                        <DropdownMenuContent align="end">
+                                            <DropdownMenuLabel>{t('Toggle columns')}</DropdownMenuLabel>
+                                            <DropdownMenuSeparator />
+                                            {table.getAllLeafColumns().map(column => {
+                                                const fakeColumn = {
+                                                    ...column,
+                                                    toggleSorting: () => { },
+                                                    getIsSorted: () => { },
+                                                } as Column<any, unknown>;
+                                                return (
+                                                    <DropdownMenuItem key={`toggleColumns-${column.id}`}>
+                                                        <label onClick={(evt) => evt.stopPropagation()} className='flex space-x-1'>
+                                                            <input
+                                                                {...{
+                                                                    type: 'checkbox',
+                                                                    checked: column.getIsVisible(),
+                                                                    onChange: column.getToggleVisibilityHandler(),
+                                                                }}
+                                                            />{flexRender(column.columnDef.header, {
+                                                                table,
+                                                                column: fakeColumn,
+                                                                header: { column: fakeColumn } as Header<any, unknown>,
+                                                            })}
+                                                        </label>
+                                                    </DropdownMenuItem>
+                                                )
+                                            })}
+                                        </DropdownMenuContent>
+                                    </DropdownMenu>
+                                </TableHead>}
                             </TableRow>
                         ))}
                     </TableHeader>

src/tribler/ui/src/components/ui/simple-table.tsx

@@ -1,25 +1,10 @@
 import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
 import { category } from "@/models/torrent.model";
-import TimeAgo from 'javascript-time-ago'
-import en from 'javascript-time-ago/locale/en'
-import es from 'javascript-time-ago/locale/es'
-import pt from 'javascript-time-ago/locale/pt'
-import ru from 'javascript-time-ago/locale/ru'
-import zh from 'javascript-time-ago/locale/zh'
-import { useTranslation } from "react-i18next";
-import { triblerService } from "@/services/tribler.service";
 import { FileLink, FileTreeItem } from "@/models/file.model";
 import { CheckedState } from "@radix-ui/react-checkbox";
 import JSZip from "jszip";
-
-TimeAgo.setDefaultLocale(en.locale)
-TimeAgo.addLocale(en)
-TimeAgo.addLocale(es)
-TimeAgo.addLocale(pt)
-TimeAgo.addLocale(ru)
-TimeAgo.addLocale(zh)
-
+import { triblerService } from "@/services/tribler.service";
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs))
@@ -72,10 +57,33 @@ export function categoryIcon(name: category): string {
     return categoryEmojis[name] || '';
 }
 
-export function formatTimeAgo(ts: number) {
+export function formatDateTime(ts: number) {
+    const dtf = new Intl.DateTimeFormat(undefined, {
+        day: '2-digit', month: '2-digit', year: 'numeric',
+        hour: '2-digit', hourCycle: "h24", minute: '2-digit', second: '2-digit'
+    });
+    return dtf.format(new Date(ts * 1000));
+}
+
+export function formatTimeRelative(ts: number, epochTime: boolean = true) {
+    // Returns passed/future time as human readable text
+    if (ts === 0) { return '-'; }
+    if (epochTime) { ts = ts - (Date.now() / 1000); }
+    const cutoffs = [60, 3600, 86400, 86400 * 7, 86400 * 30, 86400 * 365, Infinity];
+    const units: Intl.RelativeTimeFormatUnit[] = ["second", "minute", "hour", "day", "week", "month", "year"];
+    const index = cutoffs.findIndex(cutoff => cutoff > Math.abs(ts));
+    const divisor = index ? cutoffs[index - 1] : 1;
     let locale = triblerService.guiSettings.lang ?? 'en_US';
-    const timeAg = new TimeAgo(locale.slice(0, 2));
-    return timeAg.format(ts * 1000);
+    const rtf = new Intl.RelativeTimeFormat(locale.replace("_", "-"), { numeric: "auto" });
+    return divisor === Infinity ? "-" : rtf.format(Math.round(ts / divisor), units[index]);
+}
+
+export function formatTimeRelativeISO(ts: number) {
+    // Returns passed time as HH:mm:ss
+    if (ts === 0) { return '-'; }
+    const date = new Date(0);
+    date.setSeconds((Date.now() / 1000) - ts);
+    return date.toISOString().substr(11, 8);
 }
 
 export function formatBytes(bytes: number) {
@@ -84,19 +92,6 @@ export function formatBytes(bytes: number) {
     return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
 }
 
-export function formatTimeDiff(time: number) {
-    if (time === 0) { return '-'; }
-    const now = Date.now() / 1000;
-    return formatTime(now - time);
-}
-
-export function formatTime(time: number) {
-    if (time === 0) { return '-'; }
-    const date = new Date(0);
-    date.setSeconds(time);
-    return date.toISOString().substr(11, 8);
-}
-
 export function formatFlags(flags: number[]) {
     const flagToString: Record<number, string> = {
         1: 'RELAY',