Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

DataCard deletion button #611

Merged
merged 2 commits into from
Sep 26, 2023
Merged

DataCard deletion button #611

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c6284c0
Made the deletion button work with the deletion api call.
HyunjunA Sep 26, 2023
3a2b465
added formetDatasetOuter function to deal with long dataset name
HyunjunA Sep 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 35 additions & 28 deletions ...webapp/src/components/Datasets/components/DatasetCard/components/DatasetActions/index.jsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading