Merge pull request #587 from moririn2528/preferential-analysis

Add analytics page for preferential

optuna_dashboard/ts/components/AppDrawer.tsx

@@ -204,21 +204,19 @@ export const AppDrawer: FC<{
                 />
               </ListItemButton>
             </ListItem>
-            {!isPreferential && (
-              <ListItem key="Analytics" disablePadding sx={styleListItem}>
-                <ListItemButton
-                  component={Link}
-                  to={`${URL_PREFIX}/studies/${studyId}/analytics`}
-                  sx={styleListItemButton}
-                  selected={page === "analytics"}
-                >
-                  <ListItemIcon sx={styleListItemIcon}>
-                    <QueryStatsIcon />
-                  </ListItemIcon>
-                  <ListItemText primary="Analytics" sx={styleListItemText} />
-                </ListItemButton>
-              </ListItem>
-            )}
+            <ListItem key="Analytics" disablePadding sx={styleListItem}>
+              <ListItemButton
+                component={Link}
+                to={`${URL_PREFIX}/studies/${studyId}/analytics`}
+                sx={styleListItemButton}
+                selected={page === "analytics"}
+              >
+                <ListItemIcon sx={styleListItemIcon}>
+                  <QueryStatsIcon />
+                </ListItemIcon>
+                <ListItemText primary="Analytics" sx={styleListItemText} />
+              </ListItemButton>
+            </ListItem>
             <ListItem key="TableList" disablePadding sx={styleListItem}>
               <ListItemButton
                 component={Link}

optuna_dashboard/ts/components/BestTrialsCard.tsx

@@ -96,9 +96,11 @@ export const BestTrialsCard: FC<{
                       <Typography variant="h5">Trial {trial.number}</Typography>
                     }
                   />
-                  <Typography>
-                    Objective Values = [{trial.values?.join(", ")}]
-                  </Typography>
+                  {studyDetail?.is_preferential ? null : (
+                    <Typography>
+                      Objective Values = [{trial.values?.join(", ")}]
+                    </Typography>
+                  )}
                   <Typography>
                     Params = [
                     {trial.params

optuna_dashboard/ts/components/GraphContour.tsx

@@ -11,6 +11,7 @@ import {
   useTheme,
   Box,
 } from "@mui/material"
+import blue from "@mui/material/colors/blue"
 import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 import { useMergedUnionSearchSpace } from "../searchSpace"
 
@@ -211,32 +212,62 @@ const plotContour = (
     }
   })
 
+  if (!study.is_preferential) {
+    const plotData: Partial<plotly.PlotData>[] = [
+      {
+        type: "contour",
+        x: xIndices,
+        y: yIndices,
+        z: zValues,
+        colorscale: "Blues",
+        connectgaps: true,
+        hoverinfo: "none",
+        line: {
+          smoothing: 1.3,
+        },
+        reversescale: study.directions[objectiveId] !== "minimize",
+        // https://github.com/plotly/react-plotly.js/issues/251
+        // @ts-ignore
+        contours: {
+          coloring: "heatmap",
+        },
+      },
+      {
+        type: "scatter",
+        x: xValues,
+        y: yValues,
+        marker: { line: { width: 2.0, color: "Grey" }, color: "black" },
+        mode: "markers",
+        showlegend: false,
+      },
+    ]
+    plotly.react(plotDomId, plotData, layout)
+    return
+  }
+
+  layout.legend = {
+    y: 0.8,
+  }
+  const bestTrialIndices = study.best_trials.map((trial) => trial.number)
   const plotData: Partial<plotly.PlotData>[] = [
     {
-      type: "contour",
-      x: xIndices,
-      y: yIndices,
-      z: zValues,
-      colorscale: "Blues",
-      connectgaps: true,
-      hoverinfo: "none",
-      line: {
-        smoothing: 1.3,
-      },
-      reversescale: study.directions[objectiveId] !== "minimize",
-      // https://github.com/plotly/react-plotly.js/issues/251
-      // @ts-ignore
-      contours: {
-        coloring: "heatmap",
+      type: "scatter",
+      x: xValues.filter((_, i) => bestTrialIndices.includes(i)),
+      y: yValues.filter((_, i) => bestTrialIndices.includes(i)),
+      marker: {
+        line: { width: 2.0, color: "Grey" },
+        color: blue[200],
       },
+      name: "best trials",
+      mode: "markers",
     },
     {
       type: "scatter",
-      x: xValues,
-      y: yValues,
+      x: xValues.filter((_, i) => !bestTrialIndices.includes(i)),
+      y: yValues.filter((_, i) => !bestTrialIndices.includes(i)),
       marker: { line: { width: 2.0, color: "Grey" }, color: "black" },
+      name: "others",
       mode: "markers",
-      showlegend: false,
     },
   ]
   plotly.react(plotDomId, plotData, layout)

optuna_dashboard/ts/components/PreferentialAnalytics.tsx

@@ -0,0 +1,68 @@
+import React, { FC } from "react"
+import {
+  Box,
+  Card,
+  CardContent,
+  Paper,
+  Typography,
+  useTheme,
+} from "@mui/material"
+import Grid2 from "@mui/material/Unstable_Grid2"
+import { DataGrid, DataGridColumn } from "./DataGrid"
+import { BestTrialsCard } from "./BestTrialsCard"
+import { useStudyDetailValue, useStudySummaryValue } from "../state"
+import { Contour } from "./GraphContour"
+
+export const PreferentialAnalytics: FC<{ studyId: number }> = ({ studyId }) => {
+  const theme = useTheme()
+  const studySummary = useStudySummaryValue(studyId)
+  const studyDetail = useStudyDetailValue(studyId)
+
+  const userAttrs = studySummary?.user_attrs || studyDetail?.user_attrs || []
+  const userAttrColumns: DataGridColumn<Attribute>[] = [
+    { field: "key", label: "Key", sortable: true },
+    { field: "value", label: "Value", sortable: true },
+  ]
+  return (
+    <Box sx={{ display: "flex", width: "100%", flexDirection: "column" }}>
+      <Grid2 container spacing={2} sx={{ padding: theme.spacing(0, 2) }}>
+        <Grid2 xs={14}>
+          <Paper elevation={2} sx={{ padding: theme.spacing(2) }}>
+            <Contour study={studyDetail} />
+          </Paper>
+        </Grid2>
+        <Grid2 xs={6} spacing={2}>
+          <BestTrialsCard studyDetail={studyDetail} />
+        </Grid2>
+        <Grid2 xs={6}>
+          <Card>
+            <CardContent
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+              }}
+            >
+              <Typography
+                variant="h6"
+                sx={{
+                  margin: "1em 0",
+                  fontWeight: theme.typography.fontWeightBold,
+                }}
+              >
+                Study User Attributes
+              </Typography>
+              <DataGrid<Attribute>
+                columns={userAttrColumns}
+                rows={userAttrs}
+                keyField={"key"}
+                dense={true}
+                initialRowsPerPage={5}
+                rowsPerPageOption={[5, 10, { label: "All", value: -1 }]}
+              />
+            </CardContent>
+          </Card>
+        </Grid2>
+      </Grid2>
+    </Box>
+  )
+}

optuna_dashboard/ts/components/StudyDetail.tsx

@@ -30,6 +30,7 @@ import { GraphEdf } from "./GraphEdf"
 import { TrialList } from "./TrialList"
 import { StudyHistory } from "./StudyHistory"
 import { PreferentialTrials } from "./PreferentialTrials"
+import { PreferentialAnalytics } from "./PreferentialAnalytics"
 
 interface ParamTypes {
   studyId: string
@@ -98,7 +99,9 @@ export const StudyDetail: FC<{
       <StudyHistory studyId={studyId} />
     )
   } else if (page === "analytics") {
-    content = (
+    content = isPreferential ? (
+      <PreferentialAnalytics studyId={studyId} />
+    ) : (
       <Box sx={{ display: "flex", width: "100%", flexDirection: "column" }}>
         <Typography variant="h5" sx={{ margin: theme.spacing(2) }}>
           Hyperparameter Relationships