Skip to content

Commit

Permalink
Merge pull request #579 from AFP-Medialab/565-migrate-to-mui-v6
Browse files Browse the repository at this point in the history 
565-migrate-to-mui-v6
  • Loading branch information
@Sallaa
Sallaa authored Sep 6, 2024
2 parents 0c73769 + 725f31b commit 24d860c
Show file tree
Hide file tree
Showing 62 changed files with 4,347 additions and 2,960 deletions.
4,406 changes: 2,897 additions & 1,509 deletions package-lock.json
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@
"@emotion/css": "^11.11.2",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.12",
"@mui/lab": "^5.0.0-alpha.147",
"@mui/material": "^5.14.12",
"@mui/x-data-grid": "^7.9.0",
"@mui/x-date-pickers": "^6.16.1",
"@mui/icons-material": "^6.0.2",
"@mui/lab": "^6.0.0-beta.9",
"@mui/material": "^6.0.2",
"@mui/x-data-grid": "^7.15.0",
"@mui/x-date-pickers": "^7.15.0",
"@reduxjs/toolkit": "^1.9.7",
"@types/chrome": "^0.0.266",
"@wavesurfer/react": "^1.0.4",
Expand Down
5 changes: 2 additions & 3 deletions src/components/MainContent/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,8 @@ const MainContent = ({ tools }) => {
tool.rolesNeeded.includes(TOOL_STATUS_ICON.LOCK)
)
return true;
else if (tool.rolesNeeded.some((restriction) => role.includes(restriction)))
return true;
else return false;
else
return tool.rolesNeeded.some((restriction) => role.includes(restriction));
});

