mirror of
https://github.com/simstudioai/sim.git
synced 2026-09-24 15:45:35 +08:00
improvement(workspace): allocate more space to name column in resource tables (#4645)
This commit is contained in:
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user