Fix

optuna_dashboard/ts/components/Preferential/PreferentialGraph.tsx

@@ -27,6 +27,7 @@ import { StudyDetail, Trial } from "ts/types/optuna"
 import { useStudyDetailValue } from "../../state"
 import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
 import { getArtifactUrlPath } from "./PreferentialTrials"
+import { useConstants } from "../../constantsProvider"
 
 const elk = new ELK()
 const nodeWidth = 400
@@ -39,6 +40,7 @@ type NodeData = {
 }
 const GraphNode: FC<NodeProps<NodeData>> = ({ data, isConnectable }) => {
   const theme = useTheme()
+  const {environment} = useConstants()
   const trial = data.trial
   if (trial === undefined) {
     return null
@@ -56,7 +58,7 @@ const GraphNode: FC<NodeProps<NodeData>> = ({ data, isConnectable }) => {
   const artifact = trial.artifacts.find((a) => a.artifact_id === artifactId)
   const urlPath =
     artifactId !== undefined
-      ? getArtifactUrlPath(trial.study_id, trial.trial_id, artifactId)
+      ? getArtifactUrlPath(environment, trial.study_id, trial.trial_id, artifactId)
       : ""
 
   return (

optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx

@@ -22,6 +22,7 @@ import { useStudyDetailValue } from "../../state"
 import { TrialListDetail } from "../TrialList"
 import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
 import { getArtifactUrlPath } from "./PreferentialTrials"
+import { useConstants } from "../../constantsProvider"
 
 type TrialType = "worst" | "none"
 
@@ -30,6 +31,7 @@ const CandidateTrial: FC<{
   type: TrialType
 }> = ({ trial, type }) => {
   const theme = useTheme()
+  const {environment} = useConstants()
   const trialWidth = 300
   const trialHeight = 300
   const studyDetail = useStudyDetailValue(trial.study_id)
@@ -47,7 +49,7 @@ const CandidateTrial: FC<{
   const artifact = trial.artifacts.find((a) => a.artifact_id === artifactId)
   const urlPath =
     artifactId !== undefined
-      ? getArtifactUrlPath(trial.study_id, trial.trial_id, artifactId)
+      ? getArtifactUrlPath(environment, trial.study_id, trial.trial_id, artifactId)
       : ""
 
   const cardComponentSx = {

optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx

@@ -42,6 +42,7 @@ import {
 } from "../Artifact/ThreejsArtifactViewer"
 import { TrialListDetail } from "../TrialList"
 import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
+import { useConstants } from "../../constantsProvider"
 
 const SettingsPage: FC<{
   studyDetail: StudyDetail
@@ -178,11 +179,13 @@ const isComparisonReady = (
 }
 
 export const getArtifactUrlPath = (
+  environment: "jupyterlab" | "optuna-dashboard",
   studyId: number,
   trialId: number,
   artifactId: string
 ): string => {
-  return `/artifacts/${studyId}/${trialId}/${artifactId}`
+  const apiNamespace = environment === "jupyterlab" ? "/jupyterlab-optuna": ""
+  return `${apiNamespace}/artifacts/${studyId}/${trialId}/${artifactId}`
 }
 
 const PreferentialTrial: FC<{
@@ -201,6 +204,7 @@ const PreferentialTrial: FC<{
   openThreejsArtifactModal,
 }) => {
   const theme = useTheme()
+  const {environment} = useConstants()
   const action = actionCreator()
   const [buttonHover, setButtonHover] = useState(false)
   const trialWidth = 400
@@ -214,7 +218,7 @@ const PreferentialTrial: FC<{
   const artifact = trial?.artifacts.find((a) => a.artifact_id === artifactId)
   const urlPath =
     trial !== undefined && artifactId !== undefined
-      ? getArtifactUrlPath(studyDetail.id, trial?.trial_id, artifactId)
+      ? getArtifactUrlPath(environment, studyDetail.id, trial?.trial_id, artifactId)
       : ""
   const is3dModel =
     componentType.output_type === "artifact" &&