diff --git a/webapp/src/components/App/Singlestudy/explore/Debug/Data/Json.tsx b/webapp/src/components/App/Singlestudy/explore/Debug/Data/Json.tsx index 9ec4c6aff6..a273f1db84 100644 --- a/webapp/src/components/App/Singlestudy/explore/Debug/Data/Json.tsx +++ b/webapp/src/components/App/Singlestudy/explore/Debug/Data/Json.tsx @@ -11,13 +11,9 @@ import usePromiseWithSnackbarError from "../../../../../../hooks/usePromiseWithS import UsePromiseCond from "../../../../../common/utils/UsePromiseCond"; import useEnqueueErrorSnackbar from "../../../../../../hooks/useEnqueueErrorSnackbar"; import ViewWrapper from "../../../../../common/page/ViewWrapper"; +import type { DataCompProps } from "../utils"; -interface Props { - path: string; - studyId: string; -} - -function Json({ path, studyId }: Props) { +function Json({ filePath, studyId }: DataCompProps) { const [t] = useTranslation(); const { enqueueSnackbar } = useSnackbar(); const enqueueErrorSnackbar = useEnqueueErrorSnackbar(); @@ -25,17 +21,17 @@ function Json({ path, studyId }: Props) { const [isSaveAllowed, setIsSaveAllowed] = useState(false); const res = usePromiseWithSnackbarError( - () => getStudyData(studyId, path, -1), + () => getStudyData(studyId, filePath, -1), { errorMessage: t("studies.error.retrieveData"), - deps: [studyId, path], + deps: [studyId, filePath], }, ); // Reset save button when path changes useUpdateEffect(() => { setIsSaveAllowed(false); - }, [studyId, path]); + }, [studyId, filePath]); //////////////////////////////////////////////////////////////// // Event Handlers @@ -44,7 +40,7 @@ function Json({ path, studyId }: Props) { const handleSaveJson = async () => { if (isSaveAllowed && jsonData) { try { - await editStudy(jsonData, studyId, path); + await editStudy(jsonData, studyId, filePath); enqueueSnackbar(t("studies.success.saveData"), { variant: "success", }); diff --git a/webapp/src/components/App/Singlestudy/explore/Debug/Data/Matrix.tsx b/webapp/src/components/App/Singlestudy/explore/Debug/Data/Matrix.tsx index 266e377853..7b48f04bc6 100644 --- a/webapp/src/components/App/Singlestudy/explore/Debug/Data/Matrix.tsx +++ b/webapp/src/components/App/Singlestudy/explore/Debug/Data/Matrix.tsx @@ -1,24 +1,19 @@ import { MatrixStats } from "../../../../../../common/types"; import MatrixInput from "../../../../../common/MatrixInput"; import ViewWrapper from "../../../../../common/page/ViewWrapper"; +import type { DataCompProps } from "../utils"; -interface Props { - studyId: string; - path: string; -} - -function Matrix({ studyId, path }: Props) { - const filename = path.split("/").pop(); - const isUserFolder = path.startsWith("/user/"); +function Matrix({ studyId, filePath, enableImport }: DataCompProps) { + const filename = filePath.split("/").pop(); return ( ); diff --git a/webapp/src/components/App/Singlestudy/explore/Debug/Data/Text.tsx b/webapp/src/components/App/Singlestudy/explore/Debug/Data/Text.tsx index 99c6247237..a88d2e853a 100644 --- a/webapp/src/components/App/Singlestudy/explore/Debug/Data/Text.tsx +++ b/webapp/src/components/App/Singlestudy/explore/Debug/Data/Text.tsx @@ -13,6 +13,7 @@ import plaintext from "react-syntax-highlighter/dist/esm/languages/hljs/plaintex import ini from "react-syntax-highlighter/dist/esm/languages/hljs/ini"; import properties from "react-syntax-highlighter/dist/esm/languages/hljs/properties"; import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs"; +import type { DataCompProps } from "../utils"; SyntaxHighlighter.registerLanguage("xml", xml); SyntaxHighlighter.registerLanguage("plaintext", plaintext); @@ -24,11 +25,6 @@ const logsRegex = /^(\[[^\]]*\]){3}/; // Ex: "EXP : 0" const propertiesRegex = /^[^:]+ : [^:]+/; -interface Props { - studyId: string; - path: string; -} - function getSyntaxProps(data: string | string[]): SyntaxHighlighterProps { const isArray = Array.isArray(data); const text = isArray ? data.join("\n") : data; @@ -50,15 +46,15 @@ function getSyntaxProps(data: string | string[]): SyntaxHighlighterProps { }; } -function Text({ studyId, path }: Props) { +function Text({ studyId, filePath }: DataCompProps) { const { t } = useTranslation(); const theme = useTheme(); const res = usePromiseWithSnackbarError( - () => getStudyData(studyId, path), + () => getStudyData(studyId, filePath), { errorMessage: t("studies.error.retrieveData"), - deps: [studyId, path], + deps: [studyId, filePath], }, ); diff --git a/webapp/src/components/App/Singlestudy/explore/Debug/Data/index.tsx b/webapp/src/components/App/Singlestudy/explore/Debug/Data/index.tsx index 3e7e2105b0..813624dfbb 100644 --- a/webapp/src/components/App/Singlestudy/explore/Debug/Data/index.tsx +++ b/webapp/src/components/App/Singlestudy/explore/Debug/Data/index.tsx @@ -3,29 +3,33 @@ import Image from "./Image"; import Json from "./Json"; import Matrix from "./Matrix"; import type { FileInfo, FileType } from "../utils"; +import type { DataCompProps } from "../utils"; interface Props extends FileInfo { studyId: string; } -interface DataComponentProps { - studyId: string; - path: string; -} -type DataComponent = React.ComponentType; +type DataComponent = React.ComponentType; const componentByFileType: Record = { matrix: Matrix, json: Json, text: Text, image: Image, - folder: ({ path }) => path, + folder: ({ filePath }) => filePath, } as const; function Data({ studyId, fileType, filePath }: Props) { + const isUserFolder = filePath.startsWith("/user/"); const DataViewer = componentByFileType[fileType]; - return ; + return ( + + ); } export default Data; diff --git a/webapp/src/components/App/Singlestudy/explore/Debug/utils.ts b/webapp/src/components/App/Singlestudy/explore/Debug/utils.ts index 463a6bc31c..cda06034a3 100644 --- a/webapp/src/components/App/Singlestudy/explore/Debug/utils.ts +++ b/webapp/src/components/App/Singlestudy/explore/Debug/utils.ts @@ -25,6 +25,12 @@ export interface TreeFolder { export type TreeData = TreeFolder | TreeFile; +export interface DataCompProps { + studyId: string; + filePath: string; + enableImport: boolean; +} + //////////////////////////////////////////////////////////////// // File Info ////////////////////////////////////////////////////////////////