diff --git a/optuna_dashboard/ts/components/Preferential/PreferentialGraph.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialGraph.tsx
index 38bf0f0c..777fb77a 100644
--- a/optuna_dashboard/ts/components/Preferential/PreferentialGraph.tsx
+++ b/optuna_dashboard/ts/components/Preferential/PreferentialGraph.tsx
@@ -24,10 +24,10 @@ import ReactFlow, {
 import "reactflow/dist/style.css"
 
 import { StudyDetail, Trial } from "ts/types/optuna"
+import { useConstants } from "../../constantsProvider"
 import { useStudyDetailValue } from "../../state"
 import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
 import { getArtifactUrlPath } from "./PreferentialTrials"
-import { useConstants } from "../../constantsProvider"
 
 const elk = new ELK()
 const nodeWidth = 400
@@ -40,7 +40,7 @@ type NodeData = {
 }
 const GraphNode: FC<NodeProps<NodeData>> = ({ data, isConnectable }) => {
   const theme = useTheme()
-  const {environment} = useConstants()
+  const { environment } = useConstants()
   const trial = data.trial
   if (trial === undefined) {
     return null
@@ -58,7 +58,12 @@ const GraphNode: FC<NodeProps<NodeData>> = ({ data, isConnectable }) => {
   const artifact = trial.artifacts.find((a) => a.artifact_id === artifactId)
   const urlPath =
     artifactId !== undefined
-      ? getArtifactUrlPath(environment, trial.study_id, trial.trial_id, artifactId)
+      ? getArtifactUrlPath(
+          environment,
+          trial.study_id,
+          trial.trial_id,
+          artifactId
+        )
       : ""
 
   return (
diff --git a/optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx
index a77941db..c187fe81 100644
--- a/optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx
+++ b/optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx
@@ -17,12 +17,12 @@ import React, { FC, useState } from "react"
 
 import { PreferenceHistory, StudyDetail, Trial } from "ts/types/optuna"
 import { actionCreator } from "../../action"
+import { useConstants } from "../../constantsProvider"
 import { formatDate } from "../../dateUtil"
 import { useStudyDetailValue } from "../../state"
 import { TrialListDetail } from "../TrialList"
 import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
 import { getArtifactUrlPath } from "./PreferentialTrials"
-import { useConstants } from "../../constantsProvider"
 
 type TrialType = "worst" | "none"
 
@@ -31,7 +31,7 @@ const CandidateTrial: FC<{
   type: TrialType
 }> = ({ trial, type }) => {
   const theme = useTheme()
-  const {environment} = useConstants()
+  const { environment } = useConstants()
   const trialWidth = 300
   const trialHeight = 300
   const studyDetail = useStudyDetailValue(trial.study_id)
@@ -49,7 +49,12 @@ const CandidateTrial: FC<{
   const artifact = trial.artifacts.find((a) => a.artifact_id === artifactId)
   const urlPath =
     artifactId !== undefined
-      ? getArtifactUrlPath(environment, trial.study_id, trial.trial_id, artifactId)
+      ? getArtifactUrlPath(
+          environment,
+          trial.study_id,
+          trial.trial_id,
+          artifactId
+        )
       : ""
 
   const cardComponentSx = {
diff --git a/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx
index 8e2ddba7..60fe468c 100644
--- a/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx
+++ b/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx
@@ -36,13 +36,13 @@ import {
   Trial,
 } from "ts/types/optuna"
 import { actionCreator } from "../../action"
+import { useConstants } from "../../constantsProvider"
 import {
   isThreejsArtifact,
   useThreejsArtifactModal,
 } from "../Artifact/ThreejsArtifactViewer"
 import { TrialListDetail } from "../TrialList"
 import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
-import { useConstants } from "../../constantsProvider"
 
 const SettingsPage: FC<{
   studyDetail: StudyDetail
@@ -184,7 +184,7 @@ export const getArtifactUrlPath = (
   trialId: number,
   artifactId: string
 ): string => {
-  const apiNamespace = environment === "jupyterlab" ? "/jupyterlab-optuna": ""
+  const apiNamespace = environment === "jupyterlab" ? "/jupyterlab-optuna" : ""
   return `${apiNamespace}/artifacts/${studyId}/${trialId}/${artifactId}`
 }
 
@@ -204,7 +204,7 @@ const PreferentialTrial: FC<{
   openThreejsArtifactModal,
 }) => {
   const theme = useTheme()
-  const {environment} = useConstants()
+  const { environment } = useConstants()
   const action = actionCreator()
   const [buttonHover, setButtonHover] = useState(false)
   const trialWidth = 400
@@ -218,7 +218,12 @@ const PreferentialTrial: FC<{
   const artifact = trial?.artifacts.find((a) => a.artifact_id === artifactId)
   const urlPath =
     trial !== undefined && artifactId !== undefined
-      ? getArtifactUrlPath(environment, studyDetail.id, trial?.trial_id, artifactId)
+      ? getArtifactUrlPath(
+          environment,
+          studyDetail.id,
+          trial?.trial_id,
+          artifactId
+        )
       : ""
   const is3dModel =
     componentType.output_type === "artifact" &&