From eaefae0f1343baa837ba8c91136eb2c2e6223cb4 Mon Sep 17 00:00:00 2001
From: Yukthiw <59380056+Yukthiw@users.noreply.github.com>
Date: Sun, 3 Dec 2023 19:39:37 -0500
Subject: [PATCH] feat: Addedexpression level indicator to EFP views (#58)
* feat: added expression level chart
* Added styling
---
.../eFP/Viewer/GeneDistributionChart.tsx | 93 +++++++++++++++++++
Eplant/views/eFP/Viewer/index.tsx | 6 ++
2 files changed, 99 insertions(+)
create mode 100644 Eplant/views/eFP/Viewer/GeneDistributionChart.tsx
diff --git a/Eplant/views/eFP/Viewer/GeneDistributionChart.tsx b/Eplant/views/eFP/Viewer/GeneDistributionChart.tsx
new file mode 100644
index 00000000..860b68f1
--- /dev/null
+++ b/Eplant/views/eFP/Viewer/GeneDistributionChart.tsx
@@ -0,0 +1,93 @@
+import * as React from 'react'
+import { SVGProps, useEffect, useMemo, useState } from 'react'
+import { EFPData } from '../types'
+import { useDarkMode } from '@eplant/state'
+import { useTheme } from '@mui/material'
+import { Mail } from '@mui/icons-material'
+
+const GeneDistributionChart = ({ data }: { data: EFPData }) => {
+ const theme = useTheme()
+ const [geneRanking, setGeneRanking] = useState<{
+ [key: string]: string
+ } | null>(null)
+ const maxVal = data.max
+
+ useEffect(() => {
+ const fetchGeneRanking = async (value: number) => {
+ const webservice = `//bar.utoronto.ca/eplant/cgi-bin/get_rank.php?expression=${value}`
+ const response = await fetch(webservice).then((response) => {
+ if (!response.ok) {
+ throw new Error(`HTTP error! Status: ${response.status}`)
+ }
+ return response
+ })
+
+ const jsonResponse: { result: { [key: string]: string }[] } =
+ await response.json()
+ setGeneRanking(jsonResponse.result[0])
+ }
+ fetchGeneRanking(maxVal)
+ }, [maxVal])
+
+ const xVal = geneRanking
+ ? 580 * (parseFloat(geneRanking.percentile) / 100) + 144
+ : undefined
+
+ const lineCoords = xVal ? 'M' + xVal + ' 587V220' : 'M400 587V220'
+ return (
+
+ {geneRanking ? (
+
+ ) : (
+
+ )}
+