From 65bd9b22df0822a56733bee9c135819b95d39bca Mon Sep 17 00:00:00 2001 From: Jonathan Fisher <49597360+jpfisher72@users.noreply.github.com> Date: Thu, 24 Oct 2024 10:39:58 -0400 Subject: [PATCH] Update Component Library (#477) * Bump to 2.0.8, fix breaking changes * Misc itemsPerPage Changes --- screen2.0/package.json | 2 +- .../app/_biosampleTables/BiosampleTables.tsx | 1 + .../src/app/search/_ccredetails/entexdata.tsx | 19 +++-- .../_ccredetails/inspecificbiosample.tsx | 40 ++++++---- .../app/search/_ccredetails/linkedgenes.tsx | 8 +- .../search/_ccredetails/tfintersection.tsx | 56 ++++++++------ screen2.0/src/app/search/page.tsx | 2 +- screen2.0/yarn.lock | 76 ++++--------------- 8 files changed, 88 insertions(+), 116 deletions(-) diff --git a/screen2.0/package.json b/screen2.0/package.json index 21994a28..699dfbd1 100644 --- a/screen2.0/package.json +++ b/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", diff --git a/screen2.0/src/app/_biosampleTables/BiosampleTables.tsx b/screen2.0/src/app/_biosampleTables/BiosampleTables.tsx index 764af84a..fb4d5b13 100644 --- a/screen2.0/src/app/_biosampleTables/BiosampleTables.tsx +++ b/screen2.0/src/app/_biosampleTables/BiosampleTables.tsx @@ -329,6 +329,7 @@ export const BiosampleTables = ({ columns={cols} rows={biosamples} dense + itemsPerPage={5} searchable highlighted={highlighted} sortColumn={1} diff --git a/screen2.0/src/app/search/_ccredetails/entexdata.tsx b/screen2.0/src/app/search/_ccredetails/entexdata.tsx index b71ca51d..7177ca74 100644 --- a/screen2.0/src/app/search/_ccredetails/entexdata.tsx +++ b/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: () => Experiment Accession, - 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: () => Supporting Assays, - 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]} /> diff --git a/screen2.0/src/app/search/_ccredetails/inspecificbiosample.tsx b/screen2.0/src/app/search/_ccredetails/inspecificbiosample.tsx index ac68659b..cad6f693 100644 --- a/screen2.0/src/app/search/_ccredetails/inspecificbiosample.tsx +++ b/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 = ({ 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 = ({ 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 = ({ 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 = ({ acce tableTitle="Ancillary Collection" rows={ancillaryCollection} sortColumn={1} - itemsPerPage={5} searchable downloadFileName={`${assembly} ${accession} - Ancillary Collection.tsv`} /> diff --git a/screen2.0/src/app/search/_ccredetails/linkedgenes.tsx b/screen2.0/src/app/search/_ccredetails/linkedgenes.tsx index 85263ece..4b4ba873 100644 --- a/screen2.0/src/app/search/_ccredetails/linkedgenes.tsx +++ b/screen2.0/src/app/search/_ccredetails/linkedgenes.tsx @@ -66,7 +66,7 @@ export const LinkedGenes: React.FC = (props) => { }, { header: "P", - HeaderRender: (row: LinkedGeneInfo) => P, + HeaderRender: () => P, 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) => { rows={HiCLinked} sortColumn={6} sortDescending - itemsPerPage={5} searchable /> : @@ -117,7 +116,6 @@ export const LinkedGenes: React.FC = (props) => { tableTitle="ChIA-PET Interactions" rows={ChIAPETLinked} sortColumn={5} - itemsPerPage={5} searchable /> : @@ -161,7 +159,7 @@ export const LinkedGenes: React.FC = (props) => { }, { header: "P", - HeaderRender: (row: LinkedGeneInfo) => P, + HeaderRender: () => P, 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) => { emptyText="test" sortColumn={7} sortDescending - itemsPerPage={5} searchable /> : @@ -218,7 +215,6 @@ export const LinkedGenes: React.FC = (props) => { rows={eqtlLinked} sortColumn={6} sortDescending - itemsPerPage={5} searchable /> : diff --git a/screen2.0/src/app/search/_ccredetails/tfintersection.tsx b/screen2.0/src/app/search/_ccredetails/tfintersection.tsx index 3a8db3c6..fc1d1c34 100644 --- a/screen2.0/src/app/search/_ccredetails/tfintersection.tsx +++ b/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[] = [ + { + header: "Factor", + value: (row) => row.name, + render: (row) => ( + + + + ), + }, + { + header: "# of experiments that support TF binding", + value: (row) => row.n, + }, + { + header: "# experiments in total", + value: (row) => row.total, + }, + ] + return (<> {loading || !data ? ( @@ -98,33 +127,14 @@ export const TfIntersection: React.FC<{ assembly: string; coordinates: { chromos lg: factor != "" ? 6 : 12 }}> row.name, - render: (row) => ( - - - - ), - }, - { - 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} /> diff --git a/screen2.0/src/app/search/page.tsx b/screen2.0/src/app/search/page.tsx index 26852057..84af9abf 100644 --- a/screen2.0/src/app/search/page.tsx +++ b/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} diff --git a/screen2.0/yarn.lock b/screen2.0/yarn.lock index f42aea94..4a9b3664 100644 --- a/screen2.0/yarn.lock +++ b/screen2.0/yarn.lock @@ -3279,7 +3279,7 @@ __metadata: languageName: node linkType: hard -"@visx/tooltip@npm:3.3.0, @visx/tooltip@npm:^3.3.0": +"@visx/tooltip@npm:3.3.0": version: 3.3.0 resolution: "@visx/tooltip@npm:3.3.0" dependencies: @@ -3622,25 +3622,23 @@ __metadata: languageName: node linkType: hard -"@weng-lab/psychscreen-ui-components@npm:^2.0.0": - version: 2.0.0 - resolution: "@weng-lab/psychscreen-ui-components@npm:2.0.0" +"@weng-lab/psychscreen-ui-components@npm:^2.0.8": + version: 2.0.8 + resolution: "@weng-lab/psychscreen-ui-components@npm:2.0.8" dependencies: - "@visx/tooltip": "npm:^3.3.0" - cytoscape: "npm:^3.29.2" - cytoscape-cose-bilkent: "npm:^4.1.0" - cytoscape-popper: "npm:^4.0.0" - html2canvas: "npm:^1.4.1" - tippy.js: "npm:^6.3.7" - use-react-screenshot: "npm:^4.0.0" + cytoscape: ^3.30.2 + cytoscape-cose-bilkent: ^4.1.0 + cytoscape-popper: ^4.0.1 + tippy.js: ^6.3.7 + use-react-screenshot: ^4.0.0 peerDependencies: "@emotion/react": ^11.13.3 "@emotion/styled": ^11.13.0 "@mui/icons-material": ^6.1.1 "@mui/material": ^6.1.1 - react: ^18.2.0 - react-dom: ^18.2.0 - checksum: 354a95a94beb1795d30437df2efde9ff88717556c536c660f5d503f29cc5820cca8962cc696d41b581ac4b5550b46a2bd83d0b0c7815997e162990371c94e45b + react: ^18.3.1 + react-dom: ^18.3.1 + checksum: 97d5d532cde6cd3d33c2badc1cf0095886eab76df372e53630aae2221042587161fe58c887c5c89bab8b0efb16bdde5db73fae8f48dd2775d785ac9e4f1c30a7 languageName: node linkType: hard @@ -4286,13 +4284,6 @@ __metadata: languageName: node linkType: hard -"base64-arraybuffer@npm:^1.0.2": - version: 1.0.2 - resolution: "base64-arraybuffer@npm:1.0.2" - checksum: 15e6400d2d028bf18be4ed97702b11418f8f8779fb8c743251c863b726638d52f69571d4cc1843224da7838abef0949c670bde46936663c45ad078e89fee5c62 - languageName: node - linkType: hard - "base64-js@npm:^1.3.1": version: 1.5.1 resolution: "base64-js@npm:1.5.1" @@ -5164,15 +5155,6 @@ __metadata: languageName: node linkType: hard -"css-line-break@npm:^2.1.0": - version: 2.1.0 - resolution: "css-line-break@npm:2.1.0" - dependencies: - utrie: "npm:^1.0.2" - checksum: 37b1fe632b03be7a287cd394cef8b5285666343443125c510df9cfb6a4734a2c71e154ec8f7bbff72d7c339e1e5872989b1c52d86162aed27d6cc114725bb4d0 - languageName: node - linkType: hard - "cssesc@npm:^3.0.0": version: 3.0.0 resolution: "cssesc@npm:3.0.0" @@ -5212,7 +5194,7 @@ __metadata: languageName: node linkType: hard -"cytoscape-popper@npm:^4.0.0": +"cytoscape-popper@npm:^4.0.1": version: 4.0.1 resolution: "cytoscape-popper@npm:4.0.1" peerDependencies: @@ -5221,7 +5203,7 @@ __metadata: languageName: node linkType: hard -"cytoscape@npm:^3.29.2": +"cytoscape@npm:^3.30.2": version: 3.30.2 resolution: "cytoscape@npm:3.30.2" checksum: 45ec8f256b6bb59d505bf92f937d86d2547c62cd45e02e7e873320f321d39bb57261aad0dad06d0903f2af50decb367aa0a05193043da5332dc6feb37dce888c @@ -7238,16 +7220,6 @@ __metadata: languageName: node linkType: hard -"html2canvas@npm:^1.4.1": - version: 1.4.1 - resolution: "html2canvas@npm:1.4.1" - dependencies: - css-line-break: "npm:^2.1.0" - text-segmentation: "npm:^1.0.3" - checksum: c134324af57f3262eecf982e436a4843fded3c6cf61954440ffd682527e4dd350e0c2fafd217c0b6f9a455fe345d0c67b4505689796ab160d4ca7c91c3766739 - languageName: node - linkType: hard - "http-cache-semantics@npm:^4.1.1": version: 4.1.1 resolution: "http-cache-semantics@npm:4.1.1" @@ -10485,7 +10457,7 @@ __metadata: "@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 @@ -11376,15 +11348,6 @@ __metadata: languageName: node linkType: hard -"text-segmentation@npm:^1.0.3": - version: 1.0.3 - resolution: "text-segmentation@npm:1.0.3" - dependencies: - utrie: "npm:^1.0.2" - checksum: 2e24632d59567c55ab49ac324815e2f7a8043e63e26b109636322ac3e30692cee8679a448fd5d0f0598a345f407afd0e34ba612e22524cf576d382d84058c013 - languageName: node - linkType: hard - "text-table@npm:^0.2.0": version: 0.2.0 resolution: "text-table@npm:0.2.0" @@ -11916,15 +11879,6 @@ __metadata: languageName: node linkType: hard -"utrie@npm:^1.0.2": - version: 1.0.2 - resolution: "utrie@npm:1.0.2" - dependencies: - base64-arraybuffer: "npm:^1.0.2" - checksum: c96fbb7d4d8855a154327da0b18e39b7511cc70a7e4bcc3658e24f424bb884312d72b5ba777500b8858e34d365dc6b1a921dc5ca2f0d341182519c6b78e280a5 - languageName: node - linkType: hard - "uuid@npm:^10.0.0": version: 10.0.0 resolution: "uuid@npm:10.0.0"