Skip to content

Commit

Permalink
tags for data, flow, run, and task updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@nemeth-wias
nemeth-wias committed Jan 9, 2024
1 parent 73231ca commit a833329
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 143 deletions.
148 changes: 16 additions & 132 deletions app/src/pages/api/itemDetail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChartBar, faQuestionCircle, faRulerHorizontal, faTag } from "@fortawesome/free-solid-svg-icons";
// import withStyles from '@mui/styles/withStyles';
import styled from "@emotion/styled";
import { Chip } from "@mui/material";

function fixUpperCase(str) {
let o = "";
Expand All @@ -17,6 +18,20 @@ function fixUpperCase(str) {
return o;
}

export function updateTag(value) {
let currentUrlParams = new URLSearchParams(this.props.location.search);
currentUrlParams.set("tags.tag", value);
currentUrlParams.delete("id"); // selecting a tags should show match list
this.props.history.push(
this.props.location.pathname + "?" + currentUrlParams.toString()
);
};

export const TagChip = styled(Chip)`
margin-bottom: 5px;
margin-left: 5px;
`;

export class FeatureDetail extends React.Component {
render() {
let icon = "";
Expand Down Expand Up @@ -165,135 +180,4 @@ export class EvaluationDetail extends React.Component {
</TableRow>
);
}
}

export class EntryDetails extends React.Component {
constructor() {
super();
this.state = {};
this.state["obj"] = null;
this.state["error"] = null;
this.state["type"] = null;
this.state["entity"] = null;
}

componentDidUpdate() {
if (
this.state["type"] !== this.props.type ||
this.state["entity"] !== this.props.entity
) {
this.setState({ type: this.props.type });
this.setState({ entity: this.props.entity });
getItem(this.props.type, this.props.entity)
.then(data => {
this.setState({ obj: data });
})
.catch(error => {
this.setState({
obj: undefined,
error: error + ""
});
});
}

// Sanity check for bad ID types before rendering
if ((this.props.type === "study" || this.props.type === "benchmark") && this.state.obj !== null &&
this.props.filters["study_type"]["value"] !== this.state.obj.study_type
){ // auto-redirect for bad study type in URL
let currentUrlParams = new URLSearchParams(this.props.location.search);
currentUrlParams.set("study_type", this.state.obj.study_type);
this.props.history.push(
this.props.location.pathname + "?" + currentUrlParams.toString()
);
}
}

componentDidMount() {
this.componentDidUpdate();
}

updateTag = (value) => {
let currentUrlParams = new URLSearchParams(this.props.location.search);
currentUrlParams.set("tags.tag", value);
currentUrlParams.delete("id"); // selecting a tags should show match list
this.props.history.push(
this.props.location.pathname + "?" + currentUrlParams.toString()
);
};

render() {
if (this.state.error !== null) {
if (!this.state.error.includes("404")){
return (
<div className="mainBar">
<h1>An error occured</h1>
<p>{"" + this.state.error}</p>
</div>
);
}
} else if (this.state.obj === null) {
return (
<div className="mainBar">
<h2>Loading...</h2>
</div>
);
} else if (
this.props.type === "data" ||
this.props.type === "task" ||
this.props.type === "flow" ||
this.props.type === "run"
) {
var tags = undefined;
if (this.state.obj.tags) {
tags = this.state.obj.tags.map(t => (
t.tag.toString().startsWith("study") ? "" :
<TagChip key={"tag_" + t.tag} label={" " + t.tag + " "} size="small" onClick={() => this.updateTag(t.tag)}/>
));
}
}

// A nice 404 message for 404s and restricted access
if ((this.state.error !== null && this.state.error.includes("404")) ||
(this.state.obj !== null && this.state.obj.visibility === "private" &&
this.state.obj.uploader_id !== this.props.userID)){
return (
<Grid container spacing={0} direction="column" alignItems="center" justifyContent="center" style={{ minHeight: '50vh' }}>
<Grid item xs={6}>
<h2>This is not the {this.props.type} you are looking for.</h2>
{ this.props.userID === undefined &&
<p>We couldn't find this. You might see more after logging in.</p>
}
</Grid>
<Grid item xs={3} style={{marginTop:50}}>
<PaperPlane color={this.props.color}/>
</Grid>
</Grid>
);
} else {
switch (this.props.type) {
case "data":
return (
<DatasetItem object={this.state.obj} tags={tags}></DatasetItem>
);
case "task":
return <TaskItem object={this.state.obj} tags={tags}></TaskItem>;
case "flow":
return <FlowItem object={this.state.obj} tags={tags}></FlowItem>;
case "run":
return <RunItem object={this.state.obj} tags={tags}></RunItem>;
case "study":
return <StudyItem object={this.state.obj}></StudyItem>;
case "user":
return <UserItem object={this.state.obj}></UserItem>;
case "task_type":
return <TaskTypeItem object={this.state.obj}></TaskTypeItem>;
case "measure":
return <MeasureItem object={this.state.obj}></MeasureItem>;
default:
return (
<DatasetItem object={this.state.obj} tags={tags}></DatasetItem>
);
}
}
}
}
}
12 changes: 10 additions & 2 deletions app/src/pages/d/[dataId].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import ReactMarkdown from "react-markdown";


