Skip to content

Commit

Permalink
Merge pull request #601 from AFP-Medialab/assistant/update-ui-results
Browse files Browse the repository at this point in the history 
Assistant UI updates
  • Loading branch information
@Sallaa
Sallaa authored Oct 1, 2024
2 parents a372c8c + afc916f commit d215d0a
Show file tree
Hide file tree
Showing 10 changed files with 574 additions and 575 deletions.
228 changes: 108 additions & 120 deletions src/components/NavItems/Assistant/Assistant.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,7 @@ import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";

import Divider from "@mui/material/Divider";
import { Grid2 } from "@mui/material";
import Typography from "@mui/material/Typography";
import Card from "@mui/material/Card";
import useMyStyles from "../../Shared/MaterialUiStyles/useMyStyles";

import AssistantCheckStatus from "./AssistantCheckResults/AssistantCheckStatus";
Expand Down Expand Up @@ -86,6 +83,18 @@ const Assistant = () => {
const newsGenreFailState = useSelector(
(state) => state.assistant.newsGenreFail,
);
const persuasionFailState = useSelector(
(state) => state.assistant.persuasionFail,
);
const previousFactChecksFailState = useSelector(
(state) => state.assistant.previousFactChecksFail,
);
const subjectivityFailState = useSelector(
(state) => state.assistant.subjectivityFail,
);
const machineGeneratedTextFailState = useSelector(
(state) => state.assistant.machineGeneratedTextFail,
);
// const mtFailState = useSelector(state => state.assistant.mtFail)

//local state
Expand Down Expand Up @@ -118,141 +127,120 @@ const Assistant = () => {
}, [url]);

