Skip to content

Commit

Permalink
List all datasets (#2)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@longshuicy
longshuicy authored Aug 10, 2021
1 parent 16fe388 commit 361ec32
Show file tree
Hide file tree
Showing 10 changed files with 389 additions and 104 deletions.
31 changes: 29 additions & 2 deletions src/actions/dataset.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export function receiveFilesInDataset(type, json){
});
};
}
export function fetchFilesInDataset(id="610d54a15e0e9253e65863f8"){
export function fetchFilesInDataset(id){
let url = `${config.hostname}/clowder/api/datasets/${id}/files?superAdmin=true`;
return (dispatch) => {
return fetch(url, {mode:"cors", headers: getHeader()})
Expand All @@ -38,7 +38,7 @@ export function receiveDatasetAbout(type, json){
});
};
}
export function fetchDatasetAbout(id="610d54a15e0e9253e65863f8"){
export function fetchDatasetAbout(id){
let url = `${config.hostname}/clowder/api/datasets/${id}?superAdmin=true`;
return (dispatch) => {
return fetch(url, {mode:"cors", headers: getHeader()})
Expand All @@ -54,3 +54,30 @@ export function fetchDatasetAbout(id="610d54a15e0e9253e65863f8"){
});
};
}

export const RECEIVE_DATASETS = "RECEIVE_DATASETS";
export function receiveDatasets(type, json){
return (dispatch) => {
dispatch({
type: type,
datasets: json,
receivedAt: Date.now(),
});
};
}
export function fetchDatasets(){
let url = `${config.hostname}/clowder/api/datasets?superAdmin=true&limit=10`;
return (dispatch) => {
return fetch(url, {mode:"cors", headers: getHeader()})
.then((response) => {
if (response.status === 200) {
response.json().then(json =>{
dispatch(receiveDatasets(RECEIVE_DATASETS, json));
});
}
else {
dispatch(receiveDatasets(RECEIVE_DATASETS, []));
}
});
};
}
171 changes: 129 additions & 42 deletions src/components/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,25 @@ import React, {useEffect, useState} from "react";
import TopBar from "./childComponents/TopBar";
import Breadcrumbs from "./childComponents/BreadCrumb";
import {makeStyles} from "@material-ui/core/styles";
import File from "./File";
import Dataset from "./Dataset";
import {fetchFileMetadata} from "../utils/file";
import {downloadThumbnail} from "../utils/thumbnail";
import Dashboard from "./Dashbard";
import Dataset from "./Dataset";
import File from "./File";


const useStyles = makeStyles((theme) => ({

}));
const useStyles = makeStyles((theme) => ({}));

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

const [datasetId, setDatasetId] = useState("");
const [selectedFileId, setSelectedFileId] = useState("");
const [selectedDatasetId, setSelectedDatasetId] = useState("");
const [fileMetadataList, setFileMetadataList] = useState([]);
const [thumbnailList, setThumbnailList] = useState([]);
const [fileThumbnailList, setFileThumbnailList] = useState([]);
const [datasetThumbnailList, setDatasetThumbnailList] = useState([]);

const [paths, setPaths] = useState(["explore", "collection", "dataset", ""]);
const [paths, setPaths] = useState([]);