import { CollapsibleDataTable } from "../api/sizeLimiter";
import { FeatureDetail, QualityDetail } from "../api/itemDetail";
import { FeatureDetail, QualityDetail, updateTag, TagChip } from "../api/itemDetail";
export async function getStaticPaths() {
// No paths are pre-rendered
return { paths: [], fallback: "blocking" }; // or fallback: true, if you prefer
Expand All @@ -43,6 +43,8 @@ const UserChip = styled(Chip)`
margin-bottom: 5px;
`;



const CroissantComponent = ({ url }) => {
const [jsonData, setJsonData] = useState({});

Expand Down Expand Up @@ -243,7 +245,13 @@ function Dataset({ data }) {
{/* Tags */}
<Grid container>
<Grid item md={12}>
<FontAwesomeIcon icon={faTags} /> {data.tags.map(element => element.tag)}
<FontAwesomeIcon icon={faTags} /> {data.tags.map(element => element.tag.toString().startsWith("study") ? "" :
<TagChip key={"tag_" + element.tag} label={" " + element.tag + " "} size="small" onClick={() => updateTag(element.tag)} />


)}


</Grid>
</Grid>

Expand Down
8 changes: 6 additions & 2 deletions app/src/pages/f/[flowId].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import DashboardLayout from "../../layouts/Dashboard";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { getItem } from "../api/getItem";
import { shortenName } from "./flowCard";
import { ParameterDetail, DependencyDetail, LightTooltip } from "../api/itemDetail";
import { ParameterDetail, DependencyDetail, LightTooltip, TagChip } from "../api/itemDetail";

import { Card, CardContent, Grid } from "@mui/material";
import { MetaTag } from "../../components/MetaItems"
Expand Down Expand Up @@ -93,7 +93,11 @@ function Flow({ data }) {

<Grid container>
<Grid item md={12}>
<FontAwesomeIcon icon={faTags} /> {data.tags.map(element => element.tag)}
<FontAwesomeIcon icon={faTags} /> {data.tags.map(element => element.tag.toString().startsWith("study") ? "" :
<TagChip key={"tag_" + element.tag} label={" " + element.tag + " "} size="small" onClick={() => updateTag(element.tag)} />


)}
</Grid>
</Grid>

Expand Down
8 changes: 6 additions & 2 deletions app/src/pages/r/[runId].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTags, faTrophy } from "@fortawesome/free-solid-svg-icons";
import { MetaTag } from "../../components/MetaItems";
import { CollapsibleDataTable } from "../api/sizeLimiter";
import { EvaluationDetail, FlowDetail } from "../api/itemDetail";
import { EvaluationDetail, FlowDetail, TagChip } from "../api/itemDetail";

export async function getStaticPaths() {
// No paths are pre-rendered
Expand Down Expand Up @@ -91,7 +91,11 @@ function Run({ data }) {
</Grid>
<Grid container>
<Grid item md={12}>
<FontAwesomeIcon icon={faTags} /> {data.tags.map(element => element.tag)}
<FontAwesomeIcon icon={faTags} /> {data.tags.map(element => element.tag.toString().startsWith("study") ? "" :
<TagChip key={"tag_" + element.tag} label={" " + element.tag + " "} size="small" onClick={() => updateTag(element.tag)} />


)}
</Grid>
</Grid>
</Grid>
Expand Down
14 changes: 9 additions & 5 deletions app/src/pages/t/[taskId].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { MetaTag } from "../../components/MetaItems"
import { Table, TableBody, TableRow, TableCell, Link as MuiLink} from "@mui/material";
import { green } from "@mui/material/colors";

import { updateTag, TagChip } from "../api/itemDetail";

export async function getStaticPaths() {
// No paths are pre-rendered
Expand Down Expand Up @@ -74,13 +74,17 @@ function Task({ data }) {
<MetaTag type={"downvotes"} value={data.nr_of_downvotes} />
<MetaTag type={"downloads"} value={data.nr_of_downloads} />
<MetaTag type={"runs"} value={data.runs} />
{/* {" "}by{" "} <Grid item md={2} ><MetaDownvotes value={data.downvotes} /></Grid> */}
</Grid>
</Grid>
{data.tags[0] !== undefined && data.tags[0].length > 0 && (
{data.tags[0]?.tag !== undefined && data.tags[0].tag.length > 0 && (
<Grid container>
<Grid item md={12}><FontAwesomeIcon icon={faTags} />{" "}{data.tags}</Grid>
</Grid>)}
<Grid item md={12}>
<FontAwesomeIcon icon={faTags} />
{data.tags.map(element => element.tag.toString().startsWith("study") ? "" :
<TagChip key={"tag_" + element.tag} label={" " + element.tag + " "} size="small" onClick={() => updateTag(element.tag)} />)}
</Grid>
</Grid>
)}
</Grid>

<Grid item xs={12}>
Expand Down

0 comments on commit a833329

Please sign in to comment.