From 75fffe4c6fba6113a87cc233ea025733d4541f38 Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Wed, 5 Mar 2025 12:34:55 -0500
Subject: [PATCH] enabled scrolling on settings tab
---
.../Settings/TransformerLabSettings.tsx | 42 ++++++++++++++++---
.../components/Settings/ViewJobsTab.tsx | 19 +++++----
2 files changed, 49 insertions(+), 12 deletions(-)
diff --git a/src/renderer/components/Settings/TransformerLabSettings.tsx b/src/renderer/components/Settings/TransformerLabSettings.tsx
index dbbb132a..6ff87a00 100644
--- a/src/renderer/components/Settings/TransformerLabSettings.tsx
+++ b/src/renderer/components/Settings/TransformerLabSettings.tsx
@@ -28,6 +28,7 @@ import { EyeIcon, EyeOffIcon, RotateCcwIcon } from 'lucide-react';
// Import the AIProvidersSettings component.
import AIProvidersSettings from './AIProvidersSettings';
import ViewJobsTab from './ViewJobsTab';
+import { alignBox } from '@nivo/core';
const fetcher = (url) => fetch(url).then((res) => res.json());
@@ -77,17 +78,48 @@ export default function TransformerLabSettings() {
}
return (
- <>
+ <Sheet
+ sx={{
+ width: '100%',
+ height: '100%',
+ overflowY: 'hidden',
+ display: 'flex',
+ flexDirection: 'column',
+ }}
+ >
<Typography level="h1" marginBottom={1}>
Transformer Lab Settings
</Typography>
- <Sheet sx={{ width: '100%', overflowY: 'auto' }}>
- <Tabs defaultValue={0}>
+ <Sheet
+ sx={{
+ height: '100%',
+ overflowY: 'hidden',
+ display: 'flex',
+ flexDirection: 'column',
+ }}
+ >
+ <Tabs
+ defaultValue={0}
+ sx={{
+ height: '100%',
+ overflowY: 'hidden',
+ display: 'flex',
+ flexDirection: 'column',
+ }}
+ >
<TabList>
<Tab>Settings</Tab>
<Tab>View Jobs</Tab>
</TabList>
- <TabPanel value={0}>
+ <TabPanel
+ value={0}
+ style={{
+ display: 'flex',
+ flexDirection: 'column',
+ overflowY: 'auto',
+ alignItems: 'flex-start',
+ }}
+ >
{canLogInToHuggingFaceIsLoading && <CircularProgress />}
<Typography level="title-lg" marginBottom={2}>
Huggingface Credentials:
@@ -213,6 +245,6 @@ export default function TransformerLabSettings() {
</TabPanel>
</Tabs>
</Sheet>
- </>
+ </Sheet>
);
}
diff --git a/src/renderer/components/Settings/ViewJobsTab.tsx b/src/renderer/components/Settings/ViewJobsTab.tsx
index aad08ea1..711aa840 100644
--- a/src/renderer/components/Settings/ViewJobsTab.tsx
+++ b/src/renderer/components/Settings/ViewJobsTab.tsx
@@ -40,14 +40,19 @@ export default function ViewJobsTab() {
<Option value="EVAL">Evaluate</Option>
</Select>
{showJobsOfType !== 'NONE' && (
- <Table sx={{ tableLayout: 'auto', overflow: 'scroll' }}>
+ <Table
+ stickyHeader
+ sx={{ width: '100%', tableLayout: 'auto', overflow: 'scroll' }}
+ >
<thead>
<tr>
- <td>Job ID</td>
- <td>Job Type</td>
- <td>Job Status</td>
- <td>Job Progress</td>
- <td>Job Data</td>
+ <th>Job ID</th>
+ <th>Job Type</th>
+ <th>Job Status</th>
+ <th>Job Progress</th>
+ <th width="400px" style={{ overflow: 'hidden' }}>
+ Job Data
+ </th>
</tr>
</thead>
<tbody>
@@ -57,7 +62,7 @@ export default function ViewJobsTab() {
<td>{job.type}</td>
<td>{job.status}</td>
<td>{job.progress}</td>
- <td>
+ <td width="400px">
<pre>{JSON.stringify(job.job_data, null, 2)}</pre>
</td>
</tr>
--
GitLab