const {
// files
Expand All @@ -31,46 +31,84 @@ export default function App(props) {
//dataset
listFilesInDataset, filesInDataset,
listDatasetAbout, datasetAbout,

//dashboard
listDatasets, datasets,

...other
} = props;

// component did mount
useEffect(() => {
listFilesInDataset();
listDatasetAbout();
listDatasets();
}, []);

// // set breadcrumbs
// useEffect(() => {
// setPaths(paths => [...paths.slice(0, paths.length - 1), fileMetadata["filename"]]);
// }, [fileMetadata]);
useEffect(() => {

(async () => {
if (datasets !== undefined && datasets.length > 0) {

let datasetThumbnailListTemp = [];
await Promise.all(datasets.map(async (dataset) => {
// add thumbnails
if (dataset["thumbnail"] !== null && dataset["thumbnail"] !== undefined) {
let thumbnailURL = await downloadThumbnail(dataset["thumbnail"]);
datasetThumbnailListTemp.push({"id": dataset["id"], "thumbnail": thumbnailURL})
}
}));
setDatasetThumbnailList(datasetThumbnailListTemp);
}
})();
}, [datasets])

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

(async () => {
if (filesInDataset !== undefined && filesInDataset.length > 0){
if (filesInDataset !== undefined && filesInDataset.length > 0) {

let fileMetadataListTemp = [];
let thumbnailListTemp = [];
let fileThumbnailListTemp = [];
await Promise.all(filesInDataset.map(async (fileInDataset) => {

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

// add thumbnails
if (fileMetadata["thumbnail"] !== null && fileMetadata["thumbnail"] !== undefined){
if (fileMetadata["thumbnail"] !== null && fileMetadata["thumbnail"] !== undefined) {
let thumbnailURL = await downloadThumbnail(fileMetadata["thumbnail"]);
fileMetadataListTemp.push({"id":fileInDataset["id"], "metadata": fileMetadata, "thumbnail": thumbnailURL});
thumbnailListTemp.push({"id":fileInDataset["id"], "thumbnail": thumbnailURL})
fileThumbnailListTemp.push({"id": fileInDataset["id"], "thumbnail": thumbnailURL})
}
}));

setFileMetadataList(fileMetadataListTemp);
setThumbnailList(thumbnailListTemp);
setFileThumbnailList(fileThumbnailListTemp);
}
})();
}, [filesInDataset])

const selectDataset = (selectedDatasetId) => {
// pass that id to dataset component
setSelectedDatasetId(selectedDatasetId);

// load dataset information
listFilesInDataset(selectedDatasetId);
listDatasetAbout(selectedDatasetId);

// for breadcrumb
let datasetName = selectedDatasetId;
datasets.map(dataset =>{
if (dataset["id"] === selectedDatasetId) datasetName = dataset["name"];
});
setPaths([
{
"name":datasetName,
"id": selectedDatasetId,
"type":"dataset"
}
]);
}

const selectFile = (selectedFileId) => {
// pass that id to file component
setSelectedFileId(selectedFileId);
Expand All @@ -79,36 +117,85 @@ export default function App(props) {
listFileExtractedMetadata(selectedFileId);
listFileMetadataJsonld(selectedFileId);
listFilePreviews(selectedFileId);

// for breadcrumb
let datasetName = selectedDatasetId;
datasets.map(dataset =>{
if (dataset["id"] === selectedDatasetId) datasetName = dataset["name"];
});
let fileName = selectedFileId;
filesInDataset.map(file =>{
if (file["id"] === selectedFileId) fileName = file["filename"];
});

setPaths([
{
"name":datasetName,
"id": selectedDatasetId,
"type":"dataset"
},
{
"name":fileName,
"id": selectedFileId,
"type":"file"
}
]);
}

const goToPath = (pathType, id) => {
if (pathType === "dataset"){
setSelectedDatasetId(id);
setSelectedFileId("");

let datasetName = id;
datasets.map((dataset)=>{ if (dataset["id"] === id) datasetName = dataset["name"]});
setPaths([
{
"name": datasetName,
"id": id,
"type":"dataset"
},
]);
}
else{
setSelectedDatasetId("");
setSelectedFileId("");
setPaths([]);
}
}

return (
<div>
<TopBar/>
<div className="outer-container">
<Breadcrumbs paths={paths}/>
<Breadcrumbs paths={paths} goToPath={goToPath}/>
{
selectedFileId === "" ?
// Dataset page
<Dataset selectFile={selectFile}
files={filesInDataset}
thumbnails={thumbnailList}
about={datasetAbout}
/>
:
// file page
fileMetadataList.map((fileMetadata) =>{
if (selectedFileId === fileMetadata["id"]){
return (
<File fileMetadata={fileMetadata["metadata"]}
fileExtractedMetadata={fileExtractedMetadata}
fileMetadataJsonld={fileMetadataJsonld}
filePreviews={filePreviews}
fileId={selectedFileId}/>
)
}
})
(() => {
if (selectedDatasetId === "") {
return <Dashboard datasets={datasets} selectDataset={selectDataset}
thumbnails={datasetThumbnailList}/>
} else if (selectedFileId === "") {
return <Dataset files={filesInDataset} selectFile={selectFile}
thumbnails={fileThumbnailList} about={datasetAbout}/>
} else {
return fileMetadataList.map((fileMetadata) => {
if (selectedFileId === fileMetadata["id"]) {
return (
<File fileMetadata={fileMetadata["metadata"]}
fileExtractedMetadata={fileExtractedMetadata}
fileMetadataJsonld={fileMetadataJsonld}
filePreviews={filePreviews}
fileId={selectedFileId}/>
)
}
else{
return <></>;
}
});
}
})()
}
</div>
</div>
</div>
);
}
Loading

0 comments on commit 361ec32

Please sign in to comment.