Changes from PyGenePlexus (#45)

The items in here that changed are from commits 5722d9b, d07ce39 and
62cfc9a in the PyGenePlexus repo. Things that specifically changed that
might need a UI tweak here
- In both the probability and similarity tables there are columns from
z-scores and p-values
- The edge lists are now weighted again
- using Mondo instead of DisGeNet for disease-gene annotations
- In similarity table there is now a column called "Task" that describes
the type of GSC it is from
- changed how the auPRC values are returned, especially when they can't
be calculated
- Added a column "Gene Name" to the tables the show how the input IDs
are converted
- If training and showing results for different species, the probability
data frame now can have known-novel and Class-Label columns and this
information is based on one-to-one ortholog info. Can be used in network
figure.

Other UI ask that could be good in this PR is possibly showing only
StTRING as an option and then having a button a user clicks labeled
"More Options" that would show the BioGRID and IMP networks. Similarity
the GSC could be default to Combined and the user needs to click a
button to see the individual GSCs. This is #44

I also added a script to gather and zip the data for the function. I
uploaded the new data to the GCP bucket.

---------

Co-authored-by: Vincent Rubinetti <vince.rubinetti@gmail.com>

.gitignore

@@ -12,3 +12,5 @@ __pycache__/
 /.keys/*
 
 data
+functions/convert_ids/convert-ids_data.tar.gz
+functions/ml/ml_data.tar.gz

frontend/src/api/types.ts

@@ -16,23 +16,24 @@ export type Species =
 export type Network = "BioGRID" | "STRING" | "IMP";
 
 /** geneset context options */
-export type GenesetContext = "GO" | "Monarch" | "DisGeNet" | "Combined";
+export type GenesetContext = "GO" | "Monarch" | "Mondo" | "Combined";
 
 /** convert-ids endpoint response format */
 export type _ConvertIds = {
  input_count: number;
  convert_ids: string[];
  table_summary: {
- Network: string;
+ Network: Network;
  NetworkGenes: number;
  PositiveGenes: number;
  }[];
  df_convert_out: {
+ "Original ID": string;
  "Entrez ID": string;
+ "Gene Name": string;
  "In BioGRID?": string;
  "In IMP?": string;
  "In STRING?": string;
- "Original ID": string;
  }[];
 };
 
@@ -55,9 +56,9 @@ export const convertConvertIds = (backend: _ConvertIds) => {
  table: backend.df_convert_out.map((row) => ({
  input: row["Original ID"],
  entrez: row["Entrez ID"],
- biogrid: row["In BioGRID?"] === "Y",
- imp: row["In IMP?"] === "Y",
- string: row["In STRING?"] === "Y",
+ name: row["Gene Name"],
+ inNetwork:
+  (row["In BioGRID?"] ?? row["In IMP?"] ?? row["In STRING?"]) === "Y",
  })),
  };
 };
