follow output component in history

optuna_dashboard/ts/apiClient.ts

@@ -94,6 +94,8 @@ interface StudyDetailResponse {
   form_widgets?: FormWidgets
   preference_history?: PreferenceHistoryResponce[]
   plotly_graph_objects: PlotlyGraphObject[]
+  feedback_component_type?: FeedbackComponentType
+  feedback_artifact_key?: string
 }
 
 export const getStudyDetailAPI = (
@@ -129,8 +131,9 @@ export const getStudyDetailAPI = (
         objective_names: res.data.objective_names,
         form_widgets: res.data.form_widgets,
         is_preferential: res.data.is_preferential,
-        feedback_component_type: res.data
-          .feedback_component_type as FeedbackComponentType,
+        feedback_component_type: res.data.feedback_component_type
+          ? (res.data.feedback_component_type as FeedbackComponentType)
+          : "Note",
         feedback_artifact_key: res.data.feedback_artifact_key,
         preference_history: res.data.preference_history?.map(
           convertPreferenceHistory

optuna_dashboard/ts/components/PreferenceHistory.tsx

@@ -14,8 +14,9 @@ import Modal from "@mui/material/Modal"
 import { red } from "@mui/material/colors"
 
 import { TrialListDetail } from "./TrialList"
-import { MarkdownRenderer } from "./Note"
+import { OutputContent, getArtifactUrlPath } from "./PreferentialTrials"
 import { formatDate } from "../dateUtil"
+import { useStudyDetailValue } from "../state"
 
 type TrialType = "worst" | "none"
 
@@ -26,8 +27,21 @@ const CandidateTrial: FC<{
   const theme = useTheme()
   const trialWidth = 300
   const trialHeight = 300
+  const studyDetail = useStudyDetailValue(trial.study_id)
   const [detailShown, setDetailShown] = useState(false)
 
+  if (studyDetail === null) {
+    return null
+  }
+  const componentId = studyDetail.feedback_component_type
+  const artifactKey = studyDetail.feedback_artifact_key
+  const artifactId = trial.user_attrs.find((a) => a.key === artifactKey)?.value
+  const artifact = trial.artifacts.find((a) => a.artifact_id === artifactId)
+  const urlPath =
+    artifactId !== undefined
+      ? getArtifactUrlPath(trial.study_id, trial.trial_id, artifactId)
+      : ""
+
   const cardComponentSx = {
     padding: 0,
     position: "relative",
@@ -76,7 +90,12 @@ const CandidateTrial: FC<{
             padding: theme.spacing(2),
           }}
         >
-          <MarkdownRenderer body={trial.note.body} />
+          <OutputContent
+            trial={trial}
+            artifact={artifact}
+            componentId={componentId}
+            urlPath={urlPath}
+          />
         </Box>
 
         {type === "worst" ? (

optuna_dashboard/ts/components/PreferentialTrials.tsx

@@ -163,7 +163,7 @@ const SettingsPage: FC<{
   )
 }
 
-const OutputContent: FC<{
+export const OutputContent: FC<{
   trial: Trial
   artifact?: Artifact
   componentId: FeedbackComponentType
@@ -184,6 +184,14 @@ const OutputContent: FC<{
   return null
 }
 
+export const getArtifactUrlPath = (
+  studyId: number,
+  trialId: number,
+  artifactId: string
+) => {
+  return `/artifacts/${studyId}/${trialId}/${artifactId}`
+}
+
 const PreferentialTrial: FC<{
   trial?: Trial
   studyDetail: StudyDetail
@@ -204,11 +212,14 @@ const PreferentialTrial: FC<{
   const [buttonHover, setButtonHover] = useState(false)
   const trialWidth = 400
   const trialHeight = 300
-  const componentId = studyDetail.feedback_component_type ?? "Note"
+  const componentId = studyDetail.feedback_component_type
   const artifactKey = studyDetail.feedback_artifact_key
   const artifactId = trial?.user_attrs.find((a) => a.key === artifactKey)?.value
   const artifact = trial?.artifacts.find((a) => a.artifact_id === artifactId)
-  const urlPath = `/artifacts/${studyDetail.id}/${trial?.trial_id}/${artifact?.artifact_id}`
+  const urlPath =
+    trial !== undefined && artifactId !== undefined
+      ? getArtifactUrlPath(studyDetail.id, trial?.trial_id, artifactId)
+      : ""
   const is3dModel =
     componentId === "Artifact" &&
     artifact !== undefined &&

optuna_dashboard/ts/types/index.d.ts

@@ -204,7 +204,7 @@ type StudyDetail = {
   is_preferential: boolean
   objective_names?: string[]
   form_widgets?: FormWidgets
-  feedback_component_type?: FeedbackComponentType
+  feedback_component_type: FeedbackComponentType
   feedback_artifact_key?: string
   preference_history?: PreferenceHistory[]
   plotly_graph_objects: PlotlyGraphObject[]