Argo improvements (#557)

* ref allele mistmatch fix

* multiple tables open at once

* close tables

* draggable tables

* isolate rows

Author: mlacadie

screen2.0/package.json

@@ -20,6 +20,7 @@
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@hello-pangea/dnd": "^18.0.1",
     "@mui/icons-material": "^6.1.5",
     "@mui/lab": "6.0.0-beta.13",
     "@mui/material": "^6.1.5",

screen2.0/public/ArgoExample.bed

@@ -1,9 +1,9 @@
 #Chromosome  Start   End        Ref
-chr12	53380319	53380320	AG
-chr12	53380531	53380540	CGCCCCCTGC
-chr12	53387214	53387220	GTGCTGG
-chr12	53893108	53893120	AAGGCATGCATGT
-chr12	53338940	53338943	CAGT
-chr12	53409374	53409376	TCC
-chr12	53386621	53386625	AGCTG
-chr12	54212227	54212234	CTTTCATC
+chr12	53380319	53380320	G
+chr12	53380531	53380540	GCCCCCTGC
+chr12	53387214	53387220	TGCTGG
+chr12	53893108	53893120	AGGCATGCATGT
+chr12	53338940	53338943	AGT
+chr12	53409374	53409376	CC
+chr12	53386621	53386625	GCTG
+chr12	54212227	54212234	TTTCATC

screen2.0/public/ArgoExample.tsv

@@ -96,7 +96,7 @@ const ArgoUpload: React.FC<UploadProps> = ({
                             url: "https://downloads.wenglab.org/hg38.2bit",
                             regions: [{
                                 chr1: region.chr,
-                                start: region.start,
+                                start: region.start + 1, // Start is not included when gathering the allele positions
                                 end: region.end,
                             }],
                         },

screen2.0/src/app/applets/argo/argoUpload.tsx

@@ -5,7 +5,8 @@ import { DataTable, DataTableColumn } from "@weng-lab/psychscreen-ui-components"
 const ElementTable: React.FC<ElementTableProps> = ({
     elementFilterVariables,
     SubTableTitle,
-    elementRows
+    elementRows,
+    isolatedRows
 }) => {
     //handle column changes for the Element rank table
     const elementColumns: DataTableColumn<ElementTableRow>[] = useMemo(() => {
@@ -38,11 +39,11 @@ const ElementTable: React.FC<ElementTableProps> = ({
         <DataTable
             key={Math.random()}
             columns={elementColumns}
-            rows={elementRows === null ? [] : elementRows}
+            rows={elementRows === null ? [] : isolatedRows ? isolatedRows.element : elementRows}
             sortDescending
-            itemsPerPage={10}
+            itemsPerPage={5}
             searchable
-            tableTitle={<SubTableTitle title="Element Details (Overlapping cCREs)" />}
+            tableTitle={<SubTableTitle title="Element Details (Overlapping cCREs)" table="elements" />}
             onRowClick={handlecCREClick}
         />
     )

screen2.0/src/app/applets/argo/elements/elementTable.tsx

@@ -5,7 +5,8 @@ import { DataTable, DataTableColumn } from "@weng-lab/psychscreen-ui-components"
 const GeneTable: React.FC<GeneTableProps> = ({
     geneFilterVariables,
     SubTableTitle,
-    geneRows
+    geneRows,
+    isolatedRows
 }) => {
     //handle column changes for the Gene rank table
     const geneColumns: DataTableColumn<GeneTableRow>[] = useMemo(() => {
@@ -32,11 +33,11 @@ const GeneTable: React.FC<GeneTableProps> = ({
         <DataTable
             key={Math.random()}
             columns={geneColumns}
-            rows={geneRows  === null ? [] : geneRows}
+            rows={geneRows  === null ? [] : isolatedRows ? isolatedRows.gene : geneRows}
             sortDescending
-            itemsPerPage={10}
+            itemsPerPage={5}
             searchable
-            tableTitle={<SubTableTitle title="Gene Details" />}
+            tableTitle={<SubTableTitle title="Gene Details" table="genes" />}
             onRowClick={handleRowClick}
         />
     )