Skip to content

Commit 361ec32

Browse files
longshuicylongshuicy
authored
List all datasets (#2)
* add dashboard component; half done * change icon * select dataset/file/preview works * styling the action cards * ugly implementation of the breadcrumb * ugly implementation of the breadcrumb * default the limit state
1 parent 16fe388 commit 361ec32

File tree

10 files changed

+389
-104
lines changed

10 files changed

+389
-104
lines changed

‎src/actions/dataset.js‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export function receiveFilesInDataset(type, json){
1111
});
1212
};
1313
}
14-
export function fetchFilesInDataset(id="610d54a15e0e9253e65863f8"){
14+
export function fetchFilesInDataset(id){
1515
let url = `${config.hostname}/clowder/api/datasets/${id}/files?superAdmin=true`;
1616
return (dispatch) => {
1717
return fetch(url, {mode:"cors", headers: getHeader()})
@@ -38,7 +38,7 @@ export function receiveDatasetAbout(type, json){
3838
});
3939
};
4040
}
41-
export function fetchDatasetAbout(id="610d54a15e0e9253e65863f8"){
41+
export function fetchDatasetAbout(id){
4242
let url = `${config.hostname}/clowder/api/datasets/${id}?superAdmin=true`;
4343
return (dispatch) => {
4444
return fetch(url, {mode:"cors", headers: getHeader()})
@@ -54,3 +54,30 @@ export function fetchDatasetAbout(id="610d54a15e0e9253e65863f8"){
5454
});
5555
};
5656
}
57+
58+
export const RECEIVE_DATASETS = "RECEIVE_DATASETS";
59+
export function receiveDatasets(type, json){
60+
return (dispatch) => {
61+
dispatch({
62+
type: type,
63+
datasets: json,
64+
receivedAt: Date.now(),
65+
});
66+
};
67+
}
68+
export function fetchDatasets(){
69+
let url = `${config.hostname}/clowder/api/datasets?superAdmin=true&limit=10`;
70+
return (dispatch) => {
71+
return fetch(url, {mode:"cors", headers: getHeader()})
72+
.then((response) => {
73+
if (response.status === 200) {
74+
response.json().then(json =>{
75+
dispatch(receiveDatasets(RECEIVE_DATASETS, json));
76+
});
77+
}
78+
else {
79+
dispatch(receiveDatasets(RECEIVE_DATASETS, []));
80+
}
81+
});
82+
};
83+
}

‎src/components/App.jsx‎

Lines changed: 129 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,25 @@ import React, {useEffect, useState} from "react";
22
import TopBar from "./childComponents/TopBar";
33
import Breadcrumbs from "./childComponents/BreadCrumb";
44
import {makeStyles} from "@material-ui/core/styles";
5-
import File from "./File";
6-
import Dataset from "./Dataset";
75
import {fetchFileMetadata} from "../utils/file";
86
import {downloadThumbnail} from "../utils/thumbnail";
7+
import Dashboard from "./Dashbard";
8+
import Dataset from "./Dataset";
9+
import File from "./File";
910

1011

11-
const useStyles = makeStyles((theme) => ({
12-
13-
}));
12+
const useStyles = makeStyles((theme) => ({}));
1413

