UI ux improvment (#1161)

* chore: UI * chore: formatting
flojoy-ai · Apr 17, 2024 · 88d3b3f · 88d3b3f
1 parent f52547e
commit 88d3b3f
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 58 deletions.
diff --git a/src/main/window.ts b/src/main/window.ts
@@ -46,8 +46,8 @@ export async function createWindow() {
       preload,
       sandbox: false,
     },
-    minHeight: 860,
-    minWidth: 1280,
+    minHeight: 680,
+    minWidth: 1020,
     show: false,
   });
   global.mainWindow = mainWindow;

diff --git a/src/renderer/routes/test_sequencer_panel/components/data-table/SequenceTable.tsx b/src/renderer/routes/test_sequencer_panel/components/data-table/SequenceTable.tsx
@@ -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"
@@ -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 (
@@ -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);
@@ -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>,
@@ -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({});
@@ -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>

diff --git a/src/renderer/routes/test_sequencer_panel/components/data-table/TestTable.tsx b/src/renderer/routes/test_sequencer_panel/components/data-table/TestTable.tsx
@@ -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();
@@ -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) => {
@@ -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) => {
@@ -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>
@@ -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;
       },
@@ -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({});
@@ -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>

diff --git a/src/renderer/routes/test_sequencer_panel/components/data-table/test-name-cell.tsx b/src/renderer/routes/test_sequencer_panel/components/data-table/test-name-cell.tsx
@@ -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

diff --git a/src/renderer/routes/test_sequencer_panel/components/dnd/DraggableRowSequence.tsx b/src/renderer/routes/test_sequencer_panel/components/dnd/DraggableRowSequence.tsx
@@ -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}