diff --git a/package-lock.json b/package-lock.json index 82fbc36b..bc8d7e07 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "@reduxjs/toolkit": "^2.2.1", "axios": "^1.6.3", "chart.js": "^4.4.1", + "csv-parse": "^5.5.6", "date-fns": "^3.2.0", "dotenv": "^16.4.5", "export-from-json": "^1.7.4", @@ -30,6 +31,7 @@ "html-react-parser": "^5.1.10", "html2canvas": "^1.4.1", "install": "^0.13.0", + "json2csv": "^6.0.0-alpha.2", "jspdf": "^2.5.2", "mui-datatables": "^4.3.0", "next": "^14.0.4", @@ -2389,6 +2391,11 @@ "integrity": "sha512-2/U3GXA6YiPYQDLGwtGlnNgKYBSwCFIHf8Y9LUY5VATHdtbLlU0Y1R3QoBnT0aB4qv/BEiVVsj7LJXoQCgJ2vA==", "dev": true }, + "node_modules/@streamparser/json": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@streamparser/json/-/json-0.0.6.tgz", + "integrity": "sha512-vL9EVn/v+OhZ+Wcs6O4iKE9EUpwHUqHmCtNUMWjqp+6dr85+XPOSGTEsqYNq1Vn04uk9SWlOVmx9J48ggJVT2Q==" + }, "node_modules/@swc/helpers": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz", @@ -3661,6 +3668,11 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, + "node_modules/csv-parse": { + "version": "5.5.6", + "resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-5.5.6.tgz", + "integrity": "sha512-uNpm30m/AGSkLxxy7d9yRXpJQFrZzVWLFBkS+6ngPcZkw/5k3L/jjFuj7tVnEpRn+QgmiXr21nDlhCiUK4ij2A==" + }, "node_modules/d3-array": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz", @@ -6906,6 +6918,31 @@ "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", "dev": true }, + "node_modules/json2csv": { + "version": "6.0.0-alpha.2", + "resolved": "https://registry.npmjs.org/json2csv/-/json2csv-6.0.0-alpha.2.tgz", + "integrity": "sha512-nJ3oP6QxN8z69IT1HmrJdfVxhU1kLTBVgMfRnNZc37YEY+jZ4nU27rBGxT4vaqM/KUCavLRhntmTuBFqZLBUcA==", + "dependencies": { + "@streamparser/json": "^0.0.6", + "commander": "^6.2.0", + "lodash.get": "^4.4.2" + }, + "bin": { + "json2csv": "bin/json2csv.js" + }, + "engines": { + "node": ">= 12", + "npm": ">= 6.13.0" + } + }, + "node_modules/json2csv/node_modules/commander": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz", + "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==", + "engines": { + "node": ">= 6" + } + }, "node_modules/json5": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", diff --git a/package.json b/package.json index c5861603..dca1b628 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@reduxjs/toolkit": "^2.2.1", "axios": "^1.6.3", "chart.js": "^4.4.1", + "csv-parse": "^5.5.6", "date-fns": "^3.2.0", "dotenv": "^16.4.5", "export-from-json": "^1.7.4", @@ -33,6 +34,7 @@ "html-react-parser": "^5.1.10", "html2canvas": "^1.4.1", "install": "^0.13.0", + "json2csv": "^6.0.0-alpha.2", "jspdf": "^2.5.2", "mui-datatables": "^4.3.0", "next": "^14.0.4", diff --git a/src/app/new-project/newproject.js b/src/app/new-project/newproject.js index 761b8fa7..9efbe322 100644 --- a/src/app/new-project/newproject.js +++ b/src/app/new-project/newproject.js @@ -2,7 +2,10 @@ import React, { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; +import { parse } from "csv-parse/sync"; import MUIDataTable from "mui-datatables"; +import { Parser } from "json2csv"; + import { Box, Chip, @@ -19,6 +22,7 @@ import { InputLabel, TextField, } from "@mui/material"; +import ArrowCircleDownIcon from "@mui/icons-material/ArrowCircleDown"; import SearchIcon from "@mui/icons-material/Search"; import CancelIcon from "@mui/icons-material/Cancel"; import { useDispatch, useSelector } from "react-redux"; @@ -178,17 +182,34 @@ const CreateProject = () => { }; const convertCsvToJson = (csvData) => { - const rows = csvData.split("\n").filter((row) => row.trim() !== ""); - const headers = rows[0].split(","); - return rows.slice(1).map((row) => { - const values = row.split(","); - let obj = {}; - headers.forEach((header, index) => { - obj[header.trim()] = values[index].trim(); - }); - return obj; + const records = parse(csvData, { + columns: true, // Treat first row as headers + skip_empty_lines: true, // Skip empty lines + cast: true, // Automatically cast values + on_record: (record) => { + // Handle array-like values for specific columns + const arrayColumns = ["rating_scale_list", "input_selections_list"]; + + arrayColumns.forEach((column) => { + if ( + record[column] && + record[column].startsWith("[") && + record[column].endsWith("]") + ) { + try { + record[column] = JSON.parse(record[column].replace(/""/g, '"')); + } catch (e) { + // If parsing fails, keep the original value + } + } + }); + return record; + }, }); + + return records; }; + useEffect(() => { console.log("questionsJSON:", questionsJSON); console.log("typeof questionsJSON:", typeof questionsJSON); @@ -674,6 +695,40 @@ const CreateProject = () => { } }, [currentPageNumber, currentRowPerPage]); const sample = useSelector((state) => console.log(state)); + + const downloadCsv = () => { + try { + const json = JSON.parse(jsonInput); // Ensure this is valid JSON + + if (json.length === 0) { + console.error("Empty JSON data"); + return; + } + + // Configure `json2csv` parser options if necessary + const json2csvParser = new Parser(); + const csv = json2csvParser.parse(json); + + // Create a CSV blob + const blob = new Blob([csv], { type: "text/csv" }); + const url = URL.createObjectURL(blob); + + // Create a link to download the CSV + const a = document.createElement("a"); + a.href = url; + a.download = "data.csv"; + document.body.appendChild(a); + a.click(); + + // Cleanup + document.body.removeChild(a); + URL.revokeObjectURL(url); + } catch (error) { + console.error("Error converting JSON to CSV", error); + } + }; + const replacer = (key, value) => (value === null ? "" : value); + const renderToolBar = () => { return ( @@ -1340,7 +1395,8 @@ const CreateProject = () => { - {selectedType === "ModelInteractionEvaluation" ? ( + {selectedType === "ModelInteractionEvaluation" || + selectedType === "MultipleInteractionEvaluation" ? ( { onChange={handleJsonInputChange} style={{ flex: 1, marginRight: "10px" }} /> + + {" "} + {/* Replace this with your download icon component */} + ) : null} diff --git a/src/app/ui/pages/ModelOutput/model_output_evaluation.js b/src/app/ui/pages/ModelOutput/model_output_evaluation.js index 656fa9cf..0e08c088 100644 --- a/src/app/ui/pages/ModelOutput/model_output_evaluation.js +++ b/src/app/ui/pages/ModelOutput/model_output_evaluation.js @@ -3,7 +3,7 @@ import { useState, useEffect } from "react"; import Button from "../../../../components/common/Button"; import ReactMarkdown from "react-markdown"; -import RefreshIcon from '@mui/icons-material/Refresh'; +import RefreshIcon from "@mui/icons-material/Refresh"; import ModelResponseEvaluationStyle from "@/styles/ModelResponseEvaluation"; import { FormControlLabel, @@ -35,13 +35,21 @@ import GetTaskAnnotationsAPI from "@/app/actions/api/Dashboard/GetTaskAnnotation import GetTaskDetailsAPI from "@/app/actions/api/Dashboard/getTaskDetails"; import { useParams } from "react-router-dom"; // import { questions } from "./config"; -import Tooltip from '@mui/material/Tooltip'; +import Tooltip from "@mui/material/Tooltip"; import { useSelector } from "react-redux"; // import { fetchProjectDetails } from "@/Lib/Features/projects/getProjectDetails"; - - -const ModelOutputEvaluation = ({ currentInteraction, setCurrentInteraction, interactions, setInteractions, forms, setForms, stage,answered, setAnswered }) => { +const ModelOutputEvaluation = ({ + currentInteraction, + setCurrentInteraction, + interactions, + setInteractions, + forms, + setForms, + stage, + answered, + setAnswered, +}) => { /* eslint-disable react-hooks/exhaustive-deps */ const { taskId } = useParams(); @@ -49,14 +57,14 @@ const ModelOutputEvaluation = ({ currentInteraction, setCurrentInteraction, inte const [leftPanelVisible, setLeftPanelVisible] = useState(true); // const [selectedQuestions, setSelectedQuestions] = useState([]); const [blank, setBlank] = useState(""); - const questions = useSelector(state=>state.getProjectDetails.data.metadata_json) ?? [] - console.log("questions that were fetched: "+typeof questions) + const questions = + useSelector((state) => state.getProjectDetails.data.metadata_json) ?? []; + console.log("questions that were fetched: " + typeof questions); const toggleLeftPanel = () => { setLeftPanelVisible(!leftPanelVisible); }; useEffect(() => { - const fetchData = async () => { const taskAnnotationsObj = new GetTaskAnnotationsAPI(taskId); const response = await fetch(taskAnnotationsObj.apiEndPoint(), { @@ -64,51 +72,69 @@ const ModelOutputEvaluation = ({ currentInteraction, setCurrentInteraction, inte headers: taskAnnotationsObj.getHeaders().headers, }); const annotationForms = await response.json(); - let formsData = [] + let formsData = []; console.log(annotationForms[0].result?.length); - - if(annotationForms && Array.isArray(annotationForms[0]?.result) && [...annotationForms[0]?.result]?.length){ - console.log(stage) - if(stage ==="Review"){ - console.log("here in review if") - let reviewData = annotationForms.find((item) => item.annotation_type === 2); - if(reviewData.annotation_status === "unreviewed"){ - reviewData = annotationForms.find((item) => item.annotation_type === 1); + + if ( + annotationForms && + Array.isArray(annotationForms[0]?.result) && + [...annotationForms[0]?.result]?.length + ) { + console.log(stage); + if (stage === "Review") { + console.log("here in review if"); + let reviewData = annotationForms.find( + (item) => item.annotation_type === 2, + ); + if (reviewData.annotation_status === "unreviewed") { + reviewData = annotationForms.find( + (item) => item.annotation_type === 1, + ); } formsData = reviewData?.result; console.log("reviewdata: " + JSON.stringify(reviewData)); - console.log(formsData) + console.log(formsData); + } else if (stage === "SuperChecker") { + console.log("here in sc if"); + let superCheckerData = annotationForms.filter( + (data) => data.annotation_type == 3, + ); + console.log(superCheckerData[0].annotation_status); + console.log("supercheckdata: " + JSON.stringify(superCheckerData)); + formsData = superCheckerData[0]?.result; + console.log(formsData); + } else if (stage === "Annotation") { + console.log("here in annotation if"); + let annotationData = annotationForms.filter( + (data) => data.annotation_type == 1, + ); + console.log("annotationdata: " + JSON.stringify(annotationData)); + formsData = annotationData[0]?.result; + console.log(formsData); + } else { + console.log("here in else"); } - else if(stage === "SuperChecker"){ - console.log("here in sc if") - let superCheckerData = annotationForms.filter((data)=>data.annotation_type==3) - console.log(superCheckerData[0].annotation_status) - console.log("supercheckdata: " + JSON.stringify(superCheckerData)); - formsData = superCheckerData[0]?.result - console.log(formsData) - }else if(stage === "Annotation"){ - console.log("here in annotation if") - let annotationData = annotationForms.filter((data)=>data.annotation_type==1) - console.log("annotationdata: "+ JSON.stringify(annotationData)); - formsData = annotationData[0]?.result; - console.log(formsData) - } - else{ - console.log("here in else") - } - } - else if(annotationForms && Array.isArray(annotationForms[0]?.result) && [...annotationForms[0]?.result]?.length===0 && stage==="SuperChecker"){ - console.log("here in sc if") - let superCheckerData = annotationForms.filter((data)=>data.annotation_type==3) - console.log(superCheckerData[0].annotation_status) - if(superCheckerData[0].annotation_status === "unvalidated"){ - superCheckerData = annotationForms.find((item) => item.annotation_type == 1); + } else if ( + annotationForms && + Array.isArray(annotationForms[0]?.result) && + [...annotationForms[0]?.result]?.length === 0 && + stage === "SuperChecker" + ) { + console.log("here in sc if"); + let superCheckerData = annotationForms.filter( + (data) => data.annotation_type == 3, + ); + console.log(superCheckerData[0].annotation_status); + if (superCheckerData[0].annotation_status === "unvalidated") { + superCheckerData = annotationForms.find( + (item) => item.annotation_type == 1, + ); } console.log("supercheckdata: " + JSON.stringify(superCheckerData)); - formsData = superCheckerData?.result - console.log(formsData) - } - setForms(formsData?.length ? [...formsData] : []) + formsData = superCheckerData?.result; + console.log(formsData); + } + setForms(formsData?.length ? [...formsData] : []); }; fetchData(); }, [taskId, stage]); @@ -120,8 +146,6 @@ const ModelOutputEvaluation = ({ currentInteraction, setCurrentInteraction, inte questions_response: Array(questions?.length).fill(null), })); }; - - useEffect(() => { const fetchData = async () => { @@ -139,27 +163,37 @@ const ModelOutputEvaluation = ({ currentInteraction, setCurrentInteraction, inte useEffect(() => { if (forms?.length > 0 && interactions?.length > 0) { const defaultFormId = 1; - const currentForm = forms.find(form => form?.prompt_output_pair_id === defaultFormId); - - if (currentForm && (!currentInteraction || currentInteraction?.prompt !== currentForm?.prompt)) { + const currentForm = forms.find( + (form) => form?.prompt_output_pair_id === defaultFormId, + ); + + if ( + currentForm && + (!currentInteraction || + currentInteraction?.prompt !== currentForm?.prompt) + ) { console.log("current form: " + JSON.stringify(currentForm)); - const questionsResponse = currentForm?.questions_response || Array(questions?.length).fill(null); + const questionsResponse = + currentForm?.questions_response || + Array(questions?.length).fill(null); console.log(JSON.stringify(questionsResponse)); - + const newState = { prompt: currentForm?.prompt || "", - output: typeof currentForm?.output === "string" ? currentForm.output : currentForm?.output?.map((item) => item.value).join(', ') || "", + output: + typeof currentForm?.output === "string" + ? currentForm.output + : currentForm?.output?.map((item) => item.value).join(", ") || "", prompt_output_pair_id: currentForm?.prompt_output_pair_id, additional_note: currentForm?.additional_note || "", questions_response: questionsResponse, }; - + setCurrentInteraction(newState); } } - }, [forms, interactions, questions?.length,taskId]); - - + }, [forms, interactions, questions?.length, taskId]); + useEffect(() => { if (forms?.length === 0 && interactions?.length > 0) { const initialForms = interactions?.map((interaction) => ({ @@ -178,36 +212,38 @@ const ModelOutputEvaluation = ({ currentInteraction, setCurrentInteraction, inte // blank_answer: null response: [], // mandatory: question?.mandatory - })) + })), })); - console.log("init forms: "+ initialForms) + console.log("init forms: " + initialForms); setForms(initialForms); } - }, [forms, interactions,taskId]); + }, [forms, interactions, taskId]); useEffect(() => { if (!forms || forms.length === 0) { setAnswered(false); return; } - - const allFormsAnswered = forms.every(form => { + + const allFormsAnswered = forms.every((form) => { if (!form) { return false; } - - const mandatoryQuestions = questions.filter(question => { + + const mandatoryQuestions = questions.filter((question) => { return question.mandatory && question.mandatory === true; }); console.log("mandatory questions: " + JSON.stringify(mandatoryQuestions)); - - const allMandatoryAnswered = mandatoryQuestions.every(question => { + + const allMandatoryAnswered = mandatoryQuestions.every((question) => { let parts = 0; if (question.question_type === "fill_in_blanks") { parts = question?.input_question?.split("")?.length; } const mandatoryQuestion = form?.questions_response?.find( - qr => qr?.question?.input_question === question?.input_question && qr?.question?.question_type === question?.question_type + (qr) => + qr?.question?.input_question === question?.input_question && + qr?.question?.question_type === question?.question_type, ); if (!mandatoryQuestion?.response) { return false; @@ -216,34 +252,42 @@ const ModelOutputEvaluation = ({ currentInteraction, setCurrentInteraction, inte if (mandatoryQuestion?.response?.length !== parts - 1) { return false; } - return !mandatoryQuestion.response.some(response => response === "" || response === undefined); + return !mandatoryQuestion.response.some( + (response) => response === "" || response === undefined, + ); } - return mandatoryQuestion.response.length > 0 && !mandatoryQuestion.response.some(response => response === "" || response === undefined); + return ( + mandatoryQuestion.response.length > 0 && + !mandatoryQuestion.response.some( + (response) => response === "" || response === undefined, + ) + ); }); - + console.log("all answered for form: " + allMandatoryAnswered); return allMandatoryAnswered; }); - + console.log("all forms answered?: " + allFormsAnswered); setAnswered(allFormsAnswered); - }, [forms,taskId]); - + }, [forms, taskId]); const handleRating = (rating, interactionIndex) => { setCurrentInteraction((prev) => { - const selectedQuestion = questions[interactionIndex]; + const selectedQuestion = questions[interactionIndex]; const ratingArray = [String(rating)]; // const ratingScaleList = selectedQuestion?.rating_scale_list; - const updatedQuestionsResponse = prev.questions_response.map((q, index) => { - if (index === interactionIndex) { - return { - ...q, - response: ratingArray, - }; - } - return q; - }); + const updatedQuestionsResponse = prev.questions_response.map( + (q, index) => { + if (index === interactionIndex) { + return { + ...q, + response: ratingArray, + }; + } + return q; + }, + ); const updatedInteraction = { ...prev, questions_response: updatedQuestionsResponse, @@ -252,117 +296,124 @@ const ModelOutputEvaluation = ({ currentInteraction, setCurrentInteraction, inte prevInteractions.map((interaction) => interaction.prompt_output_pair_id === prev.prompt_output_pair_id ? updatedInteraction - : interaction - ) + : interaction, + ), ); - - + return updatedInteraction; }); }; - const handleMCQ = (selectedOption, interactionIndex) => { // const selectedQuestion = selectedQuestions[interactionIndex]; - const answerArray = [String(selectedOption)] + const answerArray = [String(selectedOption)]; setCurrentInteraction((prev) => { - const updatedQuestionsResponse = prev.questions_response.map((q, index) => { - if (index === interactionIndex) { - return { - ...q, - response: answerArray, - }; - } - return q; - }); - + const updatedQuestionsResponse = prev.questions_response.map( + (q, index) => { + if (index === interactionIndex) { + return { + ...q, + response: answerArray, + }; + } + return q; + }, + ); + const updatedInteraction = { ...prev, questions_response: updatedQuestionsResponse, }; - + setForms((prevInteractions) => prevInteractions.map((interaction) => interaction.prompt_output_pair_id === prev.prompt_output_pair_id ? updatedInteraction - : interaction - ) + : interaction, + ), ); - + return updatedInteraction; }); }; const handleMultiSelect = (isChecked, selectedOption, interactionIndex) => { - console.log("checked: " + isChecked) + console.log("checked: " + isChecked); const selectedQuestion = questions[interactionIndex]; - const indexInQuestions = questions?.findIndex(q => q.id === selectedQuestion?.id); - + const indexInQuestions = questions?.findIndex( + (q) => q.id === selectedQuestion?.id, + ); + setCurrentInteraction((prev) => { - const updatedQuestionsResponse = prev.questions_response.map((q, index) => { - if (index === interactionIndex) { - const updatedAnswers = isChecked - ? [...q?.response || [], selectedOption] - : q?.response.filter(answer => answer !== selectedOption); - - return { - ...q, - response: updatedAnswers, - }; - } - return q; - }); - + const updatedQuestionsResponse = prev.questions_response.map( + (q, index) => { + if (index === interactionIndex) { + const updatedAnswers = isChecked + ? [...(q?.response || []), selectedOption] + : q?.response.filter((answer) => answer !== selectedOption); + + return { + ...q, + response: updatedAnswers, + }; + } + return q; + }, + ); + const updatedInteraction = { ...prev, questions_response: updatedQuestionsResponse, }; - + setForms((prevInteractions) => prevInteractions.map((interaction) => interaction.prompt_output_pair_id === prev.prompt_output_pair_id ? updatedInteraction - : interaction - ) + : interaction, + ), ); - + return updatedInteraction; }); }; - - -console.log(interactions); -const handleOptionChange = (selectedIndex, answer) => { - setCurrentInteraction((prev) => { - const newAnswers = questions?.map((question, i) => { - if (questions[selectedIndex] === question) { - return { question, answer: answer || null }; - } else { - return prev.questions_response?.find(response => response?.question === question) || { question, answer: null }; - } - }); - const updatedInteraction = { - ...prev, - questions_response: newAnswers, - }; - setForms((prevForms) => - prevForms.map((form) => - form?.prompt_output_pair_id === prev.prompt_output_pair_id - ? updatedInteraction - : form - ) - ); + console.log(interactions); + const handleOptionChange = (selectedIndex, answer) => { + setCurrentInteraction((prev) => { + const newAnswers = questions?.map((question, i) => { + if (questions[selectedIndex] === question) { + return { question, answer: answer || null }; + } else { + return ( + prev.questions_response?.find( + (response) => response?.question === question, + ) || { question, answer: null } + ); + } + }); - return updatedInteraction; - }); -}; + const updatedInteraction = { + ...prev, + questions_response: newAnswers, + }; + setForms((prevForms) => + prevForms.map((form) => + form?.prompt_output_pair_id === prev.prompt_output_pair_id + ? updatedInteraction + : form, + ), + ); + + return updatedInteraction; + }); + }; -console.log(currentInteraction); -console.log(interactions); -console.log(forms); + console.log(currentInteraction); + console.log(interactions); + console.log(forms); -// const handleRating = (rating, index) => { + // const handleRating = (rating, index) => { // setCurrentInteraction((prev) => { // const updatedInteraction = { @@ -386,202 +437,209 @@ console.log(forms); // ) // ); - // return updatedInteraction; // }); -// }; + // }; -const handleNoteChange = (event) => { - const newNote = event.target.value; - setCurrentInteraction((prev) => { - const updatedInteraction = { - ...prev, - additional_note: newNote, - }; + const handleNoteChange = (event) => { + const newNote = event.target.value; + setCurrentInteraction((prev) => { + const updatedInteraction = { + ...prev, + additional_note: newNote, + }; - // setInteractions((prevInteractions) => - // prevInteractions.map((interaction) => - // interaction.prompt_output_pair_id === prev.prompt_output_pair_id - // ? updatedInteraction - // : interaction - // ) - // ); - - setForms((prevForms) => - prevForms.map((form) => - form?.prompt_output_pair_id === prev.prompt_output_pair_id - ? updatedInteraction - : form - ) - ); + // setInteractions((prevInteractions) => + // prevInteractions.map((interaction) => + // interaction.prompt_output_pair_id === prev.prompt_output_pair_id + // ? updatedInteraction + // : interaction + // ) + // ); - return updatedInteraction; - }); -}; -const formatPrompt = (prompt) => { - const lines = prompt?.split('\n'); - const markdownString = lines?.join(' \n'); - return markdownString; -} -console.log(forms); -const handleFormBtnClick = (e) => { - const clickedPromptOutputPairId = parseInt(e.target.id); - console.log("clicked id" + clickedPromptOutputPairId); - const currInteraction = forms?.find( - (interaction) => interaction?.prompt_output_pair_id === clickedPromptOutputPairId - ); - console.log(currInteraction); - if (currInteraction) { - setCurrentInteraction({ - prompt: currInteraction?.prompt, - output: Array.isArray(currInteraction.output) - ? currInteraction?.output?.map((item) => item.value).join(', ') - : currInteraction.output, - prompt_output_pair_id: currInteraction?.prompt_output_pair_id, - // rating: currInteraction?.rating || null, - additional_note: currInteraction?.additional_note || '', - questions_response: currInteraction?.questions_response || Array(questions.length).fill(null), - }) - // setSelectedQuestions(currInteraction?.questions_response.map((response) => response.question)); - } -}; -// const handleQuestionClick = (question) => { -// const isQuestionSelected = selectedQuestions?.some((selectedQ) => { -// return ( -// selectedQ?.input_question === question?.input_question && -// selectedQ?.question_type === question?.question_type -// ); -// }); - -// if (!isQuestionSelected) { -// setSelectedQuestions([...selectedQuestions, question]); -// setCurrentInteraction((prev) => { -// const newResponse = { -// question: question, -// response: [], -// }; - -// const updatedQuestionsResponse = prev?.questions_response.some( -// (response) => -// response.question?.input_question === question?.input_question && -// response.question?.question_type === question?.question_type -// ) -// ? prev?.questions_response -// : [...prev?.questions_response, newResponse]; - -// const updatedInteraction = { -// ...prev, -// questions_response: updatedQuestionsResponse, -// }; - -// setForms((prevForms) => -// prevForms.map((form) => -// form?.prompt_output_pair_id === updatedInteraction.prompt_output_pair_id -// ? { -// ...form, -// questions_response: updatedQuestionsResponse, -// } -// : form -// ) -// ); - -// return updatedInteraction; -// }); -// } else { -// removeElement(question); -// } -// }; - -// const removeElement = (questionToRemove) => { -// setSelectedQuestions((prevQuestions) => { -// const filteredQuestions = prevQuestions?.filter( -// (q) => -// q?.input_question !== questionToRemove?.input_question || -// q?.question_type !== questionToRemove?.question_type -// ); -// return filteredQuestions; -// }); - -// setCurrentInteraction((prev) => { -// const updatedQuestionsResponse = prev?.questions_response.filter((response) => { -// return ( -// response.question?.input_question !== questionToRemove?.input_question || -// response.question?.question_type !== questionToRemove?.question_type -// ); -// }); - -// const updatedInteraction = { -// ...prev, -// questions_response: updatedQuestionsResponse, -// }; - -// setForms((prevForms) => -// prevForms.map((form) => -// form?.prompt_output_pair_id === updatedInteraction.prompt_output_pair_id -// ? { -// ...form, -// questions_response: updatedQuestionsResponse, -// } -// : form -// ) -// ); - -// return updatedInteraction; -// }); -// }; - -// console.log("Selected : q" + JSON.stringify(selectedQuestions)); -const handleInputChange = (e, interactionIndex, blankIndex) => { - const { value } = e.target; - - setCurrentInteraction((prev) => { - const updatedQuestionsResponse = prev.questions_response.map((q, index) => { - if (index === interactionIndex) { - const updatedBlankAnswers = q?.response ? [...q?.response] : []; - updatedBlankAnswers[blankIndex] = value; - return { - ...q, - response: updatedBlankAnswers, - }; - } - return q; + setForms((prevForms) => + prevForms.map((form) => + form?.prompt_output_pair_id === prev.prompt_output_pair_id + ? updatedInteraction + : form, + ), + ); + + return updatedInteraction; }); + }; + const formatPrompt = (prompt) => { + const lines = prompt?.split("\n"); + const markdownString = lines?.join(" \n"); + return markdownString; + }; + console.log(forms); + const handleFormBtnClick = (e) => { + const clickedPromptOutputPairId = parseInt(e.target.id); + console.log("clicked id" + clickedPromptOutputPairId); + const currInteraction = forms?.find( + (interaction) => + interaction?.prompt_output_pair_id === clickedPromptOutputPairId, + ); + console.log(currInteraction); + if (currInteraction) { + setCurrentInteraction({ + prompt: currInteraction?.prompt, + output: Array.isArray(currInteraction.output) + ? currInteraction?.output?.map((item) => item.value).join(", ") + : currInteraction.output, + prompt_output_pair_id: currInteraction?.prompt_output_pair_id, + // rating: currInteraction?.rating || null, + additional_note: currInteraction?.additional_note || "", + questions_response: + currInteraction?.questions_response || + Array(questions.length).fill(null), + }); + // setSelectedQuestions(currInteraction?.questions_response.map((response) => response.question)); + } + }; + // const handleQuestionClick = (question) => { + // const isQuestionSelected = selectedQuestions?.some((selectedQ) => { + // return ( + // selectedQ?.input_question === question?.input_question && + // selectedQ?.question_type === question?.question_type + // ); + // }); - const updatedInteraction = { - ...prev, - questions_response: updatedQuestionsResponse, - }; + // if (!isQuestionSelected) { + // setSelectedQuestions([...selectedQuestions, question]); + // setCurrentInteraction((prev) => { + // const newResponse = { + // question: question, + // response: [], + // }; - setForms((prevForms) => - prevForms.map((form) => - form?.prompt_output_pair_id === prev.prompt_output_pair_id - ? { ...form, questions_response: updatedQuestionsResponse } - : form - ) - ); + // const updatedQuestionsResponse = prev?.questions_response.some( + // (response) => + // response.question?.input_question === question?.input_question && + // response.question?.question_type === question?.question_type + // ) + // ? prev?.questions_response + // : [...prev?.questions_response, newResponse]; + + // const updatedInteraction = { + // ...prev, + // questions_response: updatedQuestionsResponse, + // }; + + // setForms((prevForms) => + // prevForms.map((form) => + // form?.prompt_output_pair_id === updatedInteraction.prompt_output_pair_id + // ? { + // ...form, + // questions_response: updatedQuestionsResponse, + // } + // : form + // ) + // ); + + // return updatedInteraction; + // }); + // } else { + // removeElement(question); + // } + // }; + + // const removeElement = (questionToRemove) => { + // setSelectedQuestions((prevQuestions) => { + // const filteredQuestions = prevQuestions?.filter( + // (q) => + // q?.input_question !== questionToRemove?.input_question || + // q?.question_type !== questionToRemove?.question_type + // ); + // return filteredQuestions; + // }); + + // setCurrentInteraction((prev) => { + // const updatedQuestionsResponse = prev?.questions_response.filter((response) => { + // return ( + // response.question?.input_question !== questionToRemove?.input_question || + // response.question?.question_type !== questionToRemove?.question_type + // ); + // }); + + // const updatedInteraction = { + // ...prev, + // questions_response: updatedQuestionsResponse, + // }; + + // setForms((prevForms) => + // prevForms.map((form) => + // form?.prompt_output_pair_id === updatedInteraction.prompt_output_pair_id + // ? { + // ...form, + // questions_response: updatedQuestionsResponse, + // } + // : form + // ) + // ); + + // return updatedInteraction; + // }); + // }; + + // console.log("Selected : q" + JSON.stringify(selectedQuestions)); + const handleInputChange = (e, interactionIndex, blankIndex) => { + const { value } = e.target; + + setCurrentInteraction((prev) => { + const updatedQuestionsResponse = prev.questions_response.map( + (q, index) => { + if (index === interactionIndex) { + const updatedBlankAnswers = q?.response ? [...q?.response] : []; + updatedBlankAnswers[blankIndex] = value; + return { + ...q, + response: updatedBlankAnswers, + }; + } + return q; + }, + ); + + const updatedInteraction = { + ...prev, + questions_response: updatedQuestionsResponse, + }; + + setForms((prevForms) => + prevForms.map((form) => + form?.prompt_output_pair_id === prev.prompt_output_pair_id + ? { ...form, questions_response: updatedQuestionsResponse } + : form, + ), + ); + + return updatedInteraction; + }); + }; - return updatedInteraction; - }); -}; - const EvaluationForm = () => { return ( -
+
{translate("modal.prompt")}
- {formatPrompt(currentInteraction?.prompt)} + {formatPrompt(currentInteraction?.prompt)}
{translate("modal.output")}
-
- - {formatPrompt(currentInteraction?.output)} - +
+ + {formatPrompt(currentInteraction?.output)} +
{/*
{translate("model_evaluation_rating")} @@ -611,15 +669,19 @@ const handleInputChange = (e, interactionIndex, blankIndex) => { ))} */}
- {questions?.length > 0 ?
- {translate("modal.select_que")} -
:
- {translate("modal.pls_select_que")} -
} -
+ {questions?.length > 0 ? ( +
{translate("modal.select_que")}
+ ) : ( +
+ {translate("modal.pls_select_que")} +
+ )} +
{/* {selectedQuestions.map((question, index) => (
{question}
@@ -647,147 +709,190 @@ const handleInputChange = (e, interactionIndex, blankIndex) => {
))} */} {questions?.map((question, i) => { - switch (question?.question_type) { - case "fill_in_blanks": - const splitQuestion = question?.input_question.split(""); - return ( -
-

- {i + 1}.{" "} - {splitQuestion?.map((part, index) => ( - - {part} - {index < splitQuestion.length - 1 && ( - 0 - ? currentInteraction?.questions_response[i]?.response[index] - : "" - } - onChange={(e) => handleInputChange(e, i, index)} - style={{ - border: "1px solid #ccc", - borderRadius: "4px", - padding: "4px", - fontSize: "14px", - lineHeight: "1.5", - verticalAlign: "middle", - width: "100%", - maxWidth: "200px", - margin: "4px 0", - boxSizing: "border-box", - backgroundColor: "white", - fontWeight: "normal" - }} - required={question.mandatory} - /> - - - )} - - ))} - {question.mandatory && ( - * - )} -

-
- ); + switch (question?.question_type) { + case "fill_in_blanks": + const splitQuestion = question?.input_question.split(""); + return ( +
+

+ {i + 1}.{" "} + {splitQuestion?.map((part, index) => ( + + {part} + {index < splitQuestion.length - 1 && ( + 0 + ? currentInteraction?.questions_response[i] + ?.response[index] + : "" + } + onChange={(e) => handleInputChange(e, i, index)} + style={{ + border: "1px solid #ccc", + borderRadius: "4px", + padding: "4px", + fontSize: "14px", + lineHeight: "1.5", + verticalAlign: "middle", + width: "100%", + maxWidth: "200px", + margin: "4px 0", + boxSizing: "border-box", + backgroundColor: "white", + fontWeight: "normal", + }} + required={question.mandatory} + /> + )} + + ))} + {question.mandatory && ( + + {" "} + * + + )} +

+
+ ); - case "rating": - return ( -
-
- {i + 1}. {question.input_question} - {question.mandatory && ( - * - )} -
- - {Array.from({ length: question.rating_scale_list.length }, (_, index) => ( -
- ); + case "rating": + return ( +
+
+ + {i + 1}. {question.input_question} + + {question.mandatory && ( + + {" "} + * + + )} +
+ + {Array.from( + { length: question.rating_scale_list.length }, + (_, index) => ( +
+ ); - case "multi_select_options": - return ( -
-
{i + 1}. {question.input_question} - {question.mandatory && ( - * - )} -
- - - {question.input_selections_list.map((option, idx) => ( - handleMultiSelect(e.target.checked, option, i)} - checked={currentInteraction?.questions_response ? currentInteraction?.questions_response[i]?.response?.includes(option) ?? false : ""} - /> - } - label={option} - /> - ))} - - -
- ); + case "multi_select_options": + return ( +
+
+ {i + 1}. {question.input_question} + {question.mandatory && ( + + {" "} + * + + )} +
+ + + {question.input_selections_list.map((option, idx) => ( + + handleMultiSelect(e.target.checked, option, i) + } + checked={ + currentInteraction?.questions_response + ? currentInteraction?.questions_response[ + i + ]?.response?.includes(option) ?? false + : "" + } + /> + } + label={option} + /> + ))} + + +
+ ); - case "mcq": - return ( -
-
{i + 1}. {question.input_question} - {question.mandatory && ( - * - )} -
- - handleMCQ(e.target.value, i)} - > - {question?.input_selections_list?.map((option, idx) => ( - } - label={option} - /> - ))} - - -
- ); + case "mcq": + return ( +
+
+ {i + 1}. {question.input_question} + {question.mandatory && ( + + {" "} + * + + )} +
+ + handleMCQ(e.target.value, i)} + > + {question?.input_selections_list?.map((option, idx) => ( + } + label={option} + /> + ))} + + +
+ ); - default: - return null; - } -})} + default: + return null; + } + })}
@@ -848,28 +953,36 @@ const handleInputChange = (e, interactionIndex, blankIndex) => { expanded: "Mui-expanded", }} > - - - {pair?.prompt} - {expanded[index] && ( - - - {pair.text} - - - )} - + + {pair?.prompt} + {expanded[index] && ( + + + {pair.text} + + + )} + {/* { > {typeof(pair.output)==="string"?pair?.output:pair?.output[0]?.value} */} - -
- ); + case "rating": + return ( +
+
+ + {i + 1}. {question.input_question} + + {question.mandatory && ( + + {" "} + * + + )} +
+ + {Array.from( + { length: question.rating_scale_list.length }, + (_, index) => ( +
+ ); - case "multi_select_options": - return ( -
-
{i + 1}. {question.input_question} - {question.mandatory && ( - * - )} -
- - - {question.input_selections_list.map((option, idx) => ( - handleMultiSelect(e.target.checked, option, i)} - checked={currentInteraction?.questions_response ? currentInteraction?.questions_response[i]?.response?.includes(option) ?? false : ""} - /> - } - label={option} - /> - ))} - - -
- ); + case "multi_select_options": + return ( +
+
+ {i + 1}. {question.input_question} + {question.mandatory && ( + + {" "} + * + + )} +
+ + + {question.input_selections_list.map((option, idx) => ( + + handleMultiSelect(e.target.checked, option, i) + } + checked={ + currentInteraction?.questions_response + ? currentInteraction?.questions_response[ + i + ]?.response?.includes(option) ?? false + : "" + } + /> + } + label={option} + /> + ))} + + +
+ ); - case "mcq": - return ( -
-
{i + 1}. {question.input_question} - {question.mandatory && ( - * - )} -
- - handleMCQ(e.target.value, i)} - > - {question?.input_selections_list?.map((option, idx) => ( - } - label={option} - /> - ))} - - -
- ); + case "mcq": + return ( +
+
+ {i + 1}. {question.input_question} + {question.mandatory && ( + + {" "} + * + + )} +
+ + handleMCQ(e.target.value, i)} + > + {question?.input_selections_list?.map((option, idx) => ( + } + label={option} + /> + ))} + + +
+ ); - default: - return null; - } -})} + default: + return null; + } + })}
@@ -848,28 +953,36 @@ const handleInputChange = (e, interactionIndex, blankIndex) => { expanded: "Mui-expanded", }} > - - - {pair?.prompt} - {expanded[index] && ( - - - {pair.text} - - - )} - + + {pair?.prompt} + {expanded[index] && ( + + + {pair.text} + + + )} + {/* { > {typeof(pair.output)==="string"?pair?.output:pair?.output[0]?.value} */} - -