Skip to content

Commit

Permalink
Merge pull request #611 from HyunjunA/master
Browse files Browse the repository at this point in the history 
DataCard deletion button
  • Loading branch information
@jay-m-dev
jay-m-dev authored Sep 26, 2023
2 parents 0fecb18 + 3a2b465 commit 329144a
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 51 deletions.
63 changes: 35 additions & 28 deletions ...webapp/src/components/Datasets/components/DatasetCard/components/DatasetActions/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,21 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
(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);

Expand All @@ -47,53 +55,52 @@ 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
// recommender states: initializing, disabled, active

// 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 = <Icon inverted color="grey" size="large" name="caret down" />;
const aiPopupContent =
recState === "running" ? `AI ${aiState}` : `AI recommender ${recState}`;

const dropdownIcon = (
<Icon inverted color="grey" size="large" name="caret down" />
);

if (aiInitializing) {
return (
<span>
<span>
<span className={aiLabelClass}>
{aiLabelText}
</span>
<Loader size='small' active inline indeterminate />
<span className={aiLabelClass}>{aiLabelText}</span>
<Loader size="small" active inline indeterminate />
</span>
</span>
</span>
);
} else {
return (
<span>
{hasMetadata &&
{hasMetadata && (
<span>
<span className={aiLabelClass}>
{aiLabelText}
</span>
<span className={aiLabelClass}>{aiLabelText}</span>
<Popup
content={aiPopupContent}
size="small"
Expand All @@ -109,7 +116,7 @@ function DatasetActions({ dataset, recommender, toggleAI }) {
}
/>
</span>
}
)}
{/*<Dropdown pointing="top right" icon={dropdownIcon}>
<Dropdown.Menu>
<Dropdown.Item icon="file" text="Replace file" />
Expand Down
89 changes: 76 additions & 13 deletions lab/webapp/src/components/Datasets/components/DatasetCard/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}`;
Expand Down Expand Up @@ -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 <a> tag from the parent
Expand All @@ -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) {
Expand Down Expand Up @@ -188,25 +248,26 @@ const DatasetCard = ({ dataset, recommender, toggleAI }) => {
<Header
as="a"
inverted
size="large"
// size="large"
size="medium"
icon={icon_type}
content={formatDataset(dataset.name)}
content={formatDatasetOuter(dataset.name)}
href={datasetLink}
className="title"
/>
}
/>

{/* <div style={{ display: "flex", justifyContent: "flex-end" }}> */}
{/* trash emoji */}
{/* <span
<span
className="float-right"
onClick={clickDatasetCardDelButton}
onMouseEnter={mouseEnterCardDelectButton}
onMouseLeave={mouseLeaveCardDelectButton}
style={{ cursor: "pointer" }}
>
🗑
</span> */}
</span>

<span className="float-right">
<DatasetActions
Expand All @@ -215,6 +276,7 @@ const DatasetCard = ({ dataset, recommender, toggleAI }) => {
toggleAI={toggleAI}
/>
</span>
{/* </div> */}
</Segment>
}
position="bottom right"
Expand Down Expand Up @@ -344,24 +406,25 @@ const DatasetCard = ({ dataset, recommender, toggleAI }) => {
<Header
as="a"
inverted
size="large"
// size="large"
size="medium"
icon={icon_type}
content={formatDataset(dataset.name)}
content={formatDatasetOuter(dataset.name)}
href={datasetLink}
className="title"
/>
}
/>
{/* trash emoji */}
{/* <span
<span
className="float-right"
onClick={clickDatasetCardDelButton}
onMouseEnter={mouseEnterCardDelectButton}
onMouseLeave={mouseLeaveCardDelectButton}
style={{ cursor: "pointer" }}
>
🗑
</span> */}
</span>
<span className="float-right">
<DatasetActions
dataset={dataset}
Expand Down
34 changes: 24 additions & 10 deletions lab/webapp/src/utils/formatter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,37 +28,51 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
(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;
};

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) => {
Expand Down

0 comments on commit 329144a

Please sign in to comment.