From 4acb18416281778e360bc3767f0d7672850be41e Mon Sep 17 00:00:00 2001 From: martinjrobins Date: Tue, 24 Oct 2023 12:53:07 +0000 Subject: [PATCH 01/22] add video tutorials --- frontend-v2/package.json | 3 + frontend-v2/src/features/help/Help.tsx | 72 ++++++++++++++++++----- frontend-v2/src/features/help/HelpTab.tsx | 62 +++++++++++++------ frontend-v2/src/setupProxy.js | 14 ++--- frontend-v2/yarn.lock | 42 ++++++++++++- 5 files changed, 151 insertions(+), 42 deletions(-) diff --git a/frontend-v2/package.json b/frontend-v2/package.json index e87dec8d..679f117d 100644 --- a/frontend-v2/package.json +++ b/frontend-v2/package.json @@ -16,10 +16,12 @@ "@types/react": "^18.0.6", "@types/react-dom": "^18.0.2", "http-proxy-middleware": "^2.0.6", + "papaparse": "^5.4.1", "plotly.js": "^2.23.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.43.9", + "react-player": "^2.13.0", "react-plotly.js": "^2.6.0", "react-redux": "^8.0.1", "react-scripts": "5.0.1", @@ -54,6 +56,7 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@types/papaparse": "^5.3.10", "@types/react-plotly.js": "^2.6.0", "cypress": "^12.16.0", "start-server-and-test": "^2.0.0" diff --git a/frontend-v2/src/features/help/Help.tsx b/frontend-v2/src/features/help/Help.tsx index db058416..d26e9ae0 100644 --- a/frontend-v2/src/features/help/Help.tsx +++ b/frontend-v2/src/features/help/Help.tsx @@ -1,12 +1,46 @@ +import React, { useEffect } from 'react'; import { DynamicTabs, TabPanel } from '../../components/DynamicTabs'; import HelpTab from './HelpTab'; +import { parse } from 'papaparse'; +import { set } from 'react-hook-form'; export type Question = { question: string; answer: string; } +export type TutorialVideo = { + title: string; + type: string; + link: string; + keywords: string[]; +} + +const tutorialVideosUrl: string = '/backend/tutorial_videos.csv'; + const Help: React.FC = () => { + const [ tutorialVideos, setTutorialVideos ] = React.useState([]); + useEffect(() => { + parse(tutorialVideosUrl, { + download: true, + error: (err) => { + console.error('Error downloading tutorial videos:', err); + }, + complete: (results) => { + setTutorialVideos( + results.data.map((row) => { + const rowList = row as string[]; + return { + title: rowList[0], + type: rowList[1], + link: rowList[2], + keywords: rowList[3].split(',').map((keyword) => keyword.trim()) + }; + }) + ); + } + }) + }, []); let generic_questions: Question[] = Array(5).fill({ question: "Question 1?", answer: "Answer 1" @@ -16,6 +50,22 @@ const Help: React.FC = () => { question: `Question ${index + 1}?`, answer: `Answer ${index + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.` }}); + + const questions = [ + generic_questions.slice(0, 2), + generic_questions.slice(0, 4), + generic_questions.slice(0, 3), + generic_questions.slice(0, 5), + generic_questions.slice(0, 1), + ] + const tutorials = [ + tutorialVideos.filter((video) => video.type.includes('Tutorial')), + tutorialVideos.filter((video) => video.type === 'Project'), + tutorialVideos.filter((video) => video.type === 'Drug'), + tutorialVideos.filter((video) => video.type === 'Model'), + tutorialVideos.filter((video) => video.type === 'Trial Design'), + tutorialVideos.filter((video) => video.type === 'Simulation'), + ] const project_questions = generic_questions.slice(0, 2); const drug_questions = generic_questions.slice(0, 4) @@ -24,22 +74,12 @@ const Help: React.FC = () => { const simulation_questions = generic_questions.slice(0, 1) return ( - - - - - - - - - - - - - - - - + + { questions.map((question, index) => ( + + + + ))} ); } diff --git a/frontend-v2/src/features/help/HelpTab.tsx b/frontend-v2/src/features/help/HelpTab.tsx index f4ab1a68..18d49661 100644 --- a/frontend-v2/src/features/help/HelpTab.tsx +++ b/frontend-v2/src/features/help/HelpTab.tsx @@ -1,29 +1,57 @@ -import { Accordion, AccordionDetails, AccordionSummary, Typography } from "@mui/material"; +import { Accordion, AccordionDetails, AccordionSummary, Chip, Stack, Typography } from "@mui/material"; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import { Question } from "./Help"; +import { Question, TutorialVideo } from "./Help"; +import ReactPlayer from 'react-player/youtube' + interface Props { questions: Question[]; + videos: TutorialVideo[]; } // tab that lists questions as mui accordian components -const HelpTab: React.FC = ({ questions }) => { +const HelpTab: React.FC = ({ questions, videos }) => { return (
- {questions.map((question, index) => { - return ( - - } - > - {question.question} - - - {question.answer} - - - ) - })} + + {questions.map((question, index) => { + return ( + + } + > + {question.question} + + + {question.answer} + + + ) + })} + + + {videos.map((video, index) => { + return ( +
+ {video.title} + + { video.keywords.map((keyword, index) => { + return ( + + ) + })} + +