From c5a7bf85bdcfdf7f392c5a80bb59c7b3285cab00 Mon Sep 17 00:00:00 2001
From: nabenabe0928 <shuhei.watanabe.utokyo@gmail.com>
Date: Sat, 3 Aug 2024 17:33:40 +0200
Subject: [PATCH] Sort artifact cards by filename

---
 .../ts/components/Artifact/StudyArtifactCards.tsx     | 11 ++++++++++-
 .../ts/components/Artifact/TrialArtifactCards.tsx     | 11 ++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx b/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx
index 9fd12cf4..b24995f2 100644
--- a/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx
+++ b/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx
@@ -41,6 +41,15 @@ export const StudyArtifactCards: FC<{ study: StudyDetail }> = ({ study }) => {
 
   const width = "200px"
   const height = "150px"
+  const artifacts = [...study.artifacts].sort((a, b) => {
+    if (a.filename < b.filename) {
+      return -1
+    } else if (a.filename > b.filename) {
+      return 1
+    } else {
+      return 0
+    }
+  })
 
   return (
     <>
@@ -48,7 +57,7 @@ export const StudyArtifactCards: FC<{ study: StudyDetail }> = ({ study }) => {
         component="div"
         sx={{ display: "flex", flexWrap: "wrap", p: theme.spacing(1, 0) }}
       >
-        {study.artifacts.map((artifact) => {
+        {artifacts.map((artifact) => {
           const urlPath = `/artifacts/${study.id}/${artifact.artifact_id}`
           return (
             <Card
diff --git a/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx b/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx
index e182988d..7bd29c30 100644
--- a/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx
+++ b/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx
@@ -44,6 +44,15 @@ export const TrialArtifactCards: FC<{ trial: Trial }> = ({ trial }) => {
 
   const width = "200px"
   const height = "150px"
+  const artifacts = [...trial.artifacts].sort((a, b) => {
+    if (a.filename < b.filename) {
+      return -1
+    } else if (a.filename > b.filename) {
+      return 1
+    } else {
+      return 0
+    }
+  })
 
   return (
     <>
@@ -57,7 +66,7 @@ export const TrialArtifactCards: FC<{ trial: Trial }> = ({ trial }) => {
         component="div"
         sx={{ display: "flex", flexWrap: "wrap", p: theme.spacing(1, 0) }}
       >
-        {trial.artifacts.map((artifact) => {
+        {artifacts.map((artifact) => {
           const urlPath = `/artifacts/${trial.study_id}/${trial.trial_id}/${artifact.artifact_id}`
           return (
             <Card