Skip to content

Commit 329144a

Browse files
jay-m-devjay-m-dev
authored
Merge pull request #611 from HyunjunA/master
DataCard deletion button
2 parents 0fecb18 + 3a2b465 commit 329144a

File tree

3 files changed

+135
-51
lines changed

3 files changed

+135
-51
lines changed

‎lab/webapp/src/components/Datasets/components/DatasetCard/components/DatasetActions/index.jsx

+35-28
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,21 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
2828
(Autogenerated header, do not modify)
2929
3030
*/
31-
import React from 'react';
32-
import { Loader, Dimmer, Checkbox, Popup, Dropdown, Icon } from 'semantic-ui-react';
31+
import React from "react";
32+
import {
33+
Loader,
34+
Dimmer,
35+
Checkbox,
36+
Popup,
37+
Dropdown,
38+
Icon,
39+
} from "semantic-ui-react";
3340

3441
function DatasetActions({ dataset, recommender, toggleAI }) {
3542
const onToggleAI = () => {
3643
const aiState = dataset.ai;
37-
const aiNextState = aiState === 'off' || aiState === 'finished' ? 'requested' : 'off';
44+
const aiNextState =
45+
aiState === "off" || aiState === "finished" ? "requested" : "off";
3846

3947
toggleAI(dataset._id, aiNextState);
4048

@@ -47,53 +55,52 @@ function DatasetActions({ dataset, recommender, toggleAI }) {
4755
// buildNewExpPopup
4856

4957
localStorage.setItem("addNewPopup", "true");
50-
localStorage.setItem('aiTooglePopup', 'true');
51-
localStorage.setItem('buildNewExpPopup', 'true');
52-
53-
58+
localStorage.setItem("aiTooglePopup", "true");
59+
localStorage.setItem("buildNewExpPopup", "true");
5460
};
5561

5662
// ai states: on, queueing, requested, off, finished
5763
// recommender states: initializing, disabled, active
5864

5965
// if the recommender is in an off or initializing state, disable the ai toggle
6066
const hasMetadata = dataset.has_metadata;
61-
const aiLabelText = 'AI';
62-
63-
const recState = recommender.status;
64-
const aiState = dataset.ai;
67+
const aiLabelText = "AI";
6568

66-
const aiInitializing = (recState === 'initializing') ? true : false;
67-
const aiDisabled = (recState === 'running') ? dataset.isTogglingAI : true;
68-
const aiIsChecked = (aiState === 'off' || aiState === 'finished') ? false : true;
69+
const recState = recommender.status;
70+
const aiState = dataset.ai;
6971

70-
const aiLabelClass = `ai-label ${(aiIsChecked) ? 'bright' : 'dim' }`;
71-
const aiToggleClass = `ai-switch ${(aiState === 'on' || aiState === 'queuing') ? 'active' : aiState }`;
72+
const aiInitializing = recState === "initializing" ? true : false;
73+
const aiDisabled = recState === "running" ? dataset.isTogglingAI : true;
74+
const aiIsChecked =
75+
aiState === "off" || aiState === "finished" ? false : true;
7276

73-
const aiPopupContent = (recState === 'running') ? `AI ${aiState}` : `AI recommender ${recState}`;
77+
const aiLabelClass = `ai-label ${aiIsChecked ? "bright" : "dim"}`;
78+
const aiToggleClass = `ai-switch ${
79+
aiState === "on" || aiState === "queuing" ? "active" : aiState
80+
}`;
7481

75-
const dropdownIcon = <Icon inverted color="grey" size="large" name="caret down" />;
82+
const aiPopupContent =
83+
recState === "running" ? `AI ${aiState}` : `AI recommender ${recState}`;
7684

85+
const dropdownIcon = (
86+
<Icon inverted color="grey" size="large" name="caret down" />
87+
);
7788

7889
if (aiInitializing) {
7990
return (
8091
<span>
8192
<span>
82-
<span className={aiLabelClass}>
83-
{aiLabelText}
84-
</span>
85-
<Loader size='small' active inline indeterminate />
93+
<span className={aiLabelClass}>{aiLabelText}</span>
94+
<Loader size="small" active inline indeterminate />
8695
</span>
87-
</span>
96+
</span>
8897
);
8998
} else {
9099
return (
91100
<span>
92-
{hasMetadata &&
101+
{hasMetadata && (
93102
<span>
94-
<span className={aiLabelClass}>
95-
{aiLabelText}
96-
</span>
103+
<span className={aiLabelClass}>{aiLabelText}</span>
97104
<Popup
98105
content={aiPopupContent}
99106
size="small"
@@ -109,7 +116,7 @@ function DatasetActions({ dataset, recommender, toggleAI }) {
109116
}
110117
/>
111118
</span>
112-
}
119+
)}
113120
{/*<Dropdown pointing="top right" icon={dropdownIcon}>
114121
<Dropdown.Menu>
115122
<Dropdown.Item icon="file" text="Replace file" />

‎lab/webapp/src/components/Datasets/components/DatasetCard/index.jsx

+76-13
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ import {
4242
Popup,
4343
Message,
4444
} from "semantic-ui-react";
45-
import { formatDataset } from "../../../../utils/formatter";
45+
import { formatDataset, formatDatasetOuter } from "../../../../utils/formatter";
4646

4747
const DatasetCard = ({ dataset, recommender, toggleAI }) => {
4848
const datasetLink = `/#/datasets/${dataset._id}`;
@@ -100,9 +100,45 @@ const DatasetCard = ({ dataset, recommender, toggleAI }) => {
100100
// api call to remove dataset
101101
}
102102

103-
function removeDatasetCard(e) {
103+
// // ==================== chat api ====================
104+
// async function postChats(experimentId) {
105+
// // POST http://localhost:5080/chatapi/v1/chats
106+
// // Content-Type: application/json
107+
108+
// // {
109+
// // "title" : "Chat with experiment id 2",
110+
// // "_experiment_id": "63f6e4987c5f93004a3e3ca8",
111+
// // "_dataset_id": "63f6e4947c5f93004a3e3ca7"
112+
// // }
113+
114+
// let data = await fetch("/chatapi/v1/chats", {
115+
// method: "POST",
116+
// headers: {
117+
// "Content-Type": "application/json",
118+
// },
119+
// body: JSON.stringify({
120+
// title: "ChatBox",
121+
// _experiment_id: experimentId,
122+
// _dataset_id: experiment.data._dataset_id,
123+
// }),
124+
// })
125+
// .then((res) => res.json())
126+
// .then((data) => {
127+
// // console.log("postChats", data);
128+
// return data;
129+
// })
130+
// .catch((err) => {
131+
// // console.log("err--postChats",err);
132+
// return err;
133+
// });
134+
135+
// return data;
136+
// }
137+
138+
// Removes a dataset card element from the DOM upon an event
139+
async function removeDatasetCard(e) {
104140
let parent = e.target.closest(".dataset-card");
105-
console.log(parent);
141+
// console.log(parent);
106142
parent.style.cssText += ";display:none!important;";
107143

108144
// find child which has <a> tag from the parent
@@ -115,17 +151,41 @@ const DatasetCard = ({ dataset, recommender, toggleAI }) => {
115151
// and the last element is the dataset id
116152
let dataset_id = href.split("/").pop();
117153

154+
await removeDatasetFiles(dataset_id);
155+
118156
console.log(dataset_id);
119157

120158
// api call to remove dataset
121159
}
122160

161+
// api call to remove all files related to the data id
162+
async function removeDatasetFiles(dataset_id) {
163+
// api call to remove dataset files example
164+
// /api/v1/datasets/63f6e4947c5f93004a3e3ca7
165+
166+
await fetch("/api/v1/datasets/" + dataset_id, {
167+
method: "DELETE",
168+
headers: {
169+
"Content-Type": "application/json",
170+
},
171+
})
172+
.then((res) => res.json())
173+
.then((data) => {
174+
console.log("removeDatasetFiles", data);
175+
return data;
176+
})
177+
.catch((err) => {
178+
console.log("err--removeDatasetFiles", err);
179+
return err;
180+
});
181+
}
182+
123183
function mouseEnterCardDelectButton(e) {
124184
console.log("mouseoverCardDelectButton");
125185
console.log(e.target);
126186

127187
// make the red boundary in the trash can emoji
128-
e.target.style.cssText += ";border: 0.5px solid red;";
188+
e.target.style.cssText += ";border: 0.1px solid red;";
129189
}
130190

131191
function mouseLeaveCardDelectButton(e) {
@@ -188,25 +248,26 @@ const DatasetCard = ({ dataset, recommender, toggleAI }) => {
188248
<Header
189249
as="a"
190250
inverted
191-
size="large"
251+
// size="large"
252+
size="medium"
192253
icon={icon_type}
193-
content={formatDataset(dataset.name)}
254+
content={formatDatasetOuter(dataset.name)}
194255
href={datasetLink}
195256
className="title"
196257
/>
197258
}
198259
/>
199-
260+
{/* <div style={{ display: "flex", justifyContent: "flex-end" }}> */}
200261
{/* trash emoji */}
201-
{/* <span
262+
<span
202263
className="float-right"
203264
onClick={clickDatasetCardDelButton}
204265
onMouseEnter={mouseEnterCardDelectButton}
205266
onMouseLeave={mouseLeaveCardDelectButton}
206267
style={{ cursor: "pointer" }}
207268
>
208269
🗑
209-
</span> */}
270+
</span>
210271

211272
<span className="float-right">
212273
<DatasetActions
@@ -215,6 +276,7 @@ const DatasetCard = ({ dataset, recommender, toggleAI }) => {
215276
toggleAI={toggleAI}
216277
/>
217278
</span>
279+
{/* </div> */}
218280
</Segment>
219281
}
220282
position="bottom right"
@@ -344,24 +406,25 @@ const DatasetCard = ({ dataset, recommender, toggleAI }) => {
344406
<Header
345407
as="a"
346408
inverted
347-
size="large"
409+
// size="large"
410+
size="medium"
348411
icon={icon_type}
349-
content={formatDataset(dataset.name)}
412+
content={formatDatasetOuter(dataset.name)}
350413
href={datasetLink}
351414
className="title"
352415
/>
353416
}
354417
/>
355418
{/* trash emoji */}
356-
{/* <span
419+
<span
357420
className="float-right"
358421
onClick={clickDatasetCardDelButton}
359422
onMouseEnter={mouseEnterCardDelectButton}
360423
onMouseLeave={mouseLeaveCardDelectButton}
361424
style={{ cursor: "pointer" }}
362425
>
363426
🗑
364-
</span> */}
427+
</span>
365428
<span className="float-right">
366429
<DatasetActions
367430
dataset={dataset}

‎lab/webapp/src/utils/formatter.js

+24-10
Original file line numberDiff line numberDiff line change
@@ -28,37 +28,51 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
2828
(Autogenerated header, do not modify)
2929
3030
*/
31-
import moment from 'moment';
32-
import twix from 'twix'; // eslint-disable-line no-unused-vars
31+
import moment from "moment";
32+
import twix from "twix"; // eslint-disable-line no-unused-vars
3333

3434
export const formatDataset = (str) => {
3535
if (str !== undefined) {
36-
str = str.replace(/_/g, ' '); // remove underscore
37-
str = str.replace(/-/g, ' '); // remove dashes
38-
str = str.replace(/(^|\s)[a-z]/g, f => f.toUpperCase()); // uppercase each new word
36+
str = str.replace(/_/g, " "); // remove underscore
37+
str = str.replace(/-/g, " "); // remove dashes
38+
str = str.replace(/(^|\s)[a-z]/g, (f) => f.toUpperCase()); // uppercase each new word
39+
}
40+
return str;
41+
};
42+
43+
export const formatDatasetOuter = (str, maxLength = 25) => {
44+
if (str !== undefined) {
45+
str = str.replace(/_/g, " "); // remove underscore
46+
str = str.replace(/-/g, " "); // remove dashes
47+
str = str.replace(/(^|\s)[a-z]/g, (f) => f.toUpperCase()); // uppercase each new word
48+
49+
// Truncate the string if it's too long
50+
if (str.length > maxLength) {
51+
str = str.substring(0, maxLength - 3) + "...";
52+
}
3953
}
4054
return str;
4155
};
4256

4357
export const formatAlgorithm = (str) => {
4458
if (str !== undefined) {
4559
// put spaces between capitalized words
46-
str = str.replace(/([a-z])([A-Z])/g, '$1 $2');
47-
str = str.replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');
60+
str = str.replace(/([a-z])([A-Z])/g, "$1 $2");
61+
str = str.replace(/([A-Z])([A-Z][a-z])/g, "$1 $2");
4862
}
4963
return str;
5064
};
5165

5266
export const formatParam = (str) => {
5367
if (str !== undefined) {
54-
str = str.replace(/_/g, ' '); // remove underscore
55-
str = str.replace(/(^|\s)[a-z]/g, f => f.toUpperCase()); // uppercase each new word
68+
str = str.replace(/_/g, " "); // remove underscore
69+
str = str.replace(/(^|\s)[a-z]/g, (f) => f.toUpperCase()); // uppercase each new word
5670
}
5771
return str;
5872
};
5973

6074
export const formatTime = (time) => {
61-
return moment(time).format('M/DD/YY h:mm a');
75+
return moment(time).format("M/DD/YY h:mm a");
6276
};
6377

6478
export const formatDuration = (startTime, finishTime) => {

0 commit comments

Comments
 (0)