Update Component Library (#477)

* Bump to 2.0.8, fix breaking changes

* Misc itemsPerPage Changes

screen2.0/package.json

@@ -54,7 +54,7 @@
     "@visx/event": "^3.3.0",
     "@visx/responsive": "^3.10.2",
     "@visx/visx": "^3.11.0",
-    "@weng-lab/psychscreen-ui-components": "^2.0.0",
+    "@weng-lab/psychscreen-ui-components": "^2.0.8",
     "@weng-lab/ts-ztable": "^4.0.1",
     "autoprefixer": "10.4.20",
     "bpnet-ui": "^0.3.8",

screen2.0/src/app/_biosampleTables/BiosampleTables.tsx

@@ -329,6 +329,7 @@ export const BiosampleTables = <T extends boolean = false>({
                   columns={cols}
                   rows={biosamples}
                   dense
+                  itemsPerPage={5}
                   searchable
                   highlighted={highlighted}
                   sortColumn={1}

screen2.0/src/app/search/_ccredetails/entexdata.tsx

@@ -1,12 +1,13 @@
-import { gql, useQuery } from "@apollo/client"
+import { useQuery } from "@apollo/client"
 import React from "react"
 import { DataTable } from "@weng-lab/psychscreen-ui-components"
 import Grid from "@mui/material/Grid2"
 import { client } from "./client"
 import { Typography, CircularProgress } from "@mui/material"
 import { createLink } from "../../../common/lib/utility"
+import { gql } from "../../../graphql/__generated__/gql"
 
-const ENTEx_QUERY = gql`
+const ENTEx_QUERY = gql(`
 query ENTEXQuery($accession: String!){
   entexQuery(accession: $accession){
     assay
@@ -21,16 +22,17 @@ query ENTEXQuery($accession: String!){
     imbalance_significance
   }
 }
-`
+`)
 
-const ENTEx_Active_Annotations_QUERY = gql`
+const ENTEx_Active_Annotations_QUERY = gql(`
 query entexActiveAnnotationsQuery( $coordinates: GenomicRangeInput! ) {
     entexActiveAnnotationsQuery(coordinates: $coordinates) {
         tissue
         assay_score
     }
 
-}`
+}`)
+
 export const ENTExData = (props: { accession, coordinates }) =>{
     console.log(props.coordinates)
     const { data, loading } = useQuery(ENTEx_QUERY, {
@@ -92,7 +94,8 @@ export const ENTExData = (props: { accession, coordinates }) =>{
                     {
                         header: "Experiment Accession",
                         HeaderRender: () => <b>Experiment Accession</b>,
-                        value: (row) =>  createLink("https://www.encodeproject.org/experiments/", row.experiment_accession, row.experiment_accession, true),
+                        value: (row) => row.experiment_accession,
+                        render: (row) => createLink("https://www.encodeproject.org/experiments/", row.experiment_accession, row.experiment_accession, true)
                     },
                     {
                         header: "p beta binom",
@@ -134,14 +137,14 @@ export const ENTExData = (props: { accession, coordinates }) =>{
                 {
                     header: "Supporting Assays",
                     HeaderRender: () => <b>Supporting Assays</b>,
-                    value: (row) => row.assay_score.split("|").map(s=>s.split(":")[0]).join(",")
+                    value: (row) => row.assay_score.split("|").map(s=>s.split(":")[0]).join(", ")
                 }
             ]}
             rows={entexActiveAnno.entexActiveAnnotationsQuery || []}
             sortColumn={0}
             searchable
             sortDescending
-            itemsPerPage={10}
+            itemsPerPage={[10, 25, 100]}
             />
         </Grid> 
 

screen2.0/src/app/search/_ccredetails/inspecificbiosample.tsx

@@ -6,6 +6,7 @@ import { DataTable } from "@weng-lab/psychscreen-ui-components"
 import { z_score, z_score_render, GROUP_COLOR_MAP } from "./utils"
 import Grid from "@mui/material/Grid2"
 import { LoadingMessage } from "../../../common/lib/utility"
+import { DataTableColumn } from "@weng-lab/psychscreen-ui-components"
 
 export type cCRERow = {
   ct?: string
@@ -121,37 +122,46 @@ const tableCols = (typeC = false) => {
   return cols
 }
 
-const ctAgnosticColumns = () => [
+const ctAgnosticColumns: () => DataTableColumn<{
+  __typename?: "CCRE";
+  accession: string;
+  group: string;
+  dnase?: number | null;
+  h3k4me3?: number | null;
+  h3k27ac?: number | null;
+  ctcf?: number | null;
+  atac?: number | null;
+}>[] = () => [
   { header: "Cell Type", value: () => "cell type agnostic" },
   {
     header: "DNase max-Z",
-    value: (row: cCRERow) => z_score(row.dnase),
-    render: (row: cCRERow) => z_score_render(row.dnase),
+    value: (row) => z_score(row.dnase),
+    render: (row) => z_score_render(row.dnase),
   },
   {
     header: "ATAC max-Z",
-    value: (row: cCRERow) => z_score(row.atac),
-    render: (row: cCRERow) => z_score_render(row.atac),
+    value: (row) => z_score(row.atac),
+    render: (row) => z_score_render(row.atac),
   },
   {
     header: "H3K4me3 max-Z",
-    value: (row: cCRERow) => z_score(row.h3k4me3),
-    render: (row: cCRERow) => z_score_render(row.h3k4me3),
+    value: (row) => z_score(row.h3k4me3),
+    render: (row) => z_score_render(row.h3k4me3),
   },
   {
     header: "H3K27ac max-Z",
-    value: (row: cCRERow) => z_score(row.h3k27ac),
-    render: (row: cCRERow) => z_score_render(row.h3k27ac),
+    value: (row) => z_score(row.h3k27ac),
+    render: (row) => z_score_render(row.h3k27ac),
   },
   {
     header: "CTCF max-Z",
-    value: (row: cCRERow) => z_score(row.ctcf),
-    render: (row: cCRERow) => z_score_render(row.ctcf),
+    value: (row) => z_score(row.ctcf),
+    render: (row) => z_score_render(row.ctcf),
   },
   {
     header: "Classification",
-    value: (row: cCRERow) =>  GROUP_COLOR_MAP.get(row.group) ? GROUP_COLOR_MAP.get(row.group).split(":")[0] : "DNase only",
-    render: (row: cCRERow) => {
+    value: (row) =>  GROUP_COLOR_MAP.get(row.group) ? GROUP_COLOR_MAP.get(row.group).split(":")[0] : "DNase only",
+    render: (row) => {
       let group =  row.group.split(",")[0]
 
       let colormap = GROUP_COLOR_MAP.get(group)
@@ -364,6 +374,7 @@ export const InSpecificBiosamples: React.FC<InSpecificBiosamplesProps> = ({ acce
           tableTitle="Cell type agnostic classification"
           columns={ctAgnosticColumns()}
           sortColumn={1}
+          itemsPerPage={1}
           searchable
           downloadFileName={`${assembly} ${accession} - Cell type agnostic classification.tsv`}
         />
@@ -377,7 +388,6 @@ export const InSpecificBiosamples: React.FC<InSpecificBiosamplesProps> = ({ acce
           tableTitle="Core Collection"
           rows={coreCollection}
           sortColumn={1}
-          itemsPerPage={5}
           searchable
           downloadFileName={`${assembly} ${accession} - Core Collection.tsv`}
         />
@@ -391,7 +401,6 @@ export const InSpecificBiosamples: React.FC<InSpecificBiosamplesProps> = ({ acce
           sortColumn={1}
           tableTitle="Partial Data Collection"
           rows={partialDataCollection}
-          itemsPerPage={5}
           searchable
           downloadFileName={`${assembly} ${accession} - Partial Data Collection.tsv`}
         />
@@ -405,7 +414,6 @@ export const InSpecificBiosamples: React.FC<InSpecificBiosamplesProps> = ({ acce
           tableTitle="Ancillary Collection"
           rows={ancillaryCollection}
           sortColumn={1}
-          itemsPerPage={5}
           searchable
           downloadFileName={`${assembly} ${accession} - Ancillary Collection.tsv`}
         />

screen2.0/src/app/search/_ccredetails/linkedgenes.tsx

@@ -66,7 +66,7 @@ export const LinkedGenes: React.FC<props> = (props) => {
               },
               {
                 header: "P",
-                HeaderRender: (row: LinkedGeneInfo) => <Typography variant="body2"><i>P</i></Typography>,
+                HeaderRender: () => <Typography variant="body2"><i>P</i></Typography>,
                 value: (row: LinkedGeneInfo) => row.p_val,
                 render: (row: LinkedGeneInfo) => row.p_val === 0 ? '0' : toScientificNotationElement(row.p_val, 2, {variant: "body2"})
               },
@@ -75,7 +75,6 @@ export const LinkedGenes: React.FC<props> = (props) => {
             rows={HiCLinked}
             sortColumn={6}
             sortDescending
-            itemsPerPage={5}
             searchable
           />
           :
@@ -117,7 +116,6 @@ export const LinkedGenes: React.FC<props> = (props) => {
             tableTitle="ChIA-PET Interactions"
             rows={ChIAPETLinked}
             sortColumn={5}
-            itemsPerPage={5}
             searchable
           />
           :
@@ -161,7 +159,7 @@ export const LinkedGenes: React.FC<props> = (props) => {
               },
               {
                 header: "P",
-                HeaderRender: (row: LinkedGeneInfo) => <Typography variant="body2"><i>P</i></Typography>,
+                HeaderRender: () => <Typography variant="body2"><i>P</i></Typography>,
                 value: (row: LinkedGeneInfo) => row.p_val,
                 render: (row: LinkedGeneInfo) => toScientificNotationElement(row.p_val, 2, {variant: 'body2'})
               },
@@ -171,7 +169,6 @@ export const LinkedGenes: React.FC<props> = (props) => {
             emptyText="test"
             sortColumn={7}
             sortDescending
-            itemsPerPage={5}
             searchable
           />
           :
@@ -218,7 +215,6 @@ export const LinkedGenes: React.FC<props> = (props) => {
             rows={eqtlLinked}
             sortColumn={6}
             sortDescending
-            itemsPerPage={5}
             searchable
           />
           :

screen2.0/src/app/search/_ccredetails/tfintersection.tsx

@@ -5,9 +5,16 @@ import { client } from "./client"
 import { useQuery } from "@apollo/client"
 import { TF_INTERSECTION_QUERY, CRE_TF_DCC_QUERY } from "./queries"
 import Grid from "@mui/material/Grid2"
-import { DataTable } from "@weng-lab/psychscreen-ui-components"
+import { DataTable, DataTableColumn } from "@weng-lab/psychscreen-ui-components"
 import { LoadingMessage } from "../../../common/lib/utility"
 
+type TFBindData = {
+  name: string;
+  n: number;
+  total: number;
+  test: number;
+}
+
 export const TfIntersection: React.FC<{ assembly: string; coordinates: { chromosome: string; start: number; end: number } }> = ({
   assembly,
   coordinates,
@@ -61,12 +68,14 @@ export const TfIntersection: React.FC<{ assembly: string; coordinates: { chromos
       }
       peakmap[d.dataset.target].add(d.dataset.accession)
     })
+
   let totalmap = {}
   data &&
     data.peakDataset.partitionByTarget.forEach((x) => {
       totalmap[x.target.name] = x.counts.total
     })
-  let tableData =
+
+  let tableData: TFBindData[] =
     data &&
     Object.keys(peakmap).map((k) => {
       return {
@@ -77,6 +86,26 @@ export const TfIntersection: React.FC<{ assembly: string; coordinates: { chromos
       }
     })
 
+  const cols: DataTableColumn<TFBindData>[] = [
+      {
+        header: "Factor",
+        value: (row) => row.name,
+        render: (row) => (
+          <Link href={`https://www.factorbook.org/tf/human/${row.name}/function`} rel="noopener noreferrer" target="_blank">
+            <button>{row.name}</button>
+          </Link>
+        ),
+      },
+      {
+        header: "# of experiments that support TF binding",
+        value: (row) => row.n,
+      },
+      {
+        header: "# experiments in total",
+        value: (row) => row.total,
+      },
+    ]
+
   return (<>
     {loading || !data ? (
       <Grid container spacing={3} sx={{ mt: "0rem", mb: "2rem" }}>
@@ -98,33 +127,14 @@ export const TfIntersection: React.FC<{ assembly: string; coordinates: { chromos
               lg: factor != "" ? 6 : 12
             }}>
             <DataTable
-              columns={[
-                {
-                  header: "Factor",
-                  value: (row) => row.name,
-                  render: (row) => (
-                    <Link href={`https://www.factorbook.org/tf/human/${row.name}/function`} rel="noopener noreferrer" target="_blank">
-                      <button>{row.name}</button>
-                    </Link>
-                  ),
-                },
-                {
-                  header: "# of experiments that support TF binding",
-                  value: (row) => row.n,
-                },
-                {
-                  header: "# experiments in total",
-                  value: (row) => row.total,
-                },
-              ]}
+              columns={cols}
               tableTitle="TFs that bind this cCRE "
               rows={tableData || []}
-              onRowClick={(row) => {
+              onRowClick={(row: TFBindData) => {
                 setFactor(row.name)
                 setFactorHighlight(row)
               }}
               sortColumn={1}
-              itemsPerPage={5}
               highlighted={factorHighlight}
             />
           </Grid>

screen2.0/src/app/search/page.tsx

@@ -592,7 +592,7 @@ export default function Search({ searchParams }: { searchParams: { [key: string]
                       intersectFilenames.current}`
                     :
                     null}
-                  itemsPerPage={10}
+                  itemsPerPage={[10, 25, 50]}
                   assembly={mainQueryParams.coordinates.assembly}
                   onRowClick={handlecCREClick}
                   useLinkedGenes={useLinkedGenes}