diff --git a/lab/webapp/src/components/Datasets/components/DatasetCard/components/DatasetActions/index.jsx b/lab/webapp/src/components/Datasets/components/DatasetCard/components/DatasetActions/index.jsx index 33498a29a..8b28cdf6c 100644 --- a/lab/webapp/src/components/Datasets/components/DatasetCard/components/DatasetActions/index.jsx +++ b/lab/webapp/src/components/Datasets/components/DatasetCard/components/DatasetActions/index.jsx @@ -28,13 +28,21 @@ along with this program. If not, see . (Autogenerated header, do not modify) */ -import React from 'react'; -import { Loader, Dimmer, Checkbox, Popup, Dropdown, Icon } from 'semantic-ui-react'; +import React from "react"; +import { + Loader, + Dimmer, + Checkbox, + Popup, + Dropdown, + Icon, +} from "semantic-ui-react"; function DatasetActions({ dataset, recommender, toggleAI }) { const onToggleAI = () => { const aiState = dataset.ai; - const aiNextState = aiState === 'off' || aiState === 'finished' ? 'requested' : 'off'; + const aiNextState = + aiState === "off" || aiState === "finished" ? "requested" : "off"; toggleAI(dataset._id, aiNextState); @@ -47,10 +55,8 @@ function DatasetActions({ dataset, recommender, toggleAI }) { // buildNewExpPopup localStorage.setItem("addNewPopup", "true"); - localStorage.setItem('aiTooglePopup', 'true'); - localStorage.setItem('buildNewExpPopup', 'true'); - - + localStorage.setItem("aiTooglePopup", "true"); + localStorage.setItem("buildNewExpPopup", "true"); }; // ai states: on, queueing, requested, off, finished @@ -58,42 +64,43 @@ function DatasetActions({ dataset, recommender, toggleAI }) { // if the recommender is in an off or initializing state, disable the ai toggle const hasMetadata = dataset.has_metadata; - const aiLabelText = 'AI'; - - const recState = recommender.status; - const aiState = dataset.ai; + const aiLabelText = "AI"; - const aiInitializing = (recState === 'initializing') ? true : false; - const aiDisabled = (recState === 'running') ? dataset.isTogglingAI : true; - const aiIsChecked = (aiState === 'off' || aiState === 'finished') ? false : true; + const recState = recommender.status; + const aiState = dataset.ai; - const aiLabelClass = `ai-label ${(aiIsChecked) ? 'bright' : 'dim' }`; - const aiToggleClass = `ai-switch ${(aiState === 'on' || aiState === 'queuing') ? 'active' : aiState }`; + const aiInitializing = recState === "initializing" ? true : false; + const aiDisabled = recState === "running" ? dataset.isTogglingAI : true; + const aiIsChecked = + aiState === "off" || aiState === "finished" ? false : true; - const aiPopupContent = (recState === 'running') ? `AI ${aiState}` : `AI recommender ${recState}`; + const aiLabelClass = `ai-label ${aiIsChecked ? "bright" : "dim"}`; + const aiToggleClass = `ai-switch ${ + aiState === "on" || aiState === "queuing" ? "active" : aiState + }`; - const dropdownIcon = ; + const aiPopupContent = + recState === "running" ? `AI ${aiState}` : `AI recommender ${recState}`; + const dropdownIcon = ( + + ); if (aiInitializing) { return ( - - {aiLabelText} - - + {aiLabelText} + - + ); } else { return ( - {hasMetadata && + {hasMetadata && ( - - {aiLabelText} - + {aiLabelText} - } + )} {/* diff --git a/lab/webapp/src/components/Datasets/components/DatasetCard/index.jsx b/lab/webapp/src/components/Datasets/components/DatasetCard/index.jsx index 5773c626a..4fa84f330 100644 --- a/lab/webapp/src/components/Datasets/components/DatasetCard/index.jsx +++ b/lab/webapp/src/components/Datasets/components/DatasetCard/index.jsx @@ -42,7 +42,7 @@ import { Popup, Message, } from "semantic-ui-react"; -import { formatDataset } from "../../../../utils/formatter"; +import { formatDataset, formatDatasetOuter } from "../../../../utils/formatter"; const DatasetCard = ({ dataset, recommender, toggleAI }) => { const datasetLink = `/#/datasets/${dataset._id}`; @@ -100,9 +100,45 @@ const DatasetCard = ({ dataset, recommender, toggleAI }) => { // api call to remove dataset } - function removeDatasetCard(e) { + // // ==================== chat api ==================== + // async function postChats(experimentId) { + // // POST http://localhost:5080/chatapi/v1/chats + // // Content-Type: application/json + + // // { + // // "title" : "Chat with experiment id 2", + // // "_experiment_id": "63f6e4987c5f93004a3e3ca8", + // // "_dataset_id": "63f6e4947c5f93004a3e3ca7" + // // } + + // let data = await fetch("/chatapi/v1/chats", { + // method: "POST", + // headers: { + // "Content-Type": "application/json", + // }, + // body: JSON.stringify({ + // title: "ChatBox", + // _experiment_id: experimentId, + // _dataset_id: experiment.data._dataset_id, + // }), + // }) + // .then((res) => res.json()) + // .then((data) => { + // // console.log("postChats", data); + // return data; + // }) + // .catch((err) => { + // // console.log("err--postChats",err); + // return err; + // }); + + // return data; + // } + + // Removes a dataset card element from the DOM upon an event + async function removeDatasetCard(e) { let parent = e.target.closest(".dataset-card"); - console.log(parent); + // console.log(parent); parent.style.cssText += ";display:none!important;"; // find child which has tag from the parent @@ -115,17 +151,41 @@ const DatasetCard = ({ dataset, recommender, toggleAI }) => { // and the last element is the dataset id let dataset_id = href.split("/").pop(); + await removeDatasetFiles(dataset_id); + console.log(dataset_id); // api call to remove dataset } + // api call to remove all files related to the data id + async function removeDatasetFiles(dataset_id) { + // api call to remove dataset files example + // /api/v1/datasets/63f6e4947c5f93004a3e3ca7 + + await fetch("/api/v1/datasets/" + dataset_id, { + method: "DELETE", + headers: { + "Content-Type": "application/json", + }, + }) + .then((res) => res.json()) + .then((data) => { + console.log("removeDatasetFiles", data); + return data; + }) + .catch((err) => { + console.log("err--removeDatasetFiles", err); + return err; + }); + } + function mouseEnterCardDelectButton(e) { console.log("mouseoverCardDelectButton"); console.log(e.target); // make the red boundary in the trash can emoji - e.target.style.cssText += ";border: 0.5px solid red;"; + e.target.style.cssText += ";border: 0.1px solid red;"; } function mouseLeaveCardDelectButton(e) { @@ -188,17 +248,18 @@ const DatasetCard = ({ dataset, recommender, toggleAI }) => {
} /> - + {/*
*/} {/* trash emoji */} - {/* { style={{ cursor: "pointer" }} > 🗑 - */} + { toggleAI={toggleAI} /> + {/*
*/} } position="bottom right" @@ -344,16 +406,17 @@ const DatasetCard = ({ dataset, recommender, toggleAI }) => {
} /> {/* trash emoji */} - {/* { style={{ cursor: "pointer" }} > 🗑 - */} + . (Autogenerated header, do not modify) */ -import moment from 'moment'; -import twix from 'twix'; // eslint-disable-line no-unused-vars +import moment from "moment"; +import twix from "twix"; // eslint-disable-line no-unused-vars export const formatDataset = (str) => { if (str !== undefined) { - str = str.replace(/_/g, ' '); // remove underscore - str = str.replace(/-/g, ' '); // remove dashes - str = str.replace(/(^|\s)[a-z]/g, f => f.toUpperCase()); // uppercase each new word + str = str.replace(/_/g, " "); // remove underscore + str = str.replace(/-/g, " "); // remove dashes + str = str.replace(/(^|\s)[a-z]/g, (f) => f.toUpperCase()); // uppercase each new word + } + return str; +}; + +export const formatDatasetOuter = (str, maxLength = 25) => { + if (str !== undefined) { + str = str.replace(/_/g, " "); // remove underscore + str = str.replace(/-/g, " "); // remove dashes + str = str.replace(/(^|\s)[a-z]/g, (f) => f.toUpperCase()); // uppercase each new word + + // Truncate the string if it's too long + if (str.length > maxLength) { + str = str.substring(0, maxLength - 3) + "..."; + } } return str; }; @@ -43,22 +57,22 @@ export const formatDataset = (str) => { export const formatAlgorithm = (str) => { if (str !== undefined) { // put spaces between capitalized words - str = str.replace(/([a-z])([A-Z])/g, '$1 $2'); - str = str.replace(/([A-Z])([A-Z][a-z])/g, '$1 $2'); + str = str.replace(/([a-z])([A-Z])/g, "$1 $2"); + str = str.replace(/([A-Z])([A-Z][a-z])/g, "$1 $2"); } return str; }; export const formatParam = (str) => { if (str !== undefined) { - str = str.replace(/_/g, ' '); // remove underscore - str = str.replace(/(^|\s)[a-z]/g, f => f.toUpperCase()); // uppercase each new word + str = str.replace(/_/g, " "); // remove underscore + str = str.replace(/(^|\s)[a-z]/g, (f) => f.toUpperCase()); // uppercase each new word } return str; }; export const formatTime = (time) => { - return moment(time).format('M/DD/YY h:mm a'); + return moment(time).format("M/DD/YY h:mm a"); }; export const formatDuration = (startTime, finishTime) => {