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/GraphContour.tsx

@@ -212,24 +212,26 @@ const plotContour = (
   })
 
   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",
-      },
-    },
+    study.is_preferential
+      ? {}
+      : {
+          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,

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