関数とパラメーターに説明のリンク追加

frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx

@@ -1,6 +1,9 @@
 import { memo, useContext, useEffect } from "react"
 import { useSelector, useDispatch } from "react-redux"
 
+import { Launch } from "@mui/icons-material"
+import { Tooltip } from "@mui/material"
+
 import { createParamFormItemComponent } from "components/common/ParamFormItemCreator"
 import { SectionTitle } from "components/common/ParamSection"
 import { ParamFormContext } from "components/Workspace/FlowChart/RightDrawer/ParamFormContents"
@@ -26,14 +29,31 @@ export const AlgorithmParamForm = memo(function AlgorithmParamForm() {
     selectAlgorithmParamsKeyList(nodeId),
     arrayEqualityFn,
   )
+  const parameterUrl = `https://github.com/arayabrain/barebone-studio/blob/develop-main/docs/specifications/algorithm_nodes.md#${algoName.toLowerCase()}`
   useEffect(() => {
     if (!algoParamIsLoaded) {
       dispatch(getAlgoParams({ nodeId, algoName }))
     }
   }, [dispatch, nodeId, algoName, algoParamIsLoaded])
   return (
     <div style={{ padding: 24 }}>
-      <SectionTitle>{algoName}</SectionTitle>
+      <div style={{ display: "flex" }}>
+        <SectionTitle>{algoName}</SectionTitle>
+        <a
+          href={parameterUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{
+            textDecoration: "underline",
+            color: "inherit",
+            cursor: "pointer",
+          }}
+        >
+          <Tooltip title="Check Documentation">
+            <Launch style={{ fontSize: "16px" }} />
+          </Tooltip>
+        </a>
+      </div>
       {paramKeyList.map((paramKey) => (
         <ParamItem key={paramKey} paramKey={paramKey} />
       ))}

frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx

@@ -1,7 +1,9 @@
 import { FC } from "react"
 import { useSelector, useDispatch } from "react-redux"
 
+import { Launch } from "@mui/icons-material"
 import ChevronRightIcon from "@mui/icons-material/ChevronRight"
+import { Tooltip } from "@mui/material"
 import Box from "@mui/material/Box"
 import Divider from "@mui/material/Divider"
 import Drawer, { drawerClasses } from "@mui/material/Drawer"
@@ -41,6 +43,24 @@ const RightDrawer: FC = () => {
         return "none"
     }
   })
+  const readTheDocsUrl =
+    "https://optinist.readthedocs.io/en/latest/gui/workflow.html"
+  const useRightDrawerSettings = () => {
+    const mode = useSelector((state: RootState) => selectRightDrawerMode(state))
+
+    const titleLink =
+      mode === RIGHT_DRAWER_MODE.NWB
+        ? `${readTheDocsUrl}#nwb-setting`
+        : mode === RIGHT_DRAWER_MODE.SNAKEMAKE
+          ? `${readTheDocsUrl}#snakemane-settings`
+          : ""
+
+    const showLaunch =
+      mode === RIGHT_DRAWER_MODE.NWB || mode === RIGHT_DRAWER_MODE.SNAKEMAKE
+
+    return { titleLink, showLaunch }
+  }
+  const { titleLink, showLaunch } = useRightDrawerSettings()
   return (
     <StyledDrawer open={open} anchor="right" variant="persistent">
       <Toolbar />
@@ -49,6 +69,21 @@ const RightDrawer: FC = () => {
           <ChevronRightIcon />
         </IconButton>
         <Typography variant="h6">{title}</Typography>
+        {showLaunch && (
+          <a
+            href={titleLink}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{
+              marginLeft: "5px",
+              marginRight: "10px",
+            }}
+          >
+            <Tooltip title="Check Documentation">
+              <Launch style={{ fontSize: "16px" }} />
+            </Tooltip>
+          </a>
+        )}
       </Box>
       <Divider />
       <MainContents>