Render study note in Markdown

optuna_dashboard/ts/components/Note.tsx

@@ -3,22 +3,33 @@ import {
   Button,
   Card,
   CardContent,
+  CardHeader,
+  IconButton,
+  SxProps,
   TextField,
   Typography,
   useTheme,
 } from "@mui/material"
 import React, { FC, createRef, useState, useEffect } from "react"
+import ReactMarkdown from "react-markdown"
+import remarkGfm from "remark-gfm"
 import LoadingButton from "@mui/lab/LoadingButton"
 import SaveIcon from "@mui/icons-material/Save"
+import EditIcon from "@mui/icons-material/Edit"
+import CloseIcon from "@mui/icons-material/Close"
 
 import { actionCreator } from "../action"
+import Divider from "@mui/material/Divider"
+import { Theme } from "@mui/material/styles"
 
 export const Note: FC<{
   studyId: number
   latestNote: Note
   minRows: number
-}> = ({ studyId, latestNote, minRows }) => {
+  cardSx?: SxProps<Theme>
+}> = ({ studyId, latestNote, minRows, cardSx }) => {
   const theme = useTheme()
+  const [renderMarkdown, setRenderMarkdown] = useState(true)
   const [saving, setSaving] = useState(false)
   const [edited, setEdited] = useState(false)
   const [curNote, setCurNote] = useState({ version: 0, body: "" })
@@ -65,12 +76,19 @@ export const Note: FC<{
     window.onbeforeunload = null
   }
 
-  return (
-    <Card sx={{ margin: theme.spacing(2) }}>
-      <CardContent>
-        <Typography variant="h6" sx={{ fontSize: "1.25rem", fontWeight: 600 }}>
-          Note
-        </Typography>
+  let content
+  if (renderMarkdown) {
+    const defaultBody =
+      "*A markdown editor for taking a memo, related to the study. Click the 'Edit' button in the upper right corner to access the editor.*"
+    content = (
+      <ReactMarkdown
+        children={latestNote.body || defaultBody}
+        remarkPlugins={[remarkGfm]}
+      />
+    )
+  } else {
+    content = (
+      <>
         <TextField
           disabled={saving}
           minRows={minRows}
@@ -123,6 +141,34 @@ export const Note: FC<{
             Save
           </LoadingButton>
         </Box>
+      </>
+    )
+  }
+
+  return (
+    <Card sx={{ margin: theme.spacing(2), ...cardSx }}>
+      <CardHeader
+        title="Note"
+        action={
+          !renderMarkdown ? (
+            <IconButton
+              onClick={() => {
+                setRenderMarkdown(true)
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          ) : (
+            <IconButton onClick={() => setRenderMarkdown(false)}>
+              <EditIcon />
+            </IconButton>
+          )
+        }
+        sx={{ paddingBottom: 0 }}
+      />
+      <CardContent sx={{ paddingTop: theme.spacing(1) }}>
+        <Divider />
+        {content}
       </CardContent>
     </Card>
   )

optuna_dashboard/ts/components/StudyDetailBeta.tsx

@@ -2,9 +2,9 @@ import React, { FC, useEffect } from "react"
 import { useRecoilValue } from "recoil"
 import { Link, useParams } from "react-router-dom"
 import {
+  Box,
   Card,
   CardContent,
-  Box,
   Typography,
   useTheme,
   IconButton,
@@ -107,7 +107,13 @@ export const StudyDetailBeta: FC<{
         <Grid2 container spacing={2}>
           <Grid2 xs={6}>
             <Card sx={{ margin: theme.spacing(2) }}>
-              <CardContent>
+              <CardContent
+                sx={{
+                  alignItems: "center",
+                  display: "flex",
+                  flexDirection: "column",
+                }}
+              >
                 {studyDetail !== null &&
                   studyDetail.best_trials.length === 1 && (
                     <>
@@ -119,7 +125,7 @@ export const StudyDetailBeta: FC<{
                       </Typography>
                       <Typography
                         variant="h3"
-                        sx={{ fontWeight: 600 }}
+                        sx={{ fontWeight: 600, marginBottom: theme.spacing(2) }}
                         color="secondary"
                       >
                         {studyDetail.best_trials[0].values}
@@ -174,7 +180,13 @@ export const StudyDetailBeta: FC<{
           </Grid2>
           <Grid2 xs={6}>
             <Card sx={{ margin: theme.spacing(2) }}>
-              <CardContent>
+              <CardContent
+                sx={{
+                  alignItems: "center",
+                  display: "flex",
+                  flexDirection: "column",
+                }}
+              >
                 <Typography
                   variant="h6"
                   sx={{ margin: "1em 0", fontWeight: 600 }}
@@ -233,15 +245,15 @@ export const StudyDetailBeta: FC<{
         </CardContent>
       </Card>
     )
-  } else if (page === "note") {
-    content =
-      studyDetail !== null ? (
-        <Note
-          studyId={studyIdNumber}
-          latestNote={studyDetail.note}
-          minRows={30}
-        />
-      ) : null
+  } else if (page === "note" && studyDetail !== null) {
+    content = (
+      <Note
+        studyId={studyIdNumber}
+        latestNote={studyDetail.note}
+        minRows={30}
+        cardSx={{ height: "90vh" }}
+      />
+    )
   }
 
   const toolbar = (

package.json

@@ -26,8 +26,10 @@
     "plotly.js-dist-min": "^2.17.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-markdown": "^8.0.4",
     "react-router-dom": "^5.3.4",
-    "recoil": "^0.7.6"
+    "recoil": "^0.7.6",
+    "remark-gfm": "^3.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.14.3",