@@ -100,32 +101,38 @@ export const revertAnalysisInputs = (
 /** convert-ids endpoint response format */
 export type _AnalysisResults = {
  df_convert_out_subset: {
+ "Original ID": string;
  "Entrez ID": string;
+ "Gene Name": string;
  "In BioGRID?"?: string;
  "In IMP?"?: string;
  "In STRING?"?: string;
- "Original ID": string;
  }[];
- avgps: number[];
+ avgps: (number | null | undefined)[];
  positive_genes: number;
  isolated_genes: string[];
  isolated_genes_sym: string[];
- df_edge: { Node1: string; Node2: string }[];
- df_edge_sym: { Node1: string; Node2: string }[];
+ df_edge: { Node1: string; Node2: string; Weight: number }[];
+ df_edge_sym: { Node1: string; Node2: string; Weight: number }[];
  df_probs: {
  Rank: number;
  Entrez: string;
  Symbol: string;
  Name: string;
- Probability: number;
  "Known/Novel": "Known" | "Novel";
  "Class-Label": "P" | "N" | "U";
+ Probability: number;
+ "Z-score": number;
+ "P-adjusted": number;
  }[];
  df_sim: {
  Rank: number;
+ Task: string;
  ID: string;
  Name: string;
  Similarity: number;
+ "Z-score": number;
+ "P-adjusted": number;
  }[];
 };
 
@@ -136,39 +143,48 @@ export const convertAnalysisResults = (backend: _AnalysisResults) => ({
  entrez: row["Entrez ID"].match(/Could Not be mapped to Entrez/i)
  ? ""
  : row["Entrez ID"],
+ name: row["Gene Name"],
  inNetwork:
  (row["In BioGRID?"] ?? row["In IMP?"] ?? row["In STRING?"]) === "Y",
  })),
  crossValidation: backend.avgps,
  positiveGenes: backend.positive_genes,
  predictions: backend.df_probs.map((row) => ({
- rank: row.Rank,
  entrez: row.Entrez,
  symbol: row.Symbol,
  name: row.Name,
- probability: row.Probability,
  knownNovel: row["Known/Novel"],
  classLabel: expandClass(row["Class-Label"]),
+ probability: row.Probability,
+ zScore: row["Z-score"],
+ pAdjusted: row["P-adjusted"],
+ rank: row.Rank,
  })),
  similarities: backend.df_sim.map((row) => ({
- rank: row.Rank,
+ task: row.Task,
  id: row.ID,
  name: row.Name,
  similarity: row.Similarity,
+ zScore: row["Z-score"],
+ pAdjusted: row["P-adjusted"],
+ rank: row.Rank,
  })),
  network: {
  nodes: backend.df_probs.map((row) => ({
- rank: row.Rank,
- probability: row.Probability,
  entrez: row.Entrez,
  symbol: row.Symbol,
  name: row.Name,
  knownNovel: row["Known/Novel"],
  classLabel: expandClass(row["Class-Label"]),
+ probability: row.Probability,
+ zScore: row["Z-score"],
+ pAdjusted: row["P-adjusted"],
+ rank: row.Rank,
  })),
- links: backend.df_edge.map((row) => ({
+ edges: backend.df_edge.map((row) => ({
  source: row.Node1,
  target: row.Node2,
+ weight: row.Weight,
  })),
  },
 });

frontend/src/components/Heading.module.css

@@ -19,7 +19,7 @@ h4.heading {
 }
 
 .icon {
- color: var(--deep-mid);
+ color: var(--deep);
 }
 
 .anchor {

frontend/src/components/Radios.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement, ReactNode } from "react";
 import { cloneElement, useEffect, useId, useState } from "react";
-import { FaRegCircle, FaRegCircleDot } from "react-icons/fa6";
+import { FaCircleDot, FaRegCircle } from "react-icons/fa6";
 import clsx from "clsx";
 import { usePrevious } from "@reactuses/core";
 import Flex from "@/components/Flex";
@@ -110,16 +110,21 @@ const Radios = <O extends Option>({
 
  {/* check mark */}
  {selectedWFallback === option.id ? (
- <FaRegCircleDot
- className={clsx(classes.check, classes.selected)}
- />
+ <FaCircleDot className={clsx(classes.check, classes.checked)} />
  ) : (
  <FaRegCircle className={classes.check} />
  )}
 
  {/* text content */}
  <Flex direction="column" hAlign="left" gap="sm">
- <span className="primary">{option.primary}</span>
+ <span
+ className={clsx(
+ "primary",
+ selectedWFallback === option.id && classes.checked,
+ )}
+ >
+ {option.primary}
+ </span>
  {option.secondary && (
  <span className="secondary">{option.secondary}</span>
  )}

frontend/src/components/Table.tsx

@@ -41,7 +41,7 @@ import Slider from "@/components/Slider";
 import TextBox from "@/components/TextBox";
 import Tooltip from "@/components/Tooltip";
 import { downloadCsv } from "@/util/download";
-import { formatNumber } from "@/util/string";
+import { formatDate, formatNumber } from "@/util/string";
 import classes from "./Table.module.css";
 
 type Col<
@@ -69,7 +69,10 @@ type Col<
  show?: boolean;
  /** tooltip to show in header cell */
  tooltip?: ReactNode;
- /** custom render function for cell */
+ /**
+ * custom render function for cell. return undefined or null to fallback to
+ * default formatting.
+ */
  render?: (cell: NoInfer<Datum[Key]>) => ReactNode;
 };
 
@@ -212,8 +215,13 @@ const Table = <Datum extends object>({ cols, rows }: Props<Datum>) => {
  /** func to use for filtering individual column */
  filterFn: filterFunc,
  /** render func for cell */
- cell: (cell) =>
- col.render ? col.render(cell.getValue()) : cell.getValue(),
+ cell: (cell) => {
+ const raw = cell.getValue();
+ const rendered = col.render?.(raw);
+ return rendered === undefined || rendered === null
+ ? defaultFormat(raw)
+ : rendered;
+ },
  }),
  );
 
@@ -633,3 +641,17 @@ const Filter = <Datum extends object>({ column, def }: FilterProps<Datum>) => {
  />
  );
 };
+
+/** default cell formatter based on detected type */
+const defaultFormat = (cell: unknown) => {
+ if (typeof cell === "number") return formatNumber(cell);
+ if (typeof cell === "boolean") return cell ? "True" : "False";
+ /** if falsey (except 0 and false) */
+ if (!cell) return "-";
+ if (Array.isArray(cell)) return cell.length.toLocaleString();
+ if (cell instanceof Date) return formatDate(cell);
+ if (typeof cell === "object")
+ return Object.keys(cell).length.toLocaleString();
+ if (typeof cell === "string") return cell;
+ return String(cell);
+};

