@columenlabs/lumen-ui 0.1.60 → 0.1.62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lumen-view.js +33 -4
- package/package.json +2 -2
package/dist/lumen-view.js
CHANGED
|
@@ -10,7 +10,7 @@ import { controlOn, isCountAgg, isDollarFormat, viewPageSizes, viewPaginationSch
|
|
|
10
10
|
import { DndContext, closestCenter } from '@dnd-kit/core';
|
|
11
11
|
import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
|
|
12
12
|
import { createPaginatedRowModel, createSortedRowModel, flexRender, rowPaginationFeature, rowSortingFeature, sortFns, tableFeatures, useTable, } from '@tanstack/react-table';
|
|
13
|
-
import { ArrowDownIcon, ArrowUpIcon, ChartCandlestick, ChartSpline, ChevronLeftIcon, ChevronRightIcon, ChevronsDownIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, Columns3CogIcon, CornerDownRightIcon, DownloadIcon, Grid3x3Icon, LayoutDashboardIcon, PencilIcon, PlusIcon, Settings2Icon, SigmaIcon, SparklesIcon, TableIcon, UserPenIcon, } from 'lucide-react';
|
|
13
|
+
import { ArrowDownIcon, ArrowUpIcon, ChartCandlestick, ChartSpline, ChevronLeftIcon, ChevronRightIcon, ChevronsDownIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, Columns3CogIcon, CornerDownRightIcon, DownloadIcon, Grid3x3Icon, LayoutDashboardIcon, ListCollapseIcon, PencilIcon, PlusIcon, Settings2Icon, SigmaIcon, SparklesIcon, TableIcon, UserPenIcon, } from 'lucide-react';
|
|
14
14
|
import Papa from 'papaparse';
|
|
15
15
|
import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
16
16
|
import { useAssistantNote } from './assistant-context.js';
|
|
@@ -614,6 +614,22 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
|
|
|
614
614
|
const opens = (row) => (domain.panel ? panelOf(row) !== null : partsOf(row).length > 1);
|
|
615
615
|
const openLabel = () => domain.panel?.label ?? subgroup?.label.toLowerCase() ?? 'parts';
|
|
616
616
|
const folds = !domain.panel && !!subgroup?.under && !flat;
|
|
617
|
+
// Every folded line's key, so the header's menu can open or close them all at once.
|
|
618
|
+
const foldKeys = () => {
|
|
619
|
+
const under = folds ? subgroup?.under : undefined;
|
|
620
|
+
if (!under || !groups)
|
|
621
|
+
return [];
|
|
622
|
+
return groups.flatMap(([g, ms]) => {
|
|
623
|
+
const counts = new Map();
|
|
624
|
+
for (const r of ms)
|
|
625
|
+
counts.set(under(r.original), (counts.get(under(r.original)) ?? 0) + 1);
|
|
626
|
+
return [...counts]
|
|
627
|
+
.filter(([, n]) => n > 1 || subgroup?.always)
|
|
628
|
+
.map(([k]) => `under:${g}\u0000${k}`);
|
|
629
|
+
});
|
|
630
|
+
};
|
|
631
|
+
const anyFoldClosed = folds && foldKeys().some((k) => !openParts.has(k));
|
|
632
|
+
const setAllParts = (open) => setOpenParts(new Set(open === !!subgroup?.open ? [] : foldKeys()));
|
|
617
633
|
const flatName = (row) => flat && subgroup?.under ? (_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [subgroup.mark?.(subgroup.under(row), [row]), _jsx("span", { className: "truncate", children: subgroup.under(row) })] })) : null;
|
|
618
634
|
const nests = folds || sorted.some((r) => opens(r.original));
|
|
619
635
|
const chevron = (k, name) => (_jsx(Button, { variant: "ghost", size: "icon-xs", className: "-ml-1", "aria-expanded": openParts.has(k), "aria-label": `${openParts.has(k) ? 'Hide' : 'Show'} ${name}`, onClick: (e) => {
|
|
@@ -624,7 +640,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
|
|
|
624
640
|
return n;
|
|
625
641
|
});
|
|
626
642
|
}, children: _jsx(ChevronRightIcon, { className: cn('transition-transform', openParts.has(k) && 'rotate-90') }) }));
|
|
627
|
-
const partRow = (p, name) => (_jsxs(TableRow, { className: cn('bg-muted/30 text-muted-foreground hover:bg-muted
|
|
643
|
+
const partRow = (p, name) => (_jsxs(TableRow, { className: cn('bg-muted/30 text-muted-foreground hover:bg-muted', onDetails && 'cursor-pointer'), onClick: onDetails ? () => onDetails(p) : undefined, children: [selection && _jsx(TableCell, {}), shown.map((f, i) => (_jsx(TableCell, { ...col(f, i === 0 && 'pl-12'), children: i === 0 ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(CornerDownRightIcon, { className: "size-3.5 shrink-0" }), _jsx(CappedCell, { max: capOf(f, 0), children: name
|
|
628
644
|
? name(p)
|
|
629
645
|
: cellOf(f, p, chips.some((c) => c.key === f.key)) })] })) : (cellOf(f, p, chips.some((c) => c.key === f.key))) }, f.key)))] }, `part:${keyOf(p)}`));
|
|
630
646
|
// The whole row opens the details drawer.
|
|
@@ -644,7 +660,11 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
|
|
|
644
660
|
const foldRow = (key, members, scope) => {
|
|
645
661
|
const k = `under:${scope}\u0000${key}`;
|
|
646
662
|
const ms = members.map((m) => m.original);
|
|
647
|
-
return (_jsxs(Fragment, { children: [_jsxs(TableRow, { "data-row": k,
|
|
663
|
+
return (_jsxs(Fragment, { children: [_jsxs(TableRow, { "data-row": k, className: "cursor-pointer hover:bg-muted has-aria-expanded:hover:bg-muted", onClick: () => setOpenParts((o) => {
|
|
664
|
+
const n = new Set(o);
|
|
665
|
+
n.has(k) ? n.delete(k) : n.add(k);
|
|
666
|
+
return n;
|
|
667
|
+
}), children: [selection && _jsx(TableCell, {}), shown.map((f, i) => (_jsx(TableCell, { ...col(f, groupBy && i === 0 && 'pl-8'), children: i === 0 ? (_jsxs("span", { className: "flex items-center gap-1", children: [chevron(k, `${key} ${openLabel()}`), subgroup?.mark?.(key, ms), _jsx("span", { className: "font-medium", children: key }), _jsx("span", { className: "num text-xs text-muted-foreground", children: ms.length })] })) : (rollCell(f, ms, 'fold')) }, f.key)))] }), openParts.has(k) && ms.map((p) => partRow(p, subgroup?.name))] }, k));
|
|
648
668
|
};
|
|
649
669
|
const rowsOf = (list, scope) => {
|
|
650
670
|
const under = folds ? subgroup?.under : undefined;
|
|
@@ -698,7 +718,16 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
|
|
|
698
718
|
? 'ascending'
|
|
699
719
|
: h.column.getIsSorted() === 'desc'
|
|
700
720
|
? 'descending'
|
|
701
|
-
: undefined, children: [i === 0 && groups &&
|
|
721
|
+
: undefined, children: [i === 0 && groups && folds && !serverGroups && (_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(IconButton, { icon: anyClosed || anyFoldClosed ? ChevronsUpDownIcon : ChevronsDownUpIcon, size: "icon-xs", className: "-ml-2 mr-1 align-middle", label: "Expand or collapse rows" }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-52", children: [_jsxs(DropdownMenuItem, { onSelect: () => {
|
|
722
|
+
setAll(true);
|
|
723
|
+
setAllParts(true);
|
|
724
|
+
}, children: [_jsx(ChevronsUpDownIcon, {}), " Expand all"] }), _jsxs(DropdownMenuItem, { onSelect: () => {
|
|
725
|
+
setAll(true);
|
|
726
|
+
setAllParts(false);
|
|
727
|
+
}, children: [_jsx(ListCollapseIcon, {}), " Close every ", subgroup?.label.toLowerCase()] }), _jsxs(DropdownMenuItem, { onSelect: () => setAll(false), children: [_jsx(ChevronsDownUpIcon, {}), " Collapse all"] })] })] })), i === 0 &&
|
|
728
|
+
groups &&
|
|
729
|
+
!(folds && !serverGroups) &&
|
|
730
|
+
(!serverGroups || serverGroups.onToggleAll) && (_jsx(IconButton, { icon: anyClosed ? ChevronsUpDownIcon : ChevronsDownUpIcon, size: "icon-xs", className: "-ml-2 mr-1 align-middle", label: anyClosed ? 'Expand all groups' : 'Collapse all groups', onClick: () => setAll(anyClosed) })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "xs", className: cn('font-medium', !(i === 0 && groups) && '-mx-2'), style: { color: colorOf(domain, shown[i]) ?? undefined }, onClick: h.column.getCanSort() ? h.column.getToggleSortingHandler() : undefined, children: [shown[i] ? _jsx(FreshnessMark, { domain: domain, field: shown[i] }) : null, flexRender(h.column.columnDef.header, h.getContext()), _jsx(SortIcon, { dir: h.column.getIsSorted() })] }) }), shown[i] && (domain.groups?.length || freshnessOf(domain, shown[i])) ? (_jsxs(TooltipContent, { children: [domain.groups?.length ? _jsx("div", { children: pathOf(domain, shown[i]) }) : null, freshnessLine(domain, shown[i]) ? (_jsx("div", { children: freshnessLine(domain, shown[i]) })) : null] })) : null] })] }, h.id))), add && (_jsx(TableHead, { className: cn('w-8 pl-1', PINNED_HEAD), children: _jsx(AddColumnMenu, { add: add, fieldOpen: fieldOpen, onFieldOpen: setFieldOpen }) }))] }, hg.id))) }), _jsxs(TableBody, { children: [!rows.length && !serverGroups?.list?.length && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: span, className: "py-6 text-center text-muted-foreground", children: "No rows match." }) })), groups && groupBy
|
|
702
731
|
? groups.map(([key, members], gi) => {
|
|
703
732
|
const open = isOpen(key, gi);
|
|
704
733
|
return (_jsxs(Fragment, { children: [_jsxs(TableRow, { className: ROLLUP, "data-group": key, children: [selection && (_jsx(TableCell, { className: cn('w-8 pr-0', PINNED_GROUP), children: _jsx(Checkbox, { checked: members.every((m) => selection.keys.has(keyOf(m.original)))
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@columenlabs/lumen-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.62",
|
|
4
4
|
"description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@codemirror/lang-javascript": "6.2.5",
|
|
42
42
|
"@codemirror/lang-json": "6.0.2",
|
|
43
43
|
"@codemirror/lang-sql": "6.10.0",
|
|
44
|
-
"@columenlabs/lumen-ui-types": "0.1.
|
|
44
|
+
"@columenlabs/lumen-ui-types": "0.1.62",
|
|
45
45
|
"@dnd-kit/core": "6.3.1",
|
|
46
46
|
"@dnd-kit/sortable": "10.0.0",
|
|
47
47
|
"@dnd-kit/utilities": "3.2.2",
|