1514
export default function App(props) {
1615
const classes = useStyles();
1716

18-
const [datasetId, setDatasetId] = useState("");
1917
const [selectedFileId, setSelectedFileId] = useState("");
18+
const [selectedDatasetId, setSelectedDatasetId] = useState("");
2019
const [fileMetadataList, setFileMetadataList] = useState([]);
21-
const [thumbnailList, setThumbnailList] = useState([]);
20+
const [fileThumbnailList, setFileThumbnailList] = useState([]);
21+
const [datasetThumbnailList, setDatasetThumbnailList] = useState([]);
2222

23-
const [paths, setPaths] = useState(["explore", "collection", "dataset", ""]);
23+
const [paths, setPaths] = useState([]);
2424

2525
const {
2626
// files
@@ -31,46 +31,84 @@ export default function App(props) {
3131
//dataset
3232
listFilesInDataset, filesInDataset,
3333
listDatasetAbout, datasetAbout,
34+
35+
//dashboard
36+
listDatasets, datasets,
37+
3438
...other
3539
} = props;
3640

3741
// component did mount
3842
useEffect(() => {
39-
listFilesInDataset();
40-
listDatasetAbout();
43+
listDatasets();
4144
}, []);
4245

43-
// // set breadcrumbs
44-
// useEffect(() => {
45-
// setPaths(paths => [...paths.slice(0, paths.length - 1), fileMetadata["filename"]]);
46-
// }, [fileMetadata]);
46+
useEffect(() => {
47+
48+
(async () => {
49+
if (datasets !== undefined && datasets.length > 0) {
50+
51+
let datasetThumbnailListTemp = [];
52+
await Promise.all(datasets.map(async (dataset) => {
53+
// add thumbnails
54+
if (dataset["thumbnail"] !== null && dataset["thumbnail"] !== undefined) {
55+
let thumbnailURL = await downloadThumbnail(dataset["thumbnail"]);
56+
datasetThumbnailListTemp.push({"id": dataset["id"], "thumbnail": thumbnailURL})
57+
}
58+
}));
59+
setDatasetThumbnailList(datasetThumbnailListTemp);
60+
}
61+
})();
62+
}, [datasets])
4763

4864
// get metadata of each files; because we need the thumbnail of each file!!!
4965
useEffect(() => {
5066

5167
(async () => {
52-
if (filesInDataset !== undefined && filesInDataset.length > 0){
68+
if (filesInDataset !== undefined && filesInDataset.length > 0) {
5369

5470
let fileMetadataListTemp = [];
55-
let thumbnailListTemp = [];
71+
let fileThumbnailListTemp = [];
5672
await Promise.all(filesInDataset.map(async (fileInDataset) => {
5773

5874
let fileMetadata = await fetchFileMetadata(fileInDataset["id"]);
75+
fileMetadataListTemp.push({"id": fileInDataset["id"], "metadata": fileMetadata});
5976

6077
// add thumbnails
61-
if (fileMetadata["thumbnail"] !== null && fileMetadata["thumbnail"] !== undefined){
78+
if (fileMetadata["thumbnail"] !== null && fileMetadata["thumbnail"] !== undefined) {
6279
let thumbnailURL = await downloadThumbnail(fileMetadata["thumbnail"]);
63-
fileMetadataListTemp.push({"id":fileInDataset["id"], "metadata": fileMetadata, "thumbnail": thumbnailURL});
64-
thumbnailListTemp.push({"id":fileInDataset["id"], "thumbnail": thumbnailURL})
80+
fileThumbnailListTemp.push({"id": fileInDataset["id"], "thumbnail": thumbnailURL})
6581
}
6682
}));
6783

6884
setFileMetadataList(fileMetadataListTemp);
69-
setThumbnailList(thumbnailListTemp);
85+
setFileThumbnailList(fileThumbnailListTemp);
7086
}
7187
})();
7288
}, [filesInDataset])
7389

90+
const selectDataset = (selectedDatasetId) => {
91+
// pass that id to dataset component
92+
setSelectedDatasetId(selectedDatasetId);
93+
94+
// load dataset information
95+
listFilesInDataset(selectedDatasetId);
96+
listDatasetAbout(selectedDatasetId);
97+
98+
// for breadcrumb
99+
let datasetName = selectedDatasetId;
100+
datasets.map(dataset =>{
101+
if (dataset["id"] === selectedDatasetId) datasetName = dataset["name"];
102+
});
103+
setPaths([
104+
{
105+
"name":datasetName,
106+
"id": selectedDatasetId,
107+
"type":"dataset"
108+
}
109+
]);
110+
}
111+
74112
const selectFile = (selectedFileId) => {
75113
// pass that id to file component
76114
setSelectedFileId(selectedFileId);
@@ -79,36 +117,85 @@ export default function App(props) {
79117
listFileExtractedMetadata(selectedFileId);
80118
listFileMetadataJsonld(selectedFileId);
81119
listFilePreviews(selectedFileId);
120+
121+
// for breadcrumb
122+
let datasetName = selectedDatasetId;
123+
datasets.map(dataset =>{
124+
if (dataset["id"] === selectedDatasetId) datasetName = dataset["name"];
125+
});
126+
let fileName = selectedFileId;
127+
filesInDataset.map(file =>{
128+
if (file["id"] === selectedFileId) fileName = file["filename"];
129+
});
130+
131+
setPaths([
132+
{
133+
"name":datasetName,
134+
"id": selectedDatasetId,
135+
"type":"dataset"
136+
},
137+
{
138+
"name":fileName,
139+
"id": selectedFileId,
140+
"type":"file"
141+
}
142+
]);
143+
}
144+
145+
const goToPath = (pathType, id) => {
146+
if (pathType === "dataset"){
147+
setSelectedDatasetId(id);
148+
setSelectedFileId("");
149+
150+
let datasetName = id;
151+
datasets.map((dataset)=>{ if (dataset["id"] === id) datasetName = dataset["name"]});
152+
setPaths([
153+
{
154+
"name": datasetName,
155+
"id": id,
156+
"type":"dataset"
157+
},
158+
]);
159+
}
160+
else{
161+
setSelectedDatasetId("");
162+
setSelectedFileId("");
163+
setPaths([]);
164+
}
82165
}
83166

84167
return (
85168
<div>
86169
<TopBar/>
87170
<div className="outer-container">
88-
<Breadcrumbs paths={paths}/>
171+
<Breadcrumbs paths={paths} goToPath={goToPath}/>
89172
{
90-
selectedFileId === "" ?
91-
// Dataset page
92-
<Dataset selectFile={selectFile}
93-
files={filesInDataset}
94-
thumbnails={thumbnailList}
95-
about={datasetAbout}
96-
/>
97-
:
98-
// file page
99-
fileMetadataList.map((fileMetadata) =>{
100-
if (selectedFileId === fileMetadata["id"]){
101-
return (
102-
<File fileMetadata={fileMetadata["metadata"]}
103-
fileExtractedMetadata={fileExtractedMetadata}
104-
fileMetadataJsonld={fileMetadataJsonld}
105-
filePreviews={filePreviews}
106-
fileId={selectedFileId}/>
107-
)
108-
}
109-
})
173+
(() => {
174+
if (selectedDatasetId === "") {
175+
return <Dashboard datasets={datasets} selectDataset={selectDataset}
176+
thumbnails={datasetThumbnailList}/>
177+
} else if (selectedFileId === "") {
178+
return <Dataset files={filesInDataset} selectFile={selectFile}
179+
thumbnails={fileThumbnailList} about={datasetAbout}/>
180+
} else {
181+
return fileMetadataList.map((fileMetadata) => {
182+
if (selectedFileId === fileMetadata["id"]) {
183+
return (
184+
<File fileMetadata={fileMetadata["metadata"]}
185+
fileExtractedMetadata={fileExtractedMetadata}
186+
fileMetadataJsonld={fileMetadataJsonld}
187+
filePreviews={filePreviews}
188+
fileId={selectedFileId}/>
189+
)
190+
}
191+
else{
192+
return <></>;
193+
}
194+
});
195+
}
196+
})()
110197
}
111-
</div>
198+
</div>
112199
</div>
113200
);
114201
}

0 commit comments

Comments
 (0)