fix: ordered training history by id

hotosm · Nov 21, 2024 · 4f504e8 · 4f504e8
1 parent 9adb878
commit 4f504e8
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 124 deletions.
diff --git a/frontend/src/app/routes/models/model-details.tsx b/frontend/src/app/routes/models/model-details.tsx
@@ -33,7 +33,7 @@ export const ModelDetailsPage = () => {
   } = useDialog();
   const navigate = useNavigate();
   const { data, isPending, isError, error } = useModelDetails(id as string);
-  const { isAuthenticated, user } = useAuth();
+  const { user } = useAuth();
 
   useEffect(() => {
     if (isError) {
@@ -123,7 +123,7 @@ export const ModelDetailsPage = () => {
               size="medium"
               prefixIcon={StarStackIcon}
               onClick={openModelEnhancementDialog}
-              disabled={!isAuthenticated || !isOwner}
+              disabled={!isOwner}
             />
           </div>
           <TrainingHistoryTable

diff --git a/frontend/src/features/models/api/factory.ts b/frontend/src/features/models/api/factory.ts
@@ -101,10 +101,11 @@ export const getTrainingHistoryQueryOptions = (
   modelId: string,
   offset: number,
   limit: number,
+  ordering: string
 ) => {
   return queryOptions({
-    queryKey: ["training-history", modelId, offset, limit],
-    queryFn: () => getModelTrainingHistory(modelId, offset, limit),
+    queryKey: ["training-history", modelId, offset, limit, ordering],
+    queryFn: () => getModelTrainingHistory(modelId, offset, limit, ordering),
     placeholderData: keepPreviousData,
     refetchInterval: 10000,
   });

diff --git a/frontend/src/features/models/api/get-trainings.ts b/frontend/src/features/models/api/get-trainings.ts
@@ -26,13 +26,15 @@ export const getModelTrainingHistory = async (
   id: string,
   offset: number,
   limit: number,
+  ordering: string
 ): Promise<PaginatedTrainings> => {
   const res = await apiClient.get(
     API_ENDPOINTS.GET_MODEL_TRAINING_HISTORY(id),
     {
       params: {
         limit,
         offset,
+        ordering
       },
     },
   );

diff --git a/frontend/src/features/models/components/dialogs/training-settings-dialog.tsx b/frontend/src/features/models/components/dialogs/training-settings-dialog.tsx
@@ -3,14 +3,14 @@ import { Dialog } from "@/components/ui/dialog";
 import { ChevronDownIcon } from "@/components/ui/icons";
 import TrainingSettingsForm from "@/features/model-creation/components/training-settings/training-settings-form";
 import { APP_CONTENT } from "@/utils";
-import { useModelDetails } from "../../hooks/use-models";
+import { useModelDetails } from "@/features/models/hooks/use-models";
 import {
   MODEL_CREATION_FORM_NAME,
   useModelsContext,
 } from "@/app/providers/models-provider";
 import { useEffect } from "react";
 import { PAGE_LIMIT } from "@/components/pagination";
-import { useTrainingHistory } from "../../hooks/use-training";
+import { useTrainingHistory } from "@/features/models/hooks/use-training";
 
 type ModelEnhancementDialogProps = {
   isOpened: boolean;
@@ -46,6 +46,7 @@ const ModelTrainingSettingsDialog: React.FC<ModelEnhancementDialogProps> = ({
     modelId as string,
     0,
     PAGE_LIMIT,
+    "-id"
   );
 
   const handleClick = () => {

diff --git a/frontend/src/features/models/components/training-history-table.tsx b/frontend/src/features/models/components/training-history-table.tsx
@@ -41,121 +41,121 @@ const columnDefinitions = (
   handleTrainingModal: (trainingId: number) => void,
   publishTraining: (trainingId: number) => void,
 ): ColumnDef<TTrainingDetails>[] => [
-  {
-    accessorKey: "id",
-    header: ({ column }) => <SortableHeader title={"ID"} column={column} />,
-  },
-  {
-    header:
-      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
-        .epochAndBatchSize,
-    accessorFn: (row) => `${row.epochs}/${row.batch_size}`,
-    cell: (row) => (
-      <span title={row.getValue() as string}>{row.getValue() as string}</span>
-    ),
-  },
-  {
-    accessorKey: "started_at",
-    accessorFn: (row) =>
-      row.started_at !== null ? formatDate(row.started_at) : "-",
-    header:
-      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.startedAt,
-    cell: (row) => {
-      return <span>{row.getValue() as string}</span>;
+    {
+      accessorKey: "id",
+      header: ({ column }) => <SortableHeader title={"ID"} column={column} />,
     },
-  },
-  {
-    header:
-      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.duration,
-    accessorFn: (row) =>
-      row.finished_at && row.started_at
-        ? formatDuration(new Date(row.started_at), new Date(row.finished_at))
-        : "-",
-    cell: (row) => (
-      <span title={row.getValue() as string}>{row.getValue() as string}</span>
-    ),
-  },
-  {
-    accessorKey: "user.username",
-    header:
-      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
-        .sumittedBy,
-    cell: ({ row }) => {
-      return <span>{truncateString(row.original.user.username)}</span>;
+    {
+      header:
+        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
+          .epochAndBatchSize,
+      accessorFn: (row) => `${row.epochs}/${row.batch_size}`,
+      cell: (row) => (
+        <span title={row.getValue() as string}>{row.getValue() as string}</span>
+      ),
     },
-  },
-  {
-    accessorKey: "chips_length",
-    header:
-      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.dsSize,
-    cell: ({ row }) => {
-      return <span>{row.getValue("chips_length") ?? 0}</span>;
+    {
+      accessorKey: "started_at",
+      accessorFn: (row) =>
+        row.started_at !== null ? formatDate(row.started_at) : "-",
+      header:
+        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.startedAt,
+      cell: (row) => {
+        return <span>{row.getValue() as string}</span>;
+      },
     },
-  },
-  {
-    accessorKey: "accuracy",
-    header: ({ column }) => (
-      <SortableHeader
-        title={
-          APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
-            .accuracy
-        }
-        column={column}
-      />
-    ),
-    cell: ({ row }) => {
-      return (
-        <span>
-          {Number(row.getValue("accuracy")) > 0
-            ? roundNumber(row.getValue("accuracy"))
-            : "-"}
-        </span>
-      );
+    {
+      header:
+        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.duration,
+      accessorFn: (row) =>
+        row.finished_at && row.started_at
+          ? formatDuration(new Date(row.started_at), new Date(row.finished_at))
+          : "-",
+      cell: (row) => (
+        <span title={row.getValue() as string}>{row.getValue() as string}</span>
+      ),
+    },
+    {
+      accessorKey: "user.username",
+      header:
+        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
+          .sumittedBy,
+      cell: ({ row }) => {
+        return <span>{truncateString(row.original.user.username)}</span>;
+      },
     },
-  },
-  {
-    header:
-      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.status,
-    accessorKey: "status",
-    cell: (row) => {
-      const statusToVariant: Record<string, TBadgeVariants> = {
-        finished: "green",
-        failed: "red",
-        submitted: "blue",
-        running: "yellow",
-      };
+    {
+      accessorKey: "chips_length",
+      header:
+        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.dsSize,
+      cell: ({ row }) => {
+        return <span>{row.getValue("chips_length") ?? 0}</span>;
+      },
+    },
+    {
+      accessorKey: "accuracy",
+      header: ({ column }) => (
+        <SortableHeader
+          title={
+            APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
+              .accuracy
+          }
+          column={column}
+        />
+      ),
+      cell: ({ row }) => {
+        return (
+          <span>
+            {Number(row.getValue("accuracy")) > 0
+              ? roundNumber(row.getValue("accuracy"))
+              : "-"}
+          </span>
+        );
+      },
+    },
+    {
+      header:
+        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.status,
+      accessorKey: "status",
+      cell: (row) => {
+        const statusToVariant: Record<string, TBadgeVariants> = {
+          finished: "green",
+          failed: "red",
+          submitted: "blue",
+          running: "yellow",
+        };
 
-      return (
-        <Badge
-          variant={
-            statusToVariant[
+        return (
+          <Badge
+            variant={
+              statusToVariant[
               String(row.getValue()).toLocaleLowerCase() as TBadgeVariants
-            ]
-          }
-        >
-          {String(row.getValue()).toLocaleLowerCase() as string}
-        </Badge>
-      );
+              ]
+            }
+          >
+            {String(row.getValue()).toLocaleLowerCase() as string}
+          </Badge>
+        );
+      },
     },
-  },
-  {
-    header:
-      APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.inUse,
+    {
+      header:
+        APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader.inUse,
 
-    cell: ({ row }) => {
-      return (
-        <span>
-          {row.getValue("id") === trainingId ? (
-            <Badge variant="green" rounded>
-              <CheckIcon className="icon" />
-            </Badge>
-          ) : null}
-        </span>
-      );
+      cell: ({ row }) => {
+        return (
+          <span>
+            {row.getValue("id") === trainingId ? (
+              <Badge variant="green" rounded>
+                <CheckIcon className="icon" />
+              </Badge>
+            ) : null}
+          </span>
+        );
+      },
     },
-  },
-  ...(modelOwner !== authUsername
-    ? [
+    ...(modelOwner !== authUsername
+      ? [
         {
           header:
             APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
@@ -174,9 +174,9 @@ const columnDefinitions = (
           },
         },
       ]
-    : []),
-  ...(modelOwner === authUsername && isAuthenticated
-    ? [
+      : []),
+    ...(modelOwner === authUsername && isAuthenticated
+      ? [
         {
           header:
             APP_CONTENT.models.modelsDetailsCard.trainingHistoryTableHeader
@@ -225,8 +225,8 @@ const columnDefinitions = (
           },
         },
       ]
-    : []),
-];
+      : []),
+  ];
 
 const TrainingHistoryTable: React.FC<TrainingHistoryTableProps> = ({
   trainingId,
@@ -240,13 +240,9 @@ const TrainingHistoryTable: React.FC<TrainingHistoryTableProps> = ({
     modelId,
     offset,
     PAGE_LIMIT,
+    "-id"
   );
-  const [sorting, setSorting] = useState<SortingState>([
-    {
-      id: "id",
-      desc: true,
-    },
-  ]);
+  const [sorting, setSorting] = useState<SortingState>();
   const { user, isAuthenticated } = useAuth();
   const { isOpened, openDialog, closeDialog } = useDialog();
   const toast = useToastNotification();

diff --git a/frontend/src/features/models/hooks/use-training.ts b/frontend/src/features/models/hooks/use-training.ts
@@ -53,9 +53,10 @@ export const useTrainingHistory = (
   modelId: string,
   offset: number,
   limit: number,
+  ordering: string
 ) => {
   return useQuery({
-    ...getTrainingHistoryQueryOptions(modelId, offset, limit),
+    ...getTrainingHistoryQueryOptions(modelId, offset, limit, ordering),
     //@ts-expect-error bad type definition
     throwOnError: (error) => error?.response?.status >= 500,
     refetchInterval: 10000, // 10 seconds