return (
<div>
<Grid2
container
spacing={4}
direction="column"
justifyContent="flex-start"
alignItems="center"
className={classes.root}
>
{/* introduction */}
<Grid2
container
spacing={4}
direction="column"
justifyContent="flex-start"
alignItems="center"
className={classes.root}
>
{/* introduction */}
<Grid2 size="grow" width="100%">
<AssistantIntroduction cleanAssistant={cleanAssistant} />
</Grid2>

{/* url entry field */}
{urlMode ? (
<Grid2 size="grow" width="100%">
<AssistantIntroduction cleanAssistant={cleanAssistant} />
<AssistantUrlSelected
formInput={formInput}
setFormInput={setFormInput}
cleanAssistant={cleanAssistant}
/>
</Grid2>
) : null}

{/* url entry field */}
{urlMode ? (
<Grid2 size="grow" width="100%">
<AssistantUrlSelected
formInput={formInput}
setFormInput={setFormInput}
cleanAssistant={cleanAssistant}
/>
{/* local file selection field */}
{imageVideoSelected ? (
<Grid2 size="grow" width="100%">
<AssistantFileSelected />
</Grid2>
) : null}

{/* warnings and api status checks */}
{dbkfTextMatch || dbkfImageResult || dbkfVideoMatch ? (
<Grid2
size="grow"
className={classes.assistantGrid}
hidden={urlMode === null || urlMode === false}
>
<AssistantWarnings />
</Grid2>
) : null}

{/* source crediblity//URL domain analysis results */}
{positiveSourceCred || cautionSourceCred || mixedSourceCred ? (
<Grid2 size="grow">
<AssistantSCResults />
</Grid2>
) : null}

{/* assistant status */}
{scFailState ||
dbkfTextFailState ||
dbkfMediaFailState ||
neFailState ||
newsFramingFailState ||
newsGenreFailState ||
persuasionFailState ||
subjectivityFailState ||
previousFactChecksFailState ||
machineGeneratedTextFailState ? (
<Grid2 size="grow">
<AssistantCheckStatus />
</Grid2>
) : null}

{/* media results */}
<Grid2
container
hidden={
!urlMode ||
(urlMode && inputUrl === null) ||
(urlMode &&
inputUrl !== null &&
!imageList.length &&
!videoList.length)
}
>
{imageList.length > 0 || videoList.length > 0 || imageVideoSelected ? (
<Grid2 size={{ xs: 12 }}>
<AssistantMediaResult />
</Grid2>
) : null}
</Grid2>

{/* local file selection field */}
{imageVideoSelected ? (
<Grid2 size="grow" width="100%">
<AssistantFileSelected />
{/* text results */}
<Grid2
container
hidden={linkList.length === 0 && text === null && neResult === null}
>
{text ? (
<Grid2 size={{ xs: 12 }}>
<AssistantTextResult />
</Grid2>
) : null}

{/* warnings and api status checks */}
{dbkfTextMatch || dbkfImageResult || dbkfVideoMatch ? (
<Grid2
size="grow"
className={classes.assistantGrid}
hidden={urlMode === null || urlMode === false}
>
<AssistantWarnings />
{neResult ? (
<Grid2 size={{ xs: 12 }}>
<AssistantNEResult />
</Grid2>
) : null}

{positiveSourceCred || cautionSourceCred || mixedSourceCred ? (
<Grid2 size="grow">
<AssistantSCResults />
{linkList.length !== 0 ? (
<Grid2 size={{ xs: 12 }}>
<AssistantLinkResult />
</Grid2>
) : null}

{scFailState ||
dbkfTextFailState ||
dbkfMediaFailState ||
neFailState ||
newsFramingFailState ||
newsGenreFailState ? (
<Grid2 size="grow">
<AssistantCheckStatus />
{text ? (
<Grid2 size={{ xs: 12 }}>
<AssistantCredSignals />
</Grid2>
) : null}

{/* media results */}
<Grid2 size="grow" width="100%">
<Card
className={classes.root}
hidden={
!urlMode ||
(urlMode && inputUrl === null) ||
(urlMode &&
inputUrl !== null &&
!imageList.length &&
!videoList.length)
}
data-testid="url-media-results"
>
<Grid2 container spacing={2}>
<Grid2 size={{ xs: 12 }}>
<Typography variant={"h5"} align={"left"}>
{keyword("url_media")}
</Typography>
<Divider />
</Grid2>

{imageList.length > 0 ||
videoList.length > 0 ||
imageVideoSelected ? (
<Grid2 size={{ xs: 12 }}>
<AssistantMediaResult />
</Grid2>
) : null}
</Grid2>
</Card>
</Grid2>

{/* text results */}
<Grid2 size="grow" width="100%">
<Card
className={classes.root}
hidden={linkList.length === 0 && text === null && neResult === null}
>
<Grid2 container spacing={2}>
<Grid2 size={{ xs: 12 }}>
<Typography variant={"h5"} align={"left"}>
{keyword("url_text")}
</Typography>
<Divider />
</Grid2>

{text ? (
<Grid2 size={{ xs: 12 }}>
<AssistantTextResult />
</Grid2>
) : null}

{neResult ? (
<Grid2 size={{ xs: 12 }}>
<AssistantNEResult />
</Grid2>
) : null}

{linkList.length !== 0 ? (
<Grid2 size={{ xs: 12 }}>
<AssistantLinkResult />
</Grid2>
) : null}

{text ? (
<Grid2 size={{ xs: 12 }}>
<AssistantCredSignals />
</Grid2>
) : null}
</Grid2>
</Card>
</Grid2>
</Grid2>
</div>
</Grid2>
);
};
export default Assistant;
33 changes: 24 additions & 9 deletions src/components/NavItems/Assistant/AssistantCheckResults/AssistantCheckStatus.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { useDispatch, useSelector } from "react-redux";

import Box from "@mui/material/Box";
import Collapse from "@mui/material/Collapse";
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { IconButton } from "@mui/material";
import Typography from "@mui/material/Typography";
Expand All @@ -12,6 +11,7 @@ import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import { Alert } from "@mui/material";
import useMyStyles from "../../../Shared/MaterialUiStyles/useMyStyles";

const AssistantCheckStatus = () => {
Expand All @@ -34,21 +34,36 @@ const AssistantCheckStatus = () => {
const neTitle = keyword("ne_title");
const neFailState = useSelector((state) => state.assistant.neFail);

const newsFramingTitle = "news topic";
const newsFramingTitle = keyword("news_framing_title");
const newsFramingFailState = useSelector(
(state) => state.assistant.newsFramingFail,
);

const newsGenreTitle = "news genre";
const newsGenreTitle = keyword("news_genre_title");
const newsGenreFailState = useSelector(
(state) => state.assistant.newsGenreFail,
);

const persuasionTitle = "persuasion";
const persuasionTitle = keyword("persuasion_techniques");
const persuasionFailState = useSelector(
(state) => state.assistant.persuasionFail,
);

const subjectivityTitle = keyword("subjectivity");
const subjectivityFailState = useSelector(
(state) => state.assistant.subjectivityFail,
);

const prevFactChecksTitle = keyword("previous_fact_checks");
const prevFactChecksFailState = useSelector(
(state) => state.assistant.prevFactChecksFail,
);

const machineGeneratedTextTitle = keyword("machine_generated_text");
const machineGeneratedTextFailState = useSelector(
(state) => state.assistant.machineGeneratedTextFail,
);

const failStates = [
{ title: scTitle, failed: scFailState },
{ title: dbkfMediaTitle, failed: dbkfMediaFailState },
Expand All @@ -57,10 +72,13 @@ const AssistantCheckStatus = () => {
{ title: newsFramingTitle, failed: newsFramingFailState },
{ title: newsGenreTitle, failed: newsGenreFailState },
{ title: persuasionTitle, failed: persuasionFailState },
{ title: subjectivityTitle, failed: subjectivityFailState },
{ title: prevFactChecksTitle, failed: prevFactChecksFailState },
{ title: machineGeneratedTextTitle, failed: machineGeneratedTextFailState },
];

return (
<Box pl={1}>
<Alert severity="warning">
<Typography component={"span"}>
<Box color={"orange"} fontStyle="italic">
{keyword("status_subtitle")}
Expand All @@ -78,16 +96,13 @@ const AssistantCheckStatus = () => {
{failStates.map((value, key) =>
value.failed ? (
<ListItem key={key}>
<IconButton>
<ErrorOutlineIcon color={"error"} />
</IconButton>
<ListItemText primary={value.title} />
</ListItem>
) : null,
)}
</List>
</Collapse>
</Box>
</Alert>
);
};
export default AssistantCheckStatus;
29 changes: 14 additions & 15 deletions src/components/NavItems/Assistant/AssistantFileSelected.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,21 +104,20 @@ const AssistantFileSelected = () => {
/>
<CardContent>
<Grid2 container spacing={3}>
{generateList(
keyword("upload_image"),
CONTENT_TYPE.IMAGE,
imageActions,
)}
<Divider
orientation="vertical"
flexItem
style={{ marginRight: "-1px", marginTop: "20px" }}
/>
{generateList(
keyword("upload_video"),
CONTENT_TYPE.VIDEO,
videoActions,
)}
<Grid2 size={{ xs: 6 }}>
{generateList(
keyword("upload_image"),
CONTENT_TYPE.IMAGE,
imageActions,
)}
</Grid2>
<Grid2 size={{ xs: 6 }}>
{generateList(
keyword("upload_video"),
CONTENT_TYPE.VIDEO,
videoActions,
)}
</Grid2>
</Grid2>
</CardContent>
</Card>
Expand Down
Loading

0 comments on commit d215d0a

Please sign in to comment.