improvement(workspace): allocate more space to name column in resource tables (#4645)

This commit is contained in:
Waleed
2026-05-18 10:19:01 -07:00
committed by GitHub
parent 42bbb8aa49
commit 3979476432
8 changed files with 48 additions and 40 deletions
@@ -23,6 +23,8 @@ export interface ResourceColumn {
id: string
header: string
widthMultiplier?: number
/** Fixed pixel width. When set, the column is excluded from proportional sizing. */
widthPx?: number
}
export interface ResourceCell {
@@ -649,26 +651,32 @@ const ResourceColGroup = memo(function ResourceColGroup({
columns,
hasCheckbox,
}: ResourceColGroupProps) {
const weights = columns.map(
(col, colIdx) => (colIdx === 0 ? 2.5 : 1.0) * (col.widthMultiplier ?? 1)
const fixedPxTotal = columns.reduce((sum, col) => sum + (col.widthPx ?? 0), 0)
const flexibleWeights = columns.map((col, colIdx) =>
col.widthPx ? 0 : (colIdx === 0 ? 2.5 : 1.0) * (col.widthMultiplier ?? 1)
)
const total = weights.reduce((s, w) => s + w, 0)
const flexibleTotal = flexibleWeights.reduce((s, w) => s + w, 0)
const reservedPx = fixedPxTotal + (hasCheckbox ? CHECKBOX_COLUMN_WIDTH_PX : 0)
return (
<colgroup>
{hasCheckbox && <col style={{ width: CHECKBOX_COLUMN_WIDTH }} />}
{columns.map((col, colIdx) => {
const columnRatio = weights[colIdx] / total
if (col.widthPx) {
return <col key={col.id} style={{ width: `${col.widthPx}px` }} />
}
const columnRatio = flexibleTotal > 0 ? flexibleWeights[colIdx] / flexibleTotal : 0
const columnPercent = columnRatio * 100
const checkboxOffset = CHECKBOX_COLUMN_WIDTH_PX * columnRatio
const reservedOffset = reservedPx * columnRatio
return (
<col
key={col.id}
style={{
width: hasCheckbox
? `calc(${columnPercent}% - ${checkboxOffset}px)`
: `${columnPercent}%`,
width:
reservedOffset > 0
? `calc(${columnPercent}% - ${reservedOffset}px)`
: `${columnPercent}%`,
}}
/>
)
@@ -113,11 +113,11 @@ const ACCEPT_ATTR = SUPPORTED_EXTENSIONS.map((ext) => `.${ext}`).join(',')
const COLUMNS: ResourceColumn[] = [
{ id: 'name', header: 'Name' },
{ id: 'size', header: 'Size' },
{ id: 'type', header: 'Type' },
{ id: 'created', header: 'Created' },
{ id: 'owner', header: 'Owner' },
{ id: 'updated', header: 'Last Updated' },
{ id: 'size', header: 'Size', widthPx: 110 },
{ id: 'type', header: 'Type', widthPx: 120 },
{ id: 'created', header: 'Created', widthPx: 150 },
{ id: 'owner', header: 'Owner', widthPx: 160 },
{ id: 'updated', header: 'Last Updated', widthPx: 150 },
]
const MIME_TYPE_LABELS: Record<string, string> = {
@@ -127,9 +127,9 @@ function truncateContent(content: string, maxLength = 150, searchQuery = ''): st
const CHUNK_COLUMNS: ResourceColumn[] = [
{ id: 'content', header: 'Content' },
{ id: 'index', header: 'Index' },
{ id: 'tokens', header: 'Tokens' },
{ id: 'status', header: 'Status' },
{ id: 'index', header: 'Index', widthPx: 100 },
{ id: 'tokens', header: 'Tokens', widthPx: 100 },
{ id: 'status', header: 'Status', widthPx: 120 },
]
export function Document({
@@ -86,12 +86,12 @@ const DOCUMENTS_PER_PAGE = 50
const DOCUMENT_COLUMNS: ResourceColumn[] = [
{ id: 'name', header: 'Name' },
{ id: 'size', header: 'Size' },
{ id: 'tokens', header: 'Tokens' },
{ id: 'chunks', header: 'Chunks' },
{ id: 'uploaded', header: 'Uploaded' },
{ id: 'status', header: 'Status' },
{ id: 'tags', header: 'Tags' },
{ id: 'size', header: 'Size', widthPx: 90 },
{ id: 'tokens', header: 'Tokens', widthPx: 90 },
{ id: 'chunks', header: 'Chunks', widthPx: 90 },
{ id: 'uploaded', header: 'Uploaded', widthPx: 140 },
{ id: 'status', header: 'Status', widthPx: 110 },
{ id: 'tags', header: 'Tags', widthPx: 160 },
]
interface KnowledgeBaseProps {
@@ -43,12 +43,12 @@ interface KnowledgeBaseWithDocCount extends KnowledgeBaseData {
const COLUMNS: ResourceColumn[] = [
{ id: 'name', header: 'Name' },
{ id: 'documents', header: 'Documents' },
{ id: 'tokens', header: 'Tokens' },
{ id: 'connectors', header: 'Connectors' },
{ id: 'created', header: 'Created' },
{ id: 'owner', header: 'Owner' },
{ id: 'updated', header: 'Last Updated' },
{ id: 'documents', header: 'Documents', widthPx: 110 },
{ id: 'tokens', header: 'Tokens', widthPx: 90 },
{ id: 'connectors', header: 'Connectors', widthPx: 130 },
{ id: 'created', header: 'Created', widthPx: 140 },
{ id: 'owner', header: 'Owner', widthPx: 150 },
{ id: 'updated', header: 'Last Updated', widthPx: 140 },
]
const DATABASE_ICON = <Database className='size-[14px]' />
@@ -106,11 +106,11 @@ const REFRESH_SPINNER_DURATION_MS = 1000 as const
const LOG_COLUMNS: ResourceColumn[] = [
{ id: 'workflow', header: 'Workflow' },
{ id: 'date', header: 'Date' },
{ id: 'status', header: 'Status' },
{ id: 'cost', header: 'Cost' },
{ id: 'trigger', header: 'Trigger' },
{ id: 'duration', header: 'Duration' },
{ id: 'date', header: 'Date', widthPx: 160 },
{ id: 'status', header: 'Status', widthPx: 120 },
{ id: 'cost', header: 'Cost', widthPx: 100 },
{ id: 'trigger', header: 'Trigger', widthPx: 140 },
{ id: 'duration', header: 'Duration', widthPx: 110 },
]
interface LogSelectionState {
@@ -50,8 +50,8 @@ function getScheduleDescription(s: WorkspaceScheduleData) {
const COLUMNS: ResourceColumn[] = [
{ id: 'task', header: 'Task' },
{ id: 'schedule', header: 'Schedule', widthMultiplier: 1.5 },
{ id: 'nextRun', header: 'Next Run' },
{ id: 'lastRun', header: 'Last Run' },
{ id: 'nextRun', header: 'Next Run', widthPx: 160 },
{ id: 'lastRun', header: 'Last Run', widthPx: 160 },
]
export function ScheduledTasks() {
@@ -49,11 +49,11 @@ const logger = createLogger('Tables')
const COLUMNS: ResourceColumn[] = [
{ id: 'name', header: 'Name' },
{ id: 'columns', header: 'Columns' },
{ id: 'rows', header: 'Rows' },
{ id: 'created', header: 'Created' },
{ id: 'owner', header: 'Owner' },
{ id: 'updated', header: 'Last Updated' },
{ id: 'columns', header: 'Columns', widthPx: 110 },
{ id: 'rows', header: 'Rows', widthPx: 100 },
{ id: 'created', header: 'Created', widthPx: 150 },
{ id: 'owner', header: 'Owner', widthPx: 160 },
{ id: 'updated', header: 'Last Updated', widthPx: 150 },
]
export function Tables() {