Merge pull request #862 from porink0424/feat/separate-react-component

Separated UI components into `@optuna/react` (Continued from #851)

standalone_app/package.json

@@ -8,6 +8,7 @@
     "build:vscode": "webpack"
   },
   "devDependencies": {
+    "@optuna/types": "../tslib/types",
     "@types/plotly.js": "^2.29.2",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",

standalone_app/src/components/StudyDetail.tsx

@@ -13,11 +13,16 @@ import {
   useTheme,
 } from "@mui/material"
 import Grid2 from "@mui/material/Unstable_Grid2"
-import { PlotHistory, TrialTable } from "@optuna/react"
+import {
+  PlotHistory,
+  PlotImportance,
+  PlotIntermediateValues,
+  TrialTable,
+} from "@optuna/react"
+import * as Optuna from "@optuna/types"
+import init, { wasm_fanova_calculate } from "optuna"
 import React, { FC, useContext, useState, useEffect } from "react"
 import { Link, useParams } from "react-router-dom"
-import { PlotImportance } from "./PlotImportance"
-import { PlotIntermediateValues } from "./PlotIntermediateValues"
 import { StorageContext } from "./StorageProvider"
 
 export const StudyDetail: FC<{
@@ -40,6 +45,68 @@ export const StudyDetail: FC<{
     fetchStudy()
   }, [storage, idxNumber])
 
+  const [importance, setImportance] = useState<Optuna.ParamImportance[][]>([])
+  const filterFunc = (trial: Optuna.Trial, objectiveId: number): boolean => {
+    if (trial.state !== "Complete" && trial.state !== "Pruned") {
+      return false
+    }
+    if (trial.values === undefined) {
+      return false
+    }
+    return (
+      trial.values.length > objectiveId &&
+      trial.values[objectiveId] !== Infinity &&
+      trial.values[objectiveId] !== -Infinity
+    )
+  }
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    async function run_wasm() {
+      if (study === null) {
+        return
+      }
+
+      await init()
+
+      const x: Optuna.ParamImportance[][] = study.directions.map(
+        (_d, objectiveId) => {
+          const filteredTrials = study.trials.filter((t) =>
+            filterFunc(t, objectiveId)
+          )
+          if (filteredTrials.length === 0) {
+            return study.union_search_space.map((s) => {
+              return {
+                name: s.name,
+                importance: 0.5,
+              }
+            })
+          }
+
+          const features = study.intersection_search_space.map((s) =>
+            filteredTrials
+              .map(
+                (t) =>
+                  t.params.find((p) => p.name === s.name) as Optuna.TrialParam
+              )
+              .map((p) => p.param_internal_value)
+          )
+          const values = filteredTrials.map(
+            (t) => t.values?.[objectiveId] as number
+          )
+          // TODO: handle errors thrown by wasm_fanova_calculate
+          const importance = wasm_fanova_calculate(features, values)
+          return study.intersection_search_space.map((s, i) => ({
+            name: s.name,
+            importance: importance[i],
+          }))
+        }
+      )
+      setImportance(x)
+    }
+
+    run_wasm()
+  }, [study])
+
   return (
     <>
       <AppBar position="static">
@@ -113,7 +180,9 @@ export const StudyDetail: FC<{
             <Grid2 xs={6}>
               <Card sx={{ margin: theme.spacing(2) }}>
                 <CardContent>
-                  {!!study && <PlotImportance study={study} />}
+                  {!!study && (
+                    <PlotImportance study={study} importance={importance} />
+                  )}
                 </CardContent>
               </Card>
             </Grid2>

tslib/react/.gitignore

@@ -24,3 +24,6 @@ types
 
 # sample db
 !public/sample_db.sqlite3
+
+# test assets
+test/asset