Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI ux improvment #1161

Merged
merged 3 commits into from
Apr 17, 2024
Merged

UI ux improvment #1161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
19f28d7
chore: UI
LatentDream Apr 17, 2024
92473d5
chore: formatting
LatentDream Apr 17, 2024
435a9cb
Merge branch 'main' into UI-UX-Improvment
LatentDream Apr 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/main/window.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ export async function createWindow() {
preload,
sandbox: false,
},
minHeight: 860,
minWidth: 1280,
minHeight: 680,
minWidth: 1020,
show: false,
});
global.mainWindow = mainWindow;
Expand Down
63 changes: 33 additions & 30 deletions src/renderer/routes/test_sequencer_panel/components/data-table/SequenceTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,28 +86,12 @@ export function SequenceTable() {
enableHiding: false,
},

{
accessorKey: "name",
header: "Sequence name",
cell: ({ row }) => {
return <div>{row.original.project.name}</div>;
},
},

{
accessorKey: "description",
header: "Description",
cell: ({ row }) => {
return <div>{row.original.project.description}</div>;
},
},

{
accessorKey: "run",
header: () => <div className="pl-4 text-center">Run</div>,
header: () => <div>Run</div>,
cell: ({ row }) => {
return (
<div className="flex justify-center">
<div>
<Checkbox
disabled={isLocked}
className="relative z-20"
Expand All @@ -121,21 +105,23 @@ export function SequenceTable() {
},

{
accessorKey: "status",
header: () => <div className="text-center">Status</div>,
accessorKey: "name",
header: "Sequence name",
cell: ({ row }) => {
return (
<div className="flex justify-center">
{typeof mapStatusToDisplay[row.original.status] === "function"
? mapStatusToDisplay[row.original.status](null)
: mapStatusToDisplay[row.original.status]}
</div>
);
return <div>{row.original.project.name}</div>;
},
},

{
accessorKey: "Type",
header: "Type",
cell: ({ row }) => {
return <div>{row.original.project.description}</div>;
},
},

{
accessorKey: "success_rate",
accessorKey: "Success Rate",
header: () => <div className="pl-4 text-center">Success Rate</div>,
cell: ({ row }) => {
return (
Expand All @@ -149,7 +135,7 @@ export function SequenceTable() {
},

{
accessorKey: "completion_time",
accessorKey: "completion Time",
header: () => <div className="pl-4 text-center">Completion Time</div>,
cell: ({ row }) => {
const time = getCompletionTime(row.original.elements);
Expand All @@ -161,6 +147,20 @@ export function SequenceTable() {
},
},

{
accessorKey: "status",
header: () => <div className="text-center">Status</div>,
cell: ({ row }) => {
return (
<div className="flex justify-center">
{typeof mapStatusToDisplay[row.original.status] === "function"
? mapStatusToDisplay[row.original.status](null)
: mapStatusToDisplay[row.original.status]}
</div>
);
},
},

{
accessorKey: "up-down",
header: () => <div className="text-center">Reorder</div>,
Expand Down Expand Up @@ -201,6 +201,7 @@ export function SequenceTable() {
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
"up-down": false,
"Success Rate": isAdmin(),
selected: isAdmin(),
});
const [rowSelection, setRowSelection] = useState({});
Expand Down Expand Up @@ -343,7 +344,9 @@ export function SequenceTable() {
<div className="hidden sm:block">Remove selected items</div>
</LockableButton>
) : (
<div />
<h2 className="text-l ml-1 font-bold text-muted-foreground">
Test Sequences{" "}
</h2>
)}
<DropdownMenu>
<DropdownMenuTrigger asChild>
Expand Down
80 changes: 55 additions & 25 deletions src/renderer/routes/test_sequencer_panel/components/data-table/TestTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,8 @@ import useWithPermission from "@/renderer/hooks/useWithPermission";
import { useSequencerModalStore } from "@/renderer/stores/modal";
import { WriteMinMaxModal } from "@/renderer/routes/test_sequencer_panel/components/modals/WriteMinMaxModal";
import { toast } from "sonner";
import { useSequencerStore } from "@/renderer/stores/sequencer";
import { useShallow } from "zustand/react/shallow";

export function TestTable() {
const { elems, setElems } = useDisplayedSequenceState();
Expand All @@ -68,6 +70,9 @@ export function TestTable() {
const indentLevels = getIndentLevels(elems);
const [openPyTestFileModal, setOpenPyTestFileModal] = useState(false);
const [testToDisplay, setTestToDisplay] = useState<Test | null>(null);
const testSequenceDisplayed = useSequencerStore(
useShallow((state) => state.testSequenceDisplayed),
);

function toggleExportToCloud(id: string) {
setElems((elems) => {
Expand Down Expand Up @@ -154,16 +159,31 @@ export function TestTable() {
cell: ({ row }) => {
return row.original.type === "test" &&
row.original.minValue !== undefined ? (
<div className="flex justify-center">
<div className="my-2 flex justify-center">
<code className="text-muted-foreground">
{row.original.minValue}
{row.original.unit}
</code>
</div>
) : null;
},
},

{
id: "Result",
accessorFn: (elem) => {
return elem.type === "test" ? "result" : null;
},
header: () => <div className="pl-4 text-center">Result</div>,
cell: ({ row }) => {
return row.original.type === "test" &&
row.original.measuredValue !== undefined ? (
<div className="my-2 flex justify-center">
<code>{row.original.measuredValue}</code>
</div>
) : null;
},
},

{
id: "Max",
accessorFn: (elem) => {
Expand All @@ -173,28 +193,26 @@ export function TestTable() {
cell: ({ row }) => {
return row.original.type === "test" &&
row.original.maxValue !== undefined ? (
<div className="flex justify-center">
<div className="my-2 flex justify-center">
<code className=" text-muted-foreground">
{row.original.maxValue}
{row.original.unit}
</code>
</div>
) : null;
},
},

{
id: "Measured",
id: "Unit",
accessorFn: (elem) => {
return elem.type === "test" ? "measured_value" : null;
return elem.type === "test" ? "unit" : null;
},
header: () => <div className="pl-4 text-center">Measured</div>,
header: () => <div className="pl-4 text-center">Unit</div>,
cell: ({ row }) => {
return row.original.type === "test" &&
row.original.measuredValue !== undefined ? (
row.original.unit !== undefined ? (
<div className="flex justify-center">
<code>
{row.original.measuredValue}
<code className="my-2 text-muted-foreground">
{row.original.unit}
</code>
</div>
Expand Down Expand Up @@ -225,34 +243,34 @@ export function TestTable() {
},

{
id: "Status",
id: "Completion Time",
accessorFn: (elem) => {
return elem.type === "test" ? "status" : null;
return elem.type === "test" ? "completionTime" : null;
},
header: () => <div className="pl-4 text-center">Status</div>,
header: () => <div className="pl-4 text-center">Time</div>,
cell: ({ row }) => {
return row.original.type === "test" ? (
<div className="my-2 flex justify-center">
{typeof mapStatusToDisplay[row.original.status] === "function"
? mapStatusToDisplay[row.original.status](row.original.error)
: mapStatusToDisplay[row.original.status]}
<div className="flex justify-center">
{row.original.completionTime
? `${row.original.completionTime.toFixed(2)}s`
: "0.00s"}
</div>
) : null;
},
},

{
id: "Completion Time",
id: "Status",
accessorFn: (elem) => {
return elem.type === "test" ? "completionTime" : null;
return elem.type === "test" ? "status" : null;
},
header: () => <div className="pl-4 text-center">Time</div>,
header: () => <div className="pl-4 text-center">Status</div>,
cell: ({ row }) => {
return row.original.type === "test" ? (
<div className="flex justify-center">
{row.original.completionTime
? `${row.original.completionTime.toFixed(2)}s`
: "0.00s"}
<div className="my-2 flex justify-center">
{typeof mapStatusToDisplay[row.original.status] === "function"
? mapStatusToDisplay[row.original.status](row.original.error)
: mapStatusToDisplay[row.original.status]}
</div>
) : null;
},
Expand Down Expand Up @@ -302,6 +320,10 @@ export function TestTable() {
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
"up-down": false,
"Completion Time": false,
"Test Type": isAdmin(),
Status: isAdmin(),
Export: isAdmin(),
selected: isAdmin(),
});
const [rowSelection, setRowSelection] = useState({});
Expand Down Expand Up @@ -464,7 +486,15 @@ export function TestTable() {
<div className="hidden sm:block">Remove selected items</div>
</LockableButton>
) : (
<div />
<h2 className="text-l ml-1 inline-flex font-bold text-muted-foreground">
Test Steps
<div className="px-1" />
<p className="font-thin text-muted-foreground">
{testSequenceDisplayed !== null
? ` for ${testSequenceDisplayed?.name}`
: ""}
</p>
</h2>
)}
<DropdownMenu>
<DropdownMenuTrigger asChild>
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/routes/test_sequencer_panel/components/data-table/test-name-cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const TestNameCell = ({ cellProps: { row }, indentLevels }: Props) => {

return isTest ? (
<>
<div className="flex h-full cursor-pointer space-x-2">
<div className="my-2 flex h-full cursor-pointer space-x-2">
{/* Indent levels */}
<div className="flex flex-row space-x-1">
<IndentLine
Expand Down
1 change: 1 addition & 0 deletions src/renderer/routes/test_sequencer_panel/components/dnd/DraggableRowSequence.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ export const DraggableRowSequence = ({
return (
<TableRow
style={{ opacity: isDragging ? 0.2 : 1 }}
variant={row.original.status === "running" ? "running" : "default"}
className={"relative" + (isSelected ? " bg-primary-foreground" : "")}
onClick={() => handleDisplaySequence(row.index)}
ref={drag}
Expand Down
Loading