const themeFab = createTheme({
Expand Down
29 changes: 14 additions & 15 deletions src/components/NavItems/About/About.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { Paper } from "@mui/material";
import { Grid2, Paper } from "@mui/material";
import Box from "@mui/material/Box";
import CustomTile from "../../Shared/CustomTitle/CustomTitle";
import europeImage from "./images/logo_EUh2020_horizontal.png";
Expand All @@ -9,7 +9,6 @@ import afpImage from "./images/Logo-AFP-384.png";
import afcnLogo from "./images/afcn_logo.png";
import arijLogo from "./images/arij_logo.png";
import Checkbox from "@mui/material/Checkbox";
import Grid from "@mui/material/Grid";
import FormControlLabel from "@mui/material/FormControlLabel";
import {
toggleHumanRightsCheckBox,
Expand All @@ -20,8 +19,8 @@ import useMyStyles from "../../Shared/MaterialUiStyles/useMyStyles";
import Link from "@mui/material/Link";
import Typography from "@mui/material/Typography";
import {
toggleState,
toggleAnalyticsCheckBox,
toggleState,
} from "../../../redux/reducers/cookiesReducers";

const About = () => {
Expand Down Expand Up @@ -151,46 +150,46 @@ const About = () => {
);
})*/}
</Box>
<Grid
<Grid2
container
direction="row"
spacing={2}
justifyContent="center"
alignItems="center"
mb={4}
>
<Grid item xs={12}>
<Grid2 size={{ xs: 12 }}>
<img className={classes.AboutMedia} src={afpImage} alt={afpImage} />
</Grid>
<Grid item>
</Grid2>
<Grid2>
<img className={classes.AboutMedia} src={itiImage} alt={itiImage} />
</Grid>
<Grid item>
</Grid2>
<Grid2>
<img
className={classes.AboutMedia}
src={europeImage}
alt={europeImage}
/>
</Grid>
</Grid2>
{currentLang === "ar" ? (
<>
<Grid item xs={6}>
<Grid2 size={{ xs: 6 }}>
<img
className={classes.AboutMediaSmall}
src={afcnLogo}
alt={afcnLogo}
/>
</Grid>
<Grid item xs={6}>
</Grid2>
<Grid2 size={{ xs: 6 }}>
<img
className={classes.AboutMediaSmall}
src={arijLogo}
alt={arijLogo}
/>
</Grid>
</Grid2>
</>
) : null}
</Grid>
</Grid2>
<FormControlLabel
control={
<Checkbox
Expand Down
79 changes: 39 additions & 40 deletions src/components/NavItems/Assistant/Assistant.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, { useEffect, useState } from "react";

import { useDispatch, useSelector } from "react-redux";
import { useParams, useNavigate } from "react-router-dom";
import { useNavigate, useParams } from "react-router-dom";

import Divider from "@mui/material/Divider";
import Grid from "@mui/material/Grid";
import { Grid2 } from "@mui/material";
import Typography from "@mui/material/Typography";
import Card from "@mui/material/Card";
import useMyStyles from "../../Shared/MaterialUiStyles/useMyStyles";
Expand Down Expand Up @@ -119,7 +119,7 @@ const Assistant = () => {

return (
<div>
<Grid
<Grid2
container
spacing={4}
direction="column"
Expand All @@ -128,44 +128,43 @@ const Assistant = () => {
className={classes.root}
>
{/* introduction */}
<Grid item xs width={"inherit"}>
<Grid2 size="grow" width="100%">
<AssistantIntroduction cleanAssistant={cleanAssistant} />
</Grid>
</Grid2>

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

{/* local file selection field */}
{imageVideoSelected ? (
<Grid item xs width={"inherit"}>
<Grid2 size="grow" width="100%">
<AssistantFileSelected />
</Grid>
</Grid2>
) : null}

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

{positiveSourceCred || cautionSourceCred || mixedSourceCred ? (
<Grid item xs>
<Grid2 size="grow">
<AssistantSCResults />
</Grid>
</Grid2>
) : null}

{scFailState ||
Expand All @@ -174,13 +173,13 @@ const Assistant = () => {
neFailState ||
newsFramingFailState ||
newsGenreFailState ? (
<Grid item xs>
<Grid2 size="grow">
<AssistantCheckStatus />
</Grid>
</Grid2>
) : null}

{/* media results */}
<Grid item xs width={"inherit"}>
<Grid2 size="grow" width="100%">
<Card
className={classes.root}
hidden={
Expand All @@ -193,66 +192,66 @@ const Assistant = () => {
}
data-testid="url-media-results"
>
<Grid container spacing={2}>
<Grid item xs={12}>
<Grid2 container spacing={2}>
<Grid2 size={{ xs: 12 }}>
<Typography variant={"h5"} align={"left"}>
{keyword("url_media")}
</Typography>
<Divider />
</Grid>
</Grid2>

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

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

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

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

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

{text ? (
<Grid item xs={12}>
<Grid2 size={{ xs: 12 }}>
<AssistantCredSignals />
</Grid>
</Grid2>
) : null}
</Grid>
</Grid2>
</Card>
</Grid>
</Grid>
</Grid2>
</Grid2>
</div>
);
};
Expand Down
28 changes: 16 additions & 12 deletions src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,11 @@ import { useSelector } from "react-redux";

import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import { CardHeader } from "@mui/material";
import { CardHeader, Grid2 } from "@mui/material";
import CardContent from "@mui/material/CardContent";
import Collapse from "@mui/material/Collapse";
import Divider from "@mui/material/Divider";
import { ExpandLess, ExpandMore } from "@mui/icons-material";
import Grid from "@mui/material/Grid";
import LinearProgress from "@mui/material/LinearProgress";
import Typography from "@mui/material/Typography";
import Link from "@mui/material/Link";
Expand Down Expand Up @@ -84,6 +83,7 @@ const AssistantNEResult = () => {
onWordMouseOut: getCallback("onWordMouseOut"),
onWordMouseOver: getCallback("onWordMouseOver"),
};

function getWordColor(tag) {
switch (tag.category) {
case "Person":
Expand All @@ -100,6 +100,7 @@ const AssistantNEResult = () => {
return "black";
}
}

const styles = {
margin: "0px 3px",
verticalAlign: "middle",
Expand Down Expand Up @@ -129,16 +130,19 @@ const AssistantNEResult = () => {
};

return (
<Grid item xs={12}>
<Grid2 size={{ xs: 12 }}>
<Card>
<CardHeader
className={classes.assistantCardHeader}
title={keyword("named_entity_title")}
/>
{neLoading && <LinearProgress />}
<CardContent>
<Grid container>
<Grid item xs={4} style={{ maxHeight: 300, overflowY: "auto" }}>
<Grid2 container>
<Grid2
size={{ xs: 4 }}
style={{ maxHeight: 300, overflowY: "auto" }}
>
<List>
{neResult.map((value, index) => (
<Box key={index}>
Expand Down Expand Up @@ -185,23 +189,23 @@ const AssistantNEResult = () => {
</Box>
))}
</List>
</Grid>
<Grid item xs={1} align={"center"}>
</Grid2>
<Grid2 size={{ xs: 1 }} align={"center"}>
<Divider orientation="vertical" />
</Grid>
<Grid item xs={7} align={"center"}>
</Grid2>
<Grid2 size={{ xs: 7 }} align={"center"}>
{/*<ReactWordcloud words={neResultCount} callbacks={callbacks} options={options}/>*/}
<TagCloud
tags={neResultCount}
minSize={20}
maxSize={45}
renderer={customRenderer}
/>
</Grid>
</Grid>
</Grid2>
</Grid2>
</CardContent>
</Card>
</Grid>
</Grid2>
);
};

Expand Down
Loading

0 comments on commit 24d860c

Please sign in to comment.