From 9a4f91ce07962cd7683c8867ef974f372bde7dfa Mon Sep 17 00:00:00 2001
From: moririn2528 <strangenoise1@gmail.com>
Date: Fri, 15 Sep 2023 19:30:58 +0900
Subject: [PATCH] split output component

---
 .../ts/components/PreferenceHistory.tsx       |  5 ++--
 .../ts/components/PreferentialGraph.tsx       |  5 ++--
 .../PreferentialOutputComponent.tsx           | 26 ++++++++++++++++
 .../ts/components/PreferentialTrials.tsx      | 30 ++-----------------
 4 files changed, 35 insertions(+), 31 deletions(-)
 create mode 100644 optuna_dashboard/ts/components/PreferentialOutputComponent.tsx

diff --git a/optuna_dashboard/ts/components/PreferenceHistory.tsx b/optuna_dashboard/ts/components/PreferenceHistory.tsx
index 97a19dfe..e9c4948c 100644
--- a/optuna_dashboard/ts/components/PreferenceHistory.tsx
+++ b/optuna_dashboard/ts/components/PreferenceHistory.tsx
@@ -14,9 +14,10 @@ import Modal from "@mui/material/Modal"
 import { red } from "@mui/material/colors"
 
 import { TrialListDetail } from "./TrialList"
-import { OutputContent, getArtifactUrlPath } from "./PreferentialTrials"
+import { getArtifactUrlPath } from "./PreferentialTrials"
 import { formatDate } from "../dateUtil"
 import { useStudyDetailValue } from "../state"
+import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
 
 type TrialType = "worst" | "none"
 
@@ -93,7 +94,7 @@ const CandidateTrial: FC<{
             padding: theme.spacing(2),
           }}
         >
-          <OutputContent
+          <PreferentialOutputComponent
             trial={trial}
             artifact={artifact}
             componentType={componentType}
diff --git a/optuna_dashboard/ts/components/PreferentialGraph.tsx b/optuna_dashboard/ts/components/PreferentialGraph.tsx
index 1c2e38ff..4f2c1059 100644
--- a/optuna_dashboard/ts/components/PreferentialGraph.tsx
+++ b/optuna_dashboard/ts/components/PreferentialGraph.tsx
@@ -24,7 +24,8 @@ import ELK from "elkjs/lib/elk.bundled.js"
 import { ElkNode } from "elkjs/lib/elk-api.js"
 
 import { useStudyDetailValue } from "../state"
-import { OutputContent, getArtifactUrlPath } from "./PreferentialTrials"
+import { getArtifactUrlPath } from "./PreferentialTrials"
+import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
 
 const elk = new ELK()
 const nodeWidth = 400
@@ -91,7 +92,7 @@ const GraphNode: FC<NodeProps<NodeData>> = ({ data, isConnectable }) => {
         isConnectable={isConnectable}
       />
       <CardContent>
-        <OutputContent
+        <PreferentialOutputComponent
           trial={trial}
           artifact={artifact}
           componentType={componentType}
diff --git a/optuna_dashboard/ts/components/PreferentialOutputComponent.tsx b/optuna_dashboard/ts/components/PreferentialOutputComponent.tsx
new file mode 100644
index 00000000..f1598a2e
--- /dev/null
+++ b/optuna_dashboard/ts/components/PreferentialOutputComponent.tsx
@@ -0,0 +1,26 @@
+import React, { FC, useMemo } from "react"
+import { ArtifactCardMedia } from "./ArtifactCardMedia"
+import { MarkdownRenderer } from "./Note"
+
+export const PreferentialOutputComponent: FC<{
+  trial: Trial
+  artifact?: Artifact
+  componentType: FeedbackComponentType
+  urlPath: string
+}> = ({ trial, artifact, componentType, urlPath }) => {
+  const note = useMemo(() => {
+    return <MarkdownRenderer body={trial.note.body} />
+  }, [trial.note.body])
+  if (componentType === undefined || componentType.output_type === "note") {
+    return note
+  }
+  if (componentType.output_type === "artifact") {
+    if (artifact === undefined) {
+      return null
+    }
+    return (
+      <ArtifactCardMedia artifact={artifact} urlPath={urlPath} height="100%" />
+    )
+  }
+  return null
+}
diff --git a/optuna_dashboard/ts/components/PreferentialTrials.tsx b/optuna_dashboard/ts/components/PreferentialTrials.tsx
index 120c317b..27f3a8d5 100644
--- a/optuna_dashboard/ts/components/PreferentialTrials.tsx
+++ b/optuna_dashboard/ts/components/PreferentialTrials.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState, useMemo } from "react"
+import React, { FC, useEffect, useState } from "react"
 import {
   Typography,
   Box,
@@ -32,8 +32,7 @@ import {
   isThreejsArtifact,
   useThreejsArtifactModal,
 } from "./ThreejsArtifactViewer"
-import { ArtifactCardMedia } from "./ArtifactCardMedia"
-import { MarkdownRenderer } from "./Note"
+import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
 
 const SettingsPage: FC<{
   studyDetail: StudyDetail
@@ -169,29 +168,6 @@ const isComparisonReady = (
   return false
 }
 
-export const OutputContent: FC<{
-  trial: Trial
-  artifact?: Artifact
-  componentType: FeedbackComponentType
-  urlPath: string
-}> = ({ trial, artifact, componentType, urlPath }) => {
-  const note = useMemo(() => {
-    return <MarkdownRenderer body={trial.note.body} />
-  }, [trial.note.body])
-  if (componentType === undefined || componentType.output_type === "note") {
-    return note
-  }
-  if (componentType.output_type === "artifact") {
-    if (artifact === undefined) {
-      return null
-    }
-    return (
-      <ArtifactCardMedia artifact={artifact} urlPath={urlPath} height="100%" />
-    )
-  }
-  return null
-}
-
 export const getArtifactUrlPath = (
   studyId: number,
   trialId: number,
@@ -338,7 +314,7 @@ const PreferentialTrial: FC<{
       >
         {isReady ? (
           <>
-            <OutputContent
+            <PreferentialOutputComponent
               trial={trial}
               artifact={artifact}
               componentType={componentType}