From f583e2f0b18e018e23323e35d261edbf85531ace Mon Sep 17 00:00:00 2001 From: tsuchiyama-araya Date: Mon, 23 Dec 2024 11:52:27 +0900 Subject: [PATCH 1/5] =?UTF-8?q?Param=E3=81=AE=E3=82=BF=E3=82=A4=E3=83=88?= =?UTF-8?q?=E3=83=AB=E3=81=A8=E9=A0=85=E7=9B=AE=E3=81=AB=E3=83=AA=E3=83=B3?= =?UTF-8?q?=E3=82=AF=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RightDrawer/AlgorithmParamForm.tsx | 10 ++++++++- .../Workspace/FlowChart/RightDrawer/index.tsx | 22 ++++++++++++++++++- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx b/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx index 8b434978f..fcca43915 100644 --- a/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx +++ b/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx @@ -26,6 +26,7 @@ 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 })) @@ -33,7 +34,14 @@ export const AlgorithmParamForm = memo(function AlgorithmParamForm() { }, [dispatch, nodeId, algoName, algoParamIsLoaded]) return (
- {algoName} + + {algoName} + {paramKeyList.map((paramKey) => ( ))} diff --git a/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx b/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx index 93f70edd8..3a87866d3 100644 --- a/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx +++ b/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx @@ -41,6 +41,19 @@ const RightDrawer: FC = () => { return "none" } }) + const titleLink = useSelector((state: RootState) => { + const mode = selectRightDrawerMode(state) + switch (mode) { + case RIGHT_DRAWER_MODE.NWB: + return "https://optinist.readthedocs.io/en/latest/gui/workflow.html#nwb-setting" + case RIGHT_DRAWER_MODE.PARAM_FORM: + return "https://github.com/arayabrain/barebone-studio/blob/develop-main/docs/specifications/algorithm_nodes.md#algorithm_nodesalgorithm-nodes" + case RIGHT_DRAWER_MODE.SNAKEMAKE: + return "https://optinist.readthedocs.io/en/latest/gui/workflow.html#snakemane-settings" + default: + return "" + } + }) return ( @@ -48,7 +61,14 @@ const RightDrawer: FC = () => { - {title} + + {title} + From d6580a3f050f5a25786077a6c7c9a8e6ddeb0ff0 Mon Sep 17 00:00:00 2001 From: tsuchiyama-araya Date: Mon, 23 Dec 2024 11:57:08 +0900 Subject: [PATCH 2/5] Aded underline into link --- .../Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx | 6 +++++- .../components/Workspace/FlowChart/RightDrawer/index.tsx | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx b/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx index fcca43915..6b1edc068 100644 --- a/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx +++ b/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx @@ -38,7 +38,11 @@ export const AlgorithmParamForm = memo(function AlgorithmParamForm() { href={parameterUrl} target="_blank" rel="noopener noreferrer" - style={{ textDecoration: "none", color: "inherit", cursor: "pointer" }} + style={{ + textDecoration: "underline", + color: "inherit", + cursor: "pointer", + }} > {algoName} diff --git a/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx b/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx index 3a87866d3..de5415323 100644 --- a/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx +++ b/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx @@ -65,7 +65,7 @@ const RightDrawer: FC = () => { href={titleLink} target="_blank" rel="noopener noreferrer" - style={{ textDecoration: "none", color: "inherit" }} + style={{ textDecoration: "underline", color: "inherit" }} > {title} From e1e3a84c2ba0b6f595ebce0245bd56b1fa42a4a6 Mon Sep 17 00:00:00 2001 From: tsuchiyama-araya Date: Tue, 24 Dec 2024 13:57:03 +0900 Subject: [PATCH 3/5] =?UTF-8?q?GUI=E3=81=AE=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RightDrawer/AlgorithmParamForm.tsx | 4 ++ .../Workspace/FlowChart/RightDrawer/index.tsx | 59 ++++++++++++------- 2 files changed, 41 insertions(+), 22 deletions(-) diff --git a/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx b/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx index 6b1edc068..9503a3c2b 100644 --- a/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx +++ b/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx @@ -1,6 +1,8 @@ import { memo, useContext, useEffect } from "react" import { useSelector, useDispatch } from "react-redux" +import { Launch } from "@mui/icons-material" + import { createParamFormItemComponent } from "components/common/ParamFormItemCreator" import { SectionTitle } from "components/common/ParamSection" import { ParamFormContext } from "components/Workspace/FlowChart/RightDrawer/ParamFormContents" @@ -42,9 +44,11 @@ export const AlgorithmParamForm = memo(function AlgorithmParamForm() { textDecoration: "underline", color: "inherit", cursor: "pointer", + display: "flex", }} > {algoName} + {paramKeyList.map((paramKey) => ( diff --git a/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx b/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx index de5415323..bc1119f25 100644 --- a/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx +++ b/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx @@ -1,6 +1,7 @@ -import { FC } from "react" +import { FC, useState } from "react" import { useSelector, useDispatch } from "react-redux" +import { Launch } from "@mui/icons-material" import ChevronRightIcon from "@mui/icons-material/ChevronRight" import Box from "@mui/material/Box" import Divider from "@mui/material/Divider" @@ -41,19 +42,24 @@ const RightDrawer: FC = () => { return "none" } }) - const titleLink = useSelector((state: RootState) => { - const mode = selectRightDrawerMode(state) - switch (mode) { - case RIGHT_DRAWER_MODE.NWB: - return "https://optinist.readthedocs.io/en/latest/gui/workflow.html#nwb-setting" - case RIGHT_DRAWER_MODE.PARAM_FORM: - return "https://github.com/arayabrain/barebone-studio/blob/develop-main/docs/specifications/algorithm_nodes.md#algorithm_nodesalgorithm-nodes" - case RIGHT_DRAWER_MODE.SNAKEMAKE: - return "https://optinist.readthedocs.io/en/latest/gui/workflow.html#snakemane-settings" - default: - return "" - } - }) + 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-settings` + : mode === RIGHT_DRAWER_MODE.SNAKEMAKE + ? `${readTheDocsUrl}#snakemake-settings` + : "" + + const showLaunch = + mode === RIGHT_DRAWER_MODE.NWB || mode === RIGHT_DRAWER_MODE.SNAKEMAKE + + return { titleLink, showLaunch } + } + const { titleLink, showLaunch } = useRightDrawerSettings() return ( @@ -61,14 +67,23 @@ const RightDrawer: FC = () => { - - {title} - + {title} + {showLaunch && ( + + Documentation + + + )} From 69e75f58a3c89ed254d1c7a4a82d5d60b94d65ff Mon Sep 17 00:00:00 2001 From: tsuchiyama-araya Date: Tue, 24 Dec 2024 16:28:42 +0900 Subject: [PATCH 4/5] =?UTF-8?q?GUI=E3=81=AE=E4=BF=AE=E6=AD=A3=E3=80=81Tool?= =?UTF-8?q?Tip=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RightDrawer/AlgorithmParamForm.tsx | 30 +++++++++++-------- .../Workspace/FlowChart/RightDrawer/index.tsx | 16 +++++----- 2 files changed, 25 insertions(+), 21 deletions(-) diff --git a/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx b/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx index 9503a3c2b..c9e48f166 100644 --- a/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx +++ b/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx @@ -2,6 +2,7 @@ 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" @@ -36,20 +37,23 @@ export const AlgorithmParamForm = memo(function AlgorithmParamForm() { }, [dispatch, nodeId, algoName, algoParamIsLoaded]) return (
- + {paramKeyList.map((paramKey) => ( ))} diff --git a/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx b/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx index bc1119f25..a67e397d5 100644 --- a/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx +++ b/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx @@ -1,8 +1,9 @@ -import { FC, useState } from "react" +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" @@ -49,9 +50,9 @@ const RightDrawer: FC = () => { const titleLink = mode === RIGHT_DRAWER_MODE.NWB - ? `${readTheDocsUrl}#nwb-settings` + ? `${readTheDocsUrl}#nwb-setting` : mode === RIGHT_DRAWER_MODE.SNAKEMAKE - ? `${readTheDocsUrl}#snakemake-settings` + ? `${readTheDocsUrl}#snakemane-settings` : "" const showLaunch = @@ -74,14 +75,13 @@ const RightDrawer: FC = () => { target="_blank" rel="noopener noreferrer" style={{ - marginLeft: "auto", + marginLeft: "5px", marginRight: "10px", - display: "flex", - alignItems: "center", }} > - Documentation - + + + )} From 191fa5a60b8532c3c5d40b75d439c4aecb7888e5 Mon Sep 17 00:00:00 2001 From: tsuchiyama-araya Date: Wed, 25 Dec 2024 10:51:24 +0900 Subject: [PATCH 5/5] =?UTF-8?q?GUI=E6=8C=87=E6=91=98=E3=81=AE=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx | 1 + .../components/Workspace/FlowChart/RightDrawer/index.tsx | 7 +++---- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx b/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx index c9e48f166..5dbc794de 100644 --- a/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx +++ b/frontend/src/components/Workspace/FlowChart/RightDrawer/AlgorithmParamForm.tsx @@ -47,6 +47,7 @@ export const AlgorithmParamForm = memo(function AlgorithmParamForm() { textDecoration: "underline", color: "inherit", cursor: "pointer", + marginLeft: "5px", }} > diff --git a/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx b/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx index a67e397d5..7b2286b1c 100644 --- a/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx +++ b/frontend/src/components/Workspace/FlowChart/RightDrawer/index.tsx @@ -43,16 +43,15 @@ const RightDrawer: FC = () => { return "none" } }) - const readTheDocsUrl = - "https://optinist.readthedocs.io/en/latest/gui/workflow.html" + const readTheDocsUrl = "https://optinist.readthedocs.io/en/latest" const useRightDrawerSettings = () => { const mode = useSelector((state: RootState) => selectRightDrawerMode(state)) const titleLink = mode === RIGHT_DRAWER_MODE.NWB - ? `${readTheDocsUrl}#nwb-setting` + ? `${readTheDocsUrl}/gui/workflow.html#nwb-setting` : mode === RIGHT_DRAWER_MODE.SNAKEMAKE - ? `${readTheDocsUrl}#snakemane-settings` + ? `${readTheDocsUrl}/gui/workflow.html#snakemane-settings` : "" const showLaunch =