Skip to content

Commit

Permalink
added advise compare screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gkrumbach07
Gkrumbach07 committed Apr 8, 2022
1 parent cddc7da commit 7810452
Show file tree
Hide file tree
Showing 28 changed files with 999 additions and 758 deletions.
67 changes: 36 additions & 31 deletions src/components/Elements/GenericTable/GenericTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
import { IconButton } from "@mui/material";
import { CircularProgress } from "@mui/material";


function descendingComparator(
a: { [key: string]: any },
b: { [key: string]: any },
Expand All @@ -31,29 +30,28 @@ function descendingComparator(
function getComparator(order: "desc" | "asc", orderBy: string) {
return order === "desc"
? (a: { [key: string]: any }, b: { [key: string]: any }) =>
descendingComparator(a, b, orderBy)
descendingComparator(a, b, orderBy)
: (a: { [key: string]: any }, b: { [key: string]: any }) =>
-descendingComparator(a, b, orderBy);
-descendingComparator(a, b, orderBy);
}

interface IGenericTable {
headers: {
id: string,
label: string
}[]
rows: {[key: string]: unknown}[]
action?: (row: any) => void
id: string;
label: string;
}[];
rows: { [key: string]: unknown }[];
action?: (row: any) => void;
}

interface IEnhancedTableHead {
order: "asc" | "desc";
orderBy: IGenericTable["headers"][number]["id"];
onRequestSort: (property: IGenericTable["headers"][number]["id"]) => void;
rowCount: number;
headers: IGenericTable["headers"]
headers: IGenericTable["headers"];
}


function EnhancedTableHead(props: IEnhancedTableHead) {
const { order, orderBy, onRequestSort, headers } = props;
const createSortHandler = (property: typeof headers[number]["id"]) => {
Expand Down Expand Up @@ -83,14 +81,14 @@ function EnhancedTableHead(props: IEnhancedTableHead) {
);
}


export default function GenericTable({headers, rows, action}: IGenericTable) {
export default function GenericTable({ headers, rows, action }: IGenericTable) {
const [order, setOrder] = React.useState("asc");
const [orderBy, setOrderBy] = React.useState<typeof headers[number]["id"]>(headers[0].id);
const [orderBy, setOrderBy] = React.useState<typeof headers[number]["id"]>(
headers[0].id,
);
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);


const handleRequestSort = (property: typeof headers[number]["id"]) => {
const isAsc = orderBy === property && order === "asc";
setOrder(isAsc ? "desc" : "asc");
Expand Down Expand Up @@ -156,28 +154,35 @@ export default function GenericTable({headers, rows, action}: IGenericTable) {
key={index}
>
{headers.map((header, j) => {
if(j === 0) {
return (
<TableCell
component="th"
id={labelId}
scope="row"
>
{row[header.id] as string}
</TableCell>
)
}
else {
if (j === 0) {
return (
<TableCell
component="th"
id={labelId}
scope="row"
>
{
row[
header.id
] as string
}
</TableCell>
);
} else {
return (
<TableCell align="left">
{row[header.id] as string}
{
row[
header.id
] as string
}
</TableCell>
)
);
}
})}

{action
? <TableCell align="right">
{action ? (
<TableCell align="right">
<IconButton
onClick={() =>
action(row)
Expand All @@ -186,7 +191,7 @@ export default function GenericTable({headers, rows, action}: IGenericTable) {
<ArrowForwardRoundedIcon />
</IconButton>
</TableCell>
: undefined}
) : undefined}
</TableRow>
);
})}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Elements/GenericTable/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from "./GenericTable"
export * from "./GenericTable";
14 changes: 12 additions & 2 deletions src/components/Layout/AdviseLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,11 @@ export const AdviseLayout = ({ children, header }: IProps) => {

const currentTab = useMemo(() => {
const ending = location.pathname.split("/").at(-1);
if (ending === "summary" || ending === "details") {
if (
ending === "summary" ||
ending === "details" ||
ending === "compare"
) {
return ending;
} else {
return "summary";
Expand All @@ -39,11 +43,17 @@ export const AdviseLayout = ({ children, header }: IProps) => {
to="summary"
/>
<Tab
label="Advise Results"
label="Details"
value={"details"}
component={RouterLink}
to="details"
/>
<Tab
label="Compare"
value={"compare"}
component={RouterLink}
to="compare"
/>
</Tabs>
</div>
<div>{children}</div>
Expand Down
23 changes: 0 additions & 23 deletions src/components/Metrics/AdviseMetric/AdviseMetric.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,6 @@ interface IAdviseMetric {
* graph and the Thoth made dependency graph.
*/
export const AdviseMetric = ({ metric }: IAdviseMetric) => {
const total = metric
? metric.added + metric.removed + metric.version + metric.unchanged
: 0;
const justTotal = Object.values(metric?.justification ?? {}).reduce(
(a, b) => a + b,
0,
Expand All @@ -41,27 +38,7 @@ export const AdviseMetric = ({ metric }: IAdviseMetric) => {
<Typography variant="body2" gutterBottom>
{metric?.build}
</Typography>
<Typography variant="h6" gutterBottom mt={2}>
What Thoth Changed
</Typography>
<Divider sx={{ mb: 1 }} />
<ProgressBar
value={metric?.added ?? 0}
total={total}
label={"Added Packages"}
sx={{ mb: 1 }}
/>
<ProgressBar
value={metric?.removed ?? 0}
total={total}
label={"Removed Packages"}
sx={{ mb: 1 }}
/>
<ProgressBar
value={metric?.version ?? 0}
total={total}
label={"Version Changes"}
/>
<Typography variant="h6" mt={3} gutterBottom>
Justification Counts
</Typography>
Expand Down
2 changes: 1 addition & 1 deletion src/config/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const useProd = true;
export const LOCAL_STORAGE_KEY = "THOTH_SEARCH_ADVISE_HISTORY"
export const LOCAL_STORAGE_KEY = "THOTH_SEARCH_ADVISE_HISTORY";
export const THOTH_URL =
!useProd &&
(process.env.REACT_APP_DEPLOYMENT === "STAGE" ||
Expand Down
13 changes: 9 additions & 4 deletions src/features/advise/api/getAdviseDocument.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { THOTH_URL } from "config";
import { useQueries, useQuery } from "react-query";
import { paths } from "lib/schema";
import { UseQueryResult } from "react-query/types/react/types";
import { PackageMetadataRequestResponseSuccess } from "../../../api";

type path = paths["/advise/python/{analysis_id}"]["get"];
export type AdviseDocumentRequestParams = path["parameters"]["path"];
Expand Down Expand Up @@ -40,13 +39,19 @@ export const useAdviseDocument = (
> => {
return useQuery({
...config,
enabled: !!analysis_id && analysis_id.startsWith("adviser"),
queryKey: ["adviseDocument", analysis_id],
queryFn: () => getAdviseDocument(analysis_id),
});
};


export const useAdviseDocuments = (analysis_ids: AdviseDocumentRequestParams["analysis_id"][], config?: { [key: string]: unknown }): UseQueryResult<AxiosResponse<AdviseDocumentRequestResponseSuccess>, AxiosError<requestResponseFailure>>[] => {
export const useAdviseDocuments = (
analysis_ids: AdviseDocumentRequestParams["analysis_id"][],
config?: { [key: string]: unknown },
): UseQueryResult<
AxiosResponse<AdviseDocumentRequestResponseSuccess>,
AxiosError<requestResponseFailure>
>[] => {
return useQueries(
analysis_ids.map(id => {
return {
Expand All @@ -58,5 +63,5 @@ export const useAdviseDocuments = (analysis_ids: AdviseDocumentRequestParams["an
) as UseQueryResult<
AxiosResponse<AdviseDocumentRequestResponseSuccess>,
AxiosError<requestResponseFailure>
>[];
>[];
};
47 changes: 7 additions & 40 deletions src/features/advise/components/AdviseTableView/AdviseTableView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,8 @@ import {
TableContainer,
TablePagination,
TableRow,
Typography,
} from "@mui/material";

import AddRoundedIcon from "@mui/icons-material/AddRounded";
import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded";
import CircleOutlinedIcon from "@mui/icons-material/CircleOutlined";

// utils
import { getComparator, stableSort } from "./utils";

Expand All @@ -23,12 +18,12 @@ import EnhancedTableHead from "./EnhancedTableHead";
import { SelectedPackageContext } from "../../routes/AdviseDetails";
import { Graph } from "lib/interfaces/Graph";
import { Node } from "lib/interfaces/Node";
import { PackageMergedNodeValue } from "lib/interfaces/PackageMergedNodeValue";
import { PackageNodeValue } from "lib/interfaces/PackageNodeValue";

interface IAdviseTableView {
/** the text value used to filter the cells in the table */
search: string;
filteredGraph: Graph<Node<PackageMergedNodeValue>>;
graph: Graph<Node<PackageNodeValue>>;
}

type Row = {
Expand All @@ -38,18 +33,14 @@ type Row = {
depth: number;
license: string;
dependencies: number;
change: string;
summary: string;
};

/**
* The table cells and total structure specific to
* python packages.
*/
export function AdviseTableView({
search = "",
filteredGraph,
}: IAdviseTableView) {
export function AdviseTableView({ search = "", graph }: IAdviseTableView) {
const [order, setOrder] = useState<"asc" | "desc">("asc");
const [orderBy, setOrderBy] = React.useState<string>("name");
const [page, setPage] = React.useState<number>(0);
Expand All @@ -62,14 +53,14 @@ export function AdviseTableView({

// format data
useEffect(() => {
if (!filteredGraph) {
if (!graph) {
return;
}

setPage(0);

const newRows: Row[] = [];
filteredGraph.nodes.forEach(node => {
graph.nodes.forEach(node => {
if (node.value.depth === -1) {
return;
}
Expand All @@ -80,12 +71,11 @@ export function AdviseTableView({
depth: node.value?.depth ?? -1,
license: node?.value?.metadata?.License ?? "",
dependencies: node.adjacents.size,
change: node.value?.change,
summary: node?.value?.metadata?.Summary ?? "",
});
});
setRows(newRows);
}, [filteredGraph]);
}, [graph]);

const handleRequestSort = (property: string) => {
const isAsc = orderBy === property && order === "asc";
Expand Down Expand Up @@ -132,12 +122,6 @@ export function AdviseTableView({
.map((row: Row, index: number) => {
const labelId = `enhanced-table-checkbox-${index}`;

const iconColor =
row.change === "removed"
? "error"
: row.change === "added"
? "success"
: undefined;
return (
<React.Fragment key={row.name}>
<TableRow
Expand All @@ -151,24 +135,7 @@ export function AdviseTableView({
id={labelId}
scope="row"
>
<Box display="flex">
{row.change ===
"removed" ? (
<RemoveRoundedIcon
color={iconColor}
/>
) : row.change ===
"added" ? (
<AddRoundedIcon
color={iconColor}
/>
) : (
<CircleOutlinedIcon />
)}
<Typography ml={2}>
{row.name}
</Typography>
</Box>
{row.name}
</TableCell>
<TableCell align="right">
{row.depth}
Expand Down
Loading

0 comments on commit 7810452

Please sign in to comment.