Skip to content

Commit

Permalink
add alerts to new analysis page
Browse files Browse the repository at this point in the history
  • Loading branch information
@vincerubinetti
vincerubinetti committed Dec 5, 2024
1 parent 50e697c commit d2cf02e
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 64 deletions.
5 changes: 3 additions & 2 deletions frontend/src/components/Alert.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import type { ComponentProps } from "react";
import clsx from "clsx";
import Mark from "@/components/Mark";
import classes from "./Alert.module.css";

/** static box of certain type with icon and text contents */
const Alert = (props: ComponentProps<typeof Mark>) => {
return <Mark className={classes.alert} {...props}></Mark>;
const Alert = ({ className, ...props }: ComponentProps<typeof Mark>) => {
return <Mark className={clsx(classes.alert, className)} {...props}></Mark>;
};

export default Alert;
3 changes: 2 additions & 1 deletion frontend/src/components/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,12 @@ type Description =
/** require text and/or tooltip for accessibility */
{ text: string; tooltip?: ReactNode } | { text?: string; tooltip: ReactNode };

type _Link = Pick<ComponentProps<typeof Link>, "to">;
type _Link = Pick<ComponentProps<typeof Link>, "to" | "style">;

type _Button = Pick<
ComponentProps<"button">,
| "type"
| "style"
| "onClick"
| "onDrag"
| "onDragEnter"
Expand Down
151 changes: 90 additions & 61 deletions frontend/src/pages/NewAnalysis.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,9 @@ const genesetContextOptions: SelectOption<GenesetContext>[] = [
},
];

const geneMin = 5;
const geneMinMessage = `GenePlexus needs at least ${geneMin} genes to work properly`;

const NewAnalysisPage = () => {
/** raw text list of input gene ids */
const [genes, setGenes] = useLocalStorage("input-genes", "");
Expand Down Expand Up @@ -226,7 +229,12 @@ const NewAnalysisPage = () => {
const submitAnalysis = () => {
/** check for sufficient inputs */
if (!splitGenes.length) {
window.alert("Please enter some genes first!");
window.alert("Please enter some genes");
scrollTo("#enter-genes");
return;
}
if (splitGenes.length < geneMin) {
window.alert(geneMinMessage);
scrollTo("#enter-genes");
return;
}
Expand Down Expand Up @@ -394,14 +402,15 @@ const NewAnalysisPage = () => {
</div>

<Flex>
<span>{formatNumber(splitGenes.length)} genes</span>

<Button
text="Example"
icon={<FaLightbulb />}
design="hollow"
onClick={() => setGenes(example[speciesTrain])}
tooltip="Try some example genes for this species"
/>

<Flex>
<UploadButton
text="Upload"
Expand All @@ -424,6 +433,10 @@ const NewAnalysisPage = () => {
{filename}
</Flex>
</Flex>

{splitGenes.length > 0 && splitGenes.length < geneMin && (
<Alert type="error">{geneMinMessage}</Alert>
)}
</Section>

<Section>
Expand Down Expand Up @@ -513,68 +526,74 @@ const NewAnalysisPage = () => {
)}

{checkGenesData && (
<Tabs>
<Tab text="Summary" icon={<FaEye />}>
<div className={classes.summary}>
<Mark type="success">
<strong className={classes.success}>
{formatNumber(checkGenesData.success)} genes
</strong>{" "}
converted to Entrez
</Mark>

{!!checkGenesData.error && (
<Mark type="error">
<strong className={classes.error}>
{formatNumber(checkGenesData.error)} genes
<>
<Tabs>
<Tab text="Summary" icon={<FaEye />}>
<div className={classes.summary}>
<Mark type="success">
<strong className={classes.success}>
{formatNumber(checkGenesData.success)} genes
</strong>{" "}
couldn't be converted
converted to Entrez
</Mark>
)}

<span className={classes.divider} />

{checkGenesData.summary.map((row, index) => (
<Mark key={index} icon={<FaDna />}>
<strong>{formatNumber(row.positiveGenes)} genes</strong> in{" "}
{row.network} ({formatNumber(row.totalGenes, true)})
</Mark>
))}
</div>
</Tab>

<Tab text="Detailed" icon={<FaTable />}>
<Table
cols={[
{
key: "input",
name: "Input ID",
},
...(splitNegatives.length
? ([
{
key: "inputType",
name: "Type",
filterType: "enum",
},
] as const)
: []),
{
key: "entrez",
name: "Entrez ID",
render: RenderID,
},
{
key: "inNetwork",
name: "In Network",
render: YesNo,
filterType: "boolean",
},
]}
rows={checkGenesData.table}
/>
</Tab>
</Tabs>
{!!checkGenesData.error && (
<Mark type="error">
<strong className={classes.error}>
{formatNumber(checkGenesData.error)} genes
</strong>{" "}
couldn't be converted
</Mark>
)}

<span className={classes.divider} />

{checkGenesData.summary.map((row, index) => (
<Mark key={index} icon={<FaDna />}>
<strong>{formatNumber(row.positiveGenes)} genes</strong>{" "}
in {row.network} ({formatNumber(row.totalGenes, true)})
</Mark>
))}
</div>
</Tab>

<Tab text="Detailed" icon={<FaTable />}>
<Table
cols={[
{
key: "input",
name: "Input ID",
},
...(splitNegatives.length
? ([
{
key: "inputType",
name: "Type",
filterType: "enum",
},
] as const)
: []),
{
key: "entrez",
name: "Entrez ID",
render: RenderID,
},
{
key: "inNetwork",
name: "In Network",
render: YesNo,
filterType: "boolean",
},
]}
rows={checkGenesData.table}
/>
</Tab>
</Tabs>

{checkGenesData.success < geneMin && (
<Alert type="error">{geneMinMessage}</Alert>
)}
</>
)}
</Section>

Expand All @@ -583,6 +602,15 @@ const NewAnalysisPage = () => {
Submit Analysis
</Heading>

{!checkGenesData &&
splitGenes.length >= geneMin &&
splitGenes.length < geneMin * 2 && (
<Alert type="warning" className="narrow">
You haven't entered many genes and haven't pre-checked them. If
less than {geneMin} end up being valid, the analysis will fail.
</Alert>
)}

<TextBox
className="narrow"
label="Name"
Expand All @@ -595,6 +623,7 @@ const NewAnalysisPage = () => {
<Button
text="Submit"
icon={<FaPaperPlane />}
style={{ opacity: splitGenes.length < geneMin ? 0.5 : 1 }}
onClick={submitAnalysis}
/>
</Section>
Expand Down

0 comments on commit d2cf02e

Please sign in to comment.