frontend/src/global/layout.css

@@ -65,6 +65,11 @@
  font-weight: var(--medium);
 }
 
+.mini-table > :nth-child(even):empty::after {
+ content: "-";
+ color: var(--gray);
+}
+
 /** automatically applied to all icons (react-icons and imported custom icons) */
 
 .icon {

frontend/src/global/styles.css

@@ -78,7 +78,7 @@ hr {
 /** text */
 
 a {
- color: var(--accent);
+ color: var(--deep);
  transition: color var(--fast);
 }
 
@@ -87,7 +87,7 @@ a:hover {
 }
 
 p a:visited {
- color: var(--deep);
+ color: var(--accent);
 }
 
 p a:visited:hover {

frontend/src/global/theme.css

@@ -1,11 +1,11 @@
 :root {
  /* accent */
- --accent: #ba3960;
+ --accent: hsl(342, 50%, 50%);
+ --accent-light: hsl(342, 100%, 90%);
 
  /** deep */
- --deep: #22577a;
- --deep-mid: #5a92b7;
- --deep-light: #ceebff;
+ --deep: hsl(204, 50%, 35%);
+ --deep-light: hsl(204, 100%, 90%);
 
  /** grays */
  --black: #000000;

frontend/src/pages/NewAnalysis.tsx

@@ -98,8 +98,8 @@ const genesetContextOptions: RadioOption<GenesetContext>[] = [
  secondary: "Phenotypes",
  },
  {
- id: "DisGeNet",
- primary: "DisGeNet",
+ id: "Mondo",
+ primary: "Mondo",
  secondary: "Diseases",
  },
 ];
@@ -184,7 +184,7 @@ const NewAnalysisPage = () => {
 
  /** restrict species options based on other params */
  const filteredSpeciesOptions = speciesOptions.filter((option) => {
- if (genesetContext === "DisGeNet" && option.id !== "Human") return false;
+ if (genesetContext === "Mondo" && option.id !== "Human") return false;
  if (network === "BioGRID" && option.id === "Zebrafish") return false;
  return true;
  });
@@ -196,10 +196,10 @@ const NewAnalysisPage = () => {
  )
  toast("BioGRID does not support Zebrafish.", "warning", "warn1");
  if (
- genesetContext === "DisGeNet" &&
+ genesetContext === "Mondo" &&
  (speciesTrain !== "Human" || speciesTest !== "Human")
  )
- toast("DisGeNet only supports Human genes.", "warning", "warn2");
+ toast("Mondo only supports Human genes.", "warning", "warn2");
 
  /** auto-select species */
  useEffect(() => {
@@ -386,20 +386,8 @@ const NewAnalysisPage = () => {
  render: (cell) => cell || <Mark type="error">Failed</Mark>,
  },
  {
- key: "biogrid",
- name: "In BioGRID",
- render: YesNo,
- filterType: "boolean",
- },
- {
- key: "imp",
- name: "In IMP",
- render: YesNo,
- filterType: "boolean",
- },
- {
- key: "string",
- name: "In STRING",
+ key: "inNetwork",
+ name: "In Network",
  render: YesNo,
  filterType: "boolean",
  },

frontend/src/pages/Testbed.tsx

@@ -50,6 +50,7 @@ import TextBox from "@/components/TextBox";
 import Tile from "@/components/Tile";
 import { toast } from "@/components/Toasts";
 import Tooltip from "@/components/Tooltip";
+import { themeVariables } from "@/util/dom";
 import { formatDate, formatNumber } from "@/util/string";
 import tableData from "../../fixtures/table.json";
 
@@ -78,33 +79,18 @@ const TestbedPage = () => {
 
  {/* color palette */}
  <Flex gap="none">
- {[
- "accent",
- "deep",
- "deep-mid",
- "deep-light",
- "black",
- "off-black",
- "dark-gray",
- "gray",
- "light-gray",
- "off-white",
- "white",
- "success",
- "warning",
- "error",
- ].map((color, index) => (
- <Tooltip key={index} content={color}>
- <div
- aria-hidden
- style={{
- width: 50,
- height: 50,
- background: `var(--${color})`,
- }}
- />
- </Tooltip>
- ))}
+ {Object.entries(themeVariables)
+ .filter(
+ ([, value]) => value.startsWith("#") || value.startsWith("hsl"),
+ )
+ .map(([variable, color], index) => (
+ <Tooltip key={index} content={variable}>
+ <div
+ aria-hidden
+ style={{ width: 50, height: 50, background: color }}
+ />
+ </Tooltip>
+ ))}
  </Flex>
 
  <p>