Fill out results page

frontend/fixtures/index.ts

@@ -1,15 +1,23 @@
-import { http, HttpResponse, passthrough } from "msw";
+import {
+ http,
+ HttpResponse,
+ passthrough,
+ type HttpResponseResolver,
+} from "msw";
 import convertIds from "../fixtures/convert-ids.json";
 import ml from "../fixtures/ml.json";
 
+const nonMocked: HttpResponseResolver = ({ request }) => {
+ console.debug("Non-mocked request", new URL(request.url).pathname);
+ return passthrough();
+};
+
 /** api calls to be mocked (faked) with fixture data */
 export const handlers = [
- http.get("*/gpz-convert-ids", () => HttpResponse.json(convertIds)),
- http.get("*/gpz-ml", () => HttpResponse.json(ml)),
+ http.post("*/gpz-convert-ids", () => HttpResponse.json(convertIds)),
+ http.post("*/gpz-ml", () => HttpResponse.json(ml)),
 
  /** any other request */
- http.get(/.*/, ({ request }) => {
- console.debug("Non-mocked request", new URL(request.url).pathname);
- return passthrough();
- }),
+ http.get(/.*/, nonMocked),
+ http.post(/.*/, nonMocked),
 ];

frontend/fixtures/ml.json

@@ -1,73 +1,55 @@
 {
- "input": {
- "genes": [
- "836",
- "1544",
- "1543",
- "4780",
- "1557",
- "1565",
- "1581",
- "9971",
- "7157",
- "1588"
- ],
- "sp_trn": "Human",
- "sp_test": "Human",
- "net_type": "BioGRID",
- "gsc": "GO"
- },
  "avgps": [-10, -10, -10],
  "df_convert_out_subset": [
  {
  "Entrez ID": "836",
  "In BioGRID?": "Y",
- "Original ID": "836"
+ "Original ID": "CASP3"
  },
  {
  "Entrez ID": "1544",
  "In BioGRID?": "Y",
- "Original ID": "1544"
+ "Original ID": "CYP1A2"
  },
  {
  "Entrez ID": "1543",
  "In BioGRID?": "Y",
- "Original ID": "1543"
+ "Original ID": "CYP1A1"
  },
  {
  "Entrez ID": "4780",
  "In BioGRID?": "Y",
- "Original ID": "4780"
+ "Original ID": "NFE2L2"
  },
  {
  "Entrez ID": "1557",
  "In BioGRID?": "Y",
- "Original ID": "1557"
+ "Original ID": "CYP2C19"
  },
  {
  "Entrez ID": "1565",
  "In BioGRID?": "Y",
- "Original ID": "1565"
+ "Original ID": "CYP2D6"
  },
  {
  "Entrez ID": "1581",
  "In BioGRID?": "N",
- "Original ID": "1581"
+ "Original ID": "CYP7A1"
  },
  {
  "Entrez ID": "9971",
  "In BioGRID?": "Y",
- "Original ID": "9971"
+ "Original ID": "NR1H4"
  },
  {
  "Entrez ID": "7157",
  "In BioGRID?": "Y",
- "Original ID": "7157"
+ "Original ID": "TP53"
  },
  {
  "Entrez ID": "1588",
  "In BioGRID?": "Y",
- "Original ID": "1588"
+ "Original ID": "CYP19A1"
  }
  ],
  "df_edge": [

frontend/package.json

@@ -9,10 +9,9 @@
  "test:lint": "./lint.sh",
  "test:types": "tsc",
  "test:spelling": "bunx cspell src/**/*.{tsx,ts}",
- "clean": "rm -rf node_modules bun.lockb && bun pm cache rm"
+ "clean": "rm -rf node_modules dist bun.lockb && bun pm cache rm"
  },
  "dependencies": {
- "@tanstack/react-query": "^5.29.0",
  "@tanstack/react-table": "^8.15.3",
  "@zag-js/checkbox": "^0.45.0",
  "@zag-js/number-input": "^0.45.0",
@@ -26,6 +25,7 @@
  "@zag-js/tooltip": "^0.45.0",
  "classnames": "^2.5.1",
  "csv-stringify": "^6.4.6",
+ "d3": "^7.9.0",
  "javascript-time-ago": "^2.5.9",
  "lodash": "^4.17.21",
  "react": "^18.2.0",
@@ -36,11 +36,11 @@
  "react-time-ago": "^7.3.1",
  "react-to-text": "^2.0.1",
  "react-use": "^17.5.0",
- "use-debounce": "^10.0.0",
- "use-query-params": "^2.2.1"
+ "use-debounce": "^10.0.0"
  },
  "devDependencies": {
  "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
+ "@types/d3": "^7.4.3",
  "@types/lodash": "^4.17.0",
  "@types/node": "^20.12.7",
  "@types/react": "^18.2.75",

frontend/src/App.tsx

@@ -14,17 +14,14 @@ import {
  useMatches,
  useRouteLoaderData,
 } from "react-router-dom";
-import { QueryParamProvider } from "use-query-params";
-import { ReactRouter6Adapter } from "use-query-params/adapters/react-router-6";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import FloatButtons from "@/components/FloatButtons";
 import Footer from "@/components/Footer";
 import Header from "@/components/Header";
 import TableOfContents from "@/components/TableOfContents";
 import Toasts from "@/components/Toasts";
 import About from "@/pages/About";
+import Analysis from "@/pages/Analysis";
 import Home from "@/pages/Home";
-import LoadAnalysis from "@/pages/LoadAnalysis";
 import NewAnalysis from "@/pages/NewAnalysis";
 import NotFound from "@/pages/NotFound";
 import Testbed from "@/pages/Testbed";
@@ -59,14 +56,7 @@ const Layout = () => {
  <Header />
  <main>
  {toc && <TableOfContents />}
- <QueryParamProvider
- adapter={ReactRouter6Adapter}
- options={{ updateType: "replaceIn" }}
- >
- <QueryClientProvider client={queryClient}>
- <Outlet />
- </QueryClientProvider>
- </QueryParamProvider>
+ <Outlet />
  </main>
  <Footer />
  <Toasts />
@@ -107,8 +97,8 @@ const routes = [
  loader: () => ({ toc: true }) satisfies Meta,
  },
  {
- path: "load-analysis",
- element: <LoadAnalysis />,
+ path: "analysis",
+ element: <Analysis />,
  loader: () => ({ toc: true }) satisfies Meta,
  },
  {
@@ -129,8 +119,5 @@ const router = createBrowserRouter(routes, {
  basename: import.meta.env.BASE_URL,
 });
 
-/** query client */
-const queryClient = new QueryClient();
-
 /** prefix for localStorage keys */
 export const storageKey = "geneplexus-";

frontend/src/api/api.ts

@@ -1,63 +1,40 @@
 import { api, request } from "@/api";
-import type { AnalysisResults, ConvertIds, Input, Species } from "@/api/types";
-
-/** convert input list of genes into entrez */
-export const convertGeneIds = async (
+import {
+ convertAnalysisResults,
+ convertConvertIds,
+ revertAnalysisInputs,
+ type _AnalysisResults,
+ type _ConvertIds,
+ type AnalysisInputs,
+ type Species,
+} from "@/api/types";
+
+/** check input list of genes. convert to entrez, check if in-network, etc. */
+export const checkGenes = async (
  genes: string[],
  species: Species = "Human",
 ) => {
  const headers = new Headers();
  headers.append("Content-Type", "application/json");
-
  const params = { genes, species };
-
- const response = await request<ConvertIds>(
+ const response = await request<_ConvertIds>(
  `${api}/gpz-convert-ids`,
  undefined,
  { method: "POST", headers, body: JSON.stringify(params) },
  );
-
- /** map "couldn't convert" status to easier-to-work-with value */
- for (const row of response.df_convert_out)
- if (row["Entrez ID"].match(/Could Not be mapped to Entrez/i))
- row["Entrez ID"] = "";
-
- /** transform response into format more convenient for UI */
- const transformed = {
- count: response.input_count,
- success: response.df_convert_out.filter((row) => row["Entrez ID"]).length,
- error: response.df_convert_out.filter((row) => !row["Entrez ID"]).length,
- summary: response.table_summary,
- table: response.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",
- })),
- };
-
- return transformed;
+ return convertConvertIds(response);
 };
 
-/** submit analysis */
-export const submitAnalysis = async (input: Input) => {
+/** submit full analysis */
+export const submitAnalysis = async (input: AnalysisInputs) => {
  const headers = new Headers();
  headers.append("Content-Type", "application/json");
-
- const params = {
- genes: input.genes,
- net_type: input.network,
- gsc: input.genesetContext,
- sp_trn: input.species,
- sp_tst: input.species,
- };
-
- const response = await request<AnalysisResults>(`${api}/gpz-ml`, undefined, {
+ const params = revertAnalysisInputs(input);
+ const response = await request<_AnalysisResults>(`${api}/gpz-ml`, undefined, {
  method: "POST",
  headers,
  body: JSON.stringify(params),
  });
 
- return response;
+ return convertAnalysisResults(response);
 };