diff --git a/apps/genetics/src/client.js b/apps/genetics/src/client.js index 970c8eab4..09de73050 100644 --- a/apps/genetics/src/client.js +++ b/apps/genetics/src/client.js @@ -1,5 +1,5 @@ -import config from './config'; -import { ApolloClient, InMemoryCache } from '@apollo/client'; +import config from "./config"; +import { ApolloClient, InMemoryCache } from "@apollo/client"; const client = new ApolloClient({ uri: config.apiUrl, diff --git a/apps/genetics/src/components/ColocForGeneTable/index.js b/apps/genetics/src/components/ColocForGeneTable/index.js index ae64f8864..8cf16a14a 100644 --- a/apps/genetics/src/components/ColocForGeneTable/index.js +++ b/apps/genetics/src/components/ColocForGeneTable/index.js @@ -1 +1 @@ -export { default } from './ColocForGeneTable'; +export { default } from "./ColocForGeneTable"; diff --git a/apps/genetics/src/components/ColocQTLGeneTissueTable/index.js b/apps/genetics/src/components/ColocQTLGeneTissueTable/index.js index 34074a5f8..1ea6d611a 100644 --- a/apps/genetics/src/components/ColocQTLGeneTissueTable/index.js +++ b/apps/genetics/src/components/ColocQTLGeneTissueTable/index.js @@ -1,7 +1,7 @@ -import ColocQTLGeneTissueTableCmp from './ColocQTLGeneTissueTable'; +import ColocQTLGeneTissueTableCmp from "./ColocQTLGeneTissueTable"; -export { getTableColumns } from './ColumnRenderers'; +export { getTableColumns } from "./ColumnRenderers"; -export { useColocTable } from './useColocTable'; +export { useColocTable } from "./useColocTable"; export default ColocQTLGeneTissueTableCmp; diff --git a/apps/genetics/src/components/ColocQTLGeneTissueTable/useColocTable.js b/apps/genetics/src/components/ColocQTLGeneTissueTable/useColocTable.js index c8372badc..e1ae6afe0 100644 --- a/apps/genetics/src/components/ColocQTLGeneTissueTable/useColocTable.js +++ b/apps/genetics/src/components/ColocQTLGeneTissueTable/useColocTable.js @@ -1,5 +1,5 @@ -import { descending } from 'd3'; -import { getPhenotypeId, getSpliceId } from '../../utils'; +import { descending } from "d3"; +import { getPhenotypeId, getSpliceId } from "../../utils"; export const useColocTable = data => { const uniqueStudyGenePhenotypes = data.reduce((acc, d) => { @@ -21,42 +21,37 @@ export const useColocTable = data => { }, {}) ); - const dataByPhenotypeId = uniquePhenotypeIds.map( - ({ phenotypeId, gene, qtlStudyName }) => ({ - phenotypeId, - gene, - qtlStudyName, - ...uniqueTissues.reduce((acc, t) => { - const items = data - .filter( - d => - d.gene.id === gene.id && - d.qtlStudyName === qtlStudyName && - d.tissue.id === t.id - ) - .map(d => ({ - h3: d.h3, - h4: d.h4, - log2h4h3: d.log2h4h3, - beta: d.beta, - splice: getSpliceId(d.phenotypeId), - })) - .sort((a, b) => descending(a.log2h4h3, b.log2h4h3)); + const dataByPhenotypeId = uniquePhenotypeIds.map(({ phenotypeId, gene, qtlStudyName }) => ({ + phenotypeId, + gene, + qtlStudyName, + ...uniqueTissues.reduce((acc, t) => { + const items = data + .filter( + d => d.gene.id === gene.id && d.qtlStudyName === qtlStudyName && d.tissue.id === t.id + ) + .map(d => ({ + h3: d.h3, + h4: d.h4, + log2h4h3: d.log2h4h3, + beta: d.beta, + splice: getSpliceId(d.phenotypeId), + })) + .sort((a, b) => descending(a.log2h4h3, b.log2h4h3)); - // there could be multiple loci for gene-tissue, so pick - // by highest log2h4h3 value (this should not happen due - // to deduplication on index variants) - if (items.length > 1) { - console.info( - `Multiple entries found: ${gene.symbol}, ${qtlStudyName}, ${phenotypeId}`, - items - ); - } - acc[t.id] = items.length > 0 ? items[0] : null; - return acc; - }, {}), - }) - ); + // there could be multiple loci for gene-tissue, so pick + // by highest log2h4h3 value (this should not happen due + // to deduplication on index variants) + if (items.length > 1) { + console.info( + `Multiple entries found: ${gene.symbol}, ${qtlStudyName}, ${phenotypeId}`, + items + ); + } + acc[t.id] = items.length > 0 ? items[0] : null; + return acc; + }, {}), + })); return { uniqueTissues, diff --git a/apps/genetics/src/components/ColocQTLGeneTissueTable/utils.js b/apps/genetics/src/components/ColocQTLGeneTissueTable/utils.js index 123f103f4..9cdded365 100644 --- a/apps/genetics/src/components/ColocQTLGeneTissueTable/utils.js +++ b/apps/genetics/src/components/ColocQTLGeneTissueTable/utils.js @@ -1,10 +1,6 @@ export const tissueComparator = t => (a, b) => { if (a[t] && b[t]) { - return a[t].log2h4h3 > b[t].log2h4h3 - ? 1 - : a[t].log2h4h3 === b[t].log2h4h3 - ? 0 - : -1; + return a[t].log2h4h3 > b[t].log2h4h3 ? 1 : a[t].log2h4h3 === b[t].log2h4h3 ? 0 : -1; } else if (a[t] && !b[t]) { return 1; } else if (!a[t] && b[t]) { diff --git a/apps/genetics/src/components/ExternalLink/index.js b/apps/genetics/src/components/ExternalLink/index.js index 2dd61706f..65a993d37 100644 --- a/apps/genetics/src/components/ExternalLink/index.js +++ b/apps/genetics/src/components/ExternalLink/index.js @@ -1,2 +1,2 @@ -export { default as ExternalLink } from './ExternalLink'; -export { default as XRefLinks } from './XRefLinks'; +export { default as ExternalLink } from "./ExternalLink"; +export { default as XRefLinks } from "./XRefLinks"; diff --git a/apps/genetics/src/components/Search/index.js b/apps/genetics/src/components/Search/index.js index 85bb434b2..4ff91497d 100644 --- a/apps/genetics/src/components/Search/index.js +++ b/apps/genetics/src/components/Search/index.js @@ -1 +1 @@ -export { default } from './Search'; +export { default } from "./Search"; diff --git a/apps/genetics/src/components/theme.js b/apps/genetics/src/components/theme.js index a26bce8f2..18f2d2ae3 100644 --- a/apps/genetics/src/components/theme.js +++ b/apps/genetics/src/components/theme.js @@ -1,23 +1,23 @@ -import { lighten, darken } from 'polished'; +import { lighten, darken } from "polished"; -const PRIMARY = '#0091eb'; -const SECONDARY = '#ff6350'; +const PRIMARY = "#0091eb"; +const SECONDARY = "#ff6350"; // const TERTIARY = '#00a252'; const GREY = { - 50: '#fafafa', - 100: '#f5f5f5', - 200: '#eeeeee', - 300: '#e0e0e0', - 400: '#bdbdbd', - 500: '#9e9e9e', - 600: '#757575', - 700: '#616161', - 800: '#424242', - 900: '#212121', - A100: '#d5d5d5', - A200: '#aaaaaa', - A400: '#303030', - A700: '#616161', + 50: "#fafafa", + 100: "#f5f5f5", + 200: "#eeeeee", + 300: "#e0e0e0", + 400: "#bdbdbd", + 500: "#9e9e9e", + 600: "#757575", + 700: "#616161", + 800: "#424242", + 900: "#212121", + A100: "#d5d5d5", + A200: "#aaaaaa", + A400: "#303030", + A700: "#616161", }; const theme = { @@ -48,13 +48,13 @@ const theme = { }, gecko: { color: GREY[500], - backgroundColor: 'white', + backgroundColor: "white", finemappingColor: GREY[600], colorSelected: PRIMARY, - backgroundColorSelected: 'white', + backgroundColorSelected: "white", finemappingColorSelected: darken(0.3, PRIMARY), colorChained: SECONDARY, - backgroundColorChained: 'white', + backgroundColorChained: "white", finemappingColorChained: darken(0.3, SECONDARY), connectorColor: GREY[300], connectorColorSelected: lighten(0.2, PRIMARY), diff --git a/apps/genetics/src/config.js b/apps/genetics/src/config.js index 748660a49..7b893c80b 100644 --- a/apps/genetics/src/config.js +++ b/apps/genetics/src/config.js @@ -1,13 +1,12 @@ const config = { - apiUrl: - window.configApiUrl ?? 'https://api.genetics.opentargets.org/graphql', - // window.configApiUrl ?? 'https://api.genetics.dev.opentargets.xyz/graphql', + apiUrl: window.configApiUrl ?? "https://api.genetics.opentargets.org/graphql", + // window.configApiUrl ?? 'https://api.genetics.dev.opentargets.xyz/graphql', googleTagManagerID: window.configGoogleTagManagerID ?? null, - helpdeskEmail: window.configHelpdeskEmail ?? 'helpdesk@opentargets.org', + helpdeskEmail: window.configHelpdeskEmail ?? "helpdesk@opentargets.org", profile: window.configProfile ?? {}, platformUrl: window.configPlatformUrl - ? window.configPlatformUrl.replace(/\/$/, '') - : 'https://platform.opentargets.org', + ? window.configPlatformUrl.replace(/\/$/, "") + : "https://platform.opentargets.org", }; export default config; diff --git a/apps/genetics/src/configuration.js b/apps/genetics/src/configuration.js index 61b00ba36..9565c1ff5 100644 --- a/apps/genetics/src/configuration.js +++ b/apps/genetics/src/configuration.js @@ -1,17 +1,17 @@ -import pkg from '../package.json'; +import pkg from "../package.json"; const defaults = { - REACT_APP_GRAPHQL_API_URL: 'https://genetics-api.opentargets.io', - REACT_APP_PLATFORM_URL: 'https://platform.opentargets.org/', - REACT_APP_GIT_REVISION: '2222ccc', - REACT_APP_CONTACT_URL: 'mailto:helpdesk@opentargets.org', + REACT_APP_GRAPHQL_API_URL: "https://genetics-api.opentargets.io", + REACT_APP_PLATFORM_URL: "https://platform.opentargets.org/", + REACT_APP_GIT_REVISION: "2222ccc", + REACT_APP_CONTACT_URL: "mailto:helpdesk@opentargets.org", }; const envVarOrDefault = envVarName => process.env[envVarName] ? process.env[envVarName] : defaults[envVarName]; export const packageVersion = pkg.version; -export const graphqlApiUrl = envVarOrDefault('REACT_APP_GRAPHQL_API_URL'); -export const platformUrl = envVarOrDefault('REACT_APP_PLATFORM_URL'); -export const gitRevision = envVarOrDefault('REACT_APP_GIT_REVISION'); -export const contactUrl = envVarOrDefault('REACT_APP_CONTACT_URL'); +export const graphqlApiUrl = envVarOrDefault("REACT_APP_GRAPHQL_API_URL"); +export const platformUrl = envVarOrDefault("REACT_APP_PLATFORM_URL"); +export const gitRevision = envVarOrDefault("REACT_APP_GIT_REVISION"); +export const contactUrl = envVarOrDefault("REACT_APP_CONTACT_URL"); diff --git a/apps/genetics/src/constants.js b/apps/genetics/src/constants.js index 99b32437d..a3ed7aeb3 100644 --- a/apps/genetics/src/constants.js +++ b/apps/genetics/src/constants.js @@ -1,46 +1,46 @@ -import { faBook, faEnvelope } from '@fortawesome/free-solid-svg-icons'; +import { faBook, faEnvelope } from "@fortawesome/free-solid-svg-icons"; import { faDiscourse, faTwitterSquare, faLinkedin, faGithubSquare, faYoutubeSquare, -} from '@fortawesome/free-brands-svg-icons'; +} from "@fortawesome/free-brands-svg-icons"; -import { contactUrl as contactUrlConfig } from './configuration'; -import config from './config'; +import { contactUrl as contactUrlConfig } from "./configuration"; +import config from "./config"; export const pvalThreshold = 4.94e-322; export const contactUrl = contactUrlConfig; -export const naLabel = 'N/A'; +export const naLabel = "N/A"; export const mainMenuItems = [ // Documentation { - name: 'Documentation', - url: 'https://genetics-docs.opentargets.org', + name: "Documentation", + url: "https://genetics-docs.opentargets.org", external: true, }, // Data downloads { - name: 'Data downloads', - url: 'https://genetics-docs.opentargets.org/data-access/data-download', + name: "Data downloads", + url: "https://genetics-docs.opentargets.org/data-access/data-download", external: true, }, // API // TODO: update config { - name: 'API', - url: '/api', + name: "API", + url: "/api", // url: config.apiUrl.split('/graphql')[0], external: false, }, // Community { - name: 'Community', - url: 'https://community.opentargets.org/', + name: "Community", + url: "https://community.opentargets.org/", external: true, }, ]; @@ -48,55 +48,55 @@ export const mainMenuItems = [ export const externalLinks = { about: [ { - label: 'Community forum', - url: 'https://community.opentargets.org/', + label: "Community forum", + url: "https://community.opentargets.org/", }, { - label: 'Privacy notice', - url: 'https://www.ebi.ac.uk/data-protection/privacy-notice/open-targets', + label: "Privacy notice", + url: "https://www.ebi.ac.uk/data-protection/privacy-notice/open-targets", }, { - label: 'Terms of use', + label: "Terms of use", url: `https://genetics-docs.opentargets.org/terms-of-use`, }, ], license: { - label: 'Open Targets Genetics', - url: 'https://genetics.opentargets.org/', + label: "Open Targets Genetics", + url: "https://genetics.opentargets.org/", }, network: [ - { label: 'Science', url: 'https://www.opentargets.org/science' }, - { label: 'Publications', url: 'https://www.opentargets.org/publications' }, - { label: 'Platform', url: 'https://platform.opentargets.org/' }, - { label: 'Jobs', url: 'https://www.opentargets.org/jobs' }, - { label: 'Blog', url: 'https://blog.opentargets.org' }, + { label: "Science", url: "https://www.opentargets.org/science" }, + { label: "Publications", url: "https://www.opentargets.org/publications" }, + { label: "Platform", url: "https://platform.opentargets.org/" }, + { label: "Jobs", url: "https://www.opentargets.org/jobs" }, + { label: "Blog", url: "https://blog.opentargets.org" }, ], partners: [ - { label: 'Bristol Myers Squibb', url: 'https://www.bms.com' }, - { label: 'EMBL-EBI', url: 'http://www.ebi.ac.uk' }, - { label: 'Genentech', url: 'https://www.gene.com' }, - { label: 'GSK', url: 'http://www.gsk.com' }, - { label: 'Pfizer', url: 'https://pfizer.com/' }, - { label: 'Sanofi', url: 'https://www.sanofi.com' }, - { label: 'Wellcome Sanger Institute', url: 'http://www.sanger.ac.uk' }, + { label: "Bristol Myers Squibb", url: "https://www.bms.com" }, + { label: "EMBL-EBI", url: "http://www.ebi.ac.uk" }, + { label: "Genentech", url: "https://www.gene.com" }, + { label: "GSK", url: "http://www.gsk.com" }, + { label: "Pfizer", url: "https://pfizer.com/" }, + { label: "Sanofi", url: "https://www.sanofi.com" }, + { label: "Wellcome Sanger Institute", url: "http://www.sanger.ac.uk" }, ], help: [ { - label: 'Documentation', + label: "Documentation", icon: faBook, - url: 'https://genetics-docs.opentargets.org', + url: "https://genetics-docs.opentargets.org", }, { - label: 'Community', + label: "Community", icon: faDiscourse, - url: 'https://community.opentargets.org', + url: "https://community.opentargets.org", external: true, - } + }, ], social: [ - { icon: faTwitterSquare, url: 'https://twitter.com/opentargets' }, - { icon: faLinkedin, url: 'https://www.linkedin.com/company/open-targets' }, - { icon: faYoutubeSquare, url: 'https://www.youtube.com/opentargets' }, - { icon: faGithubSquare, url: 'https://github.com/opentargets' }, + { icon: faTwitterSquare, url: "https://twitter.com/opentargets" }, + { icon: faLinkedin, url: "https://www.linkedin.com/company/open-targets" }, + { icon: faYoutubeSquare, url: "https://www.youtube.com/opentargets" }, + { icon: faGithubSquare, url: "https://github.com/opentargets" }, ], }; diff --git a/apps/genetics/src/hooks/useDebounce.js b/apps/genetics/src/hooks/useDebounce.js index 029c957dd..1ae649d9b 100644 --- a/apps/genetics/src/hooks/useDebounce.js +++ b/apps/genetics/src/hooks/useDebounce.js @@ -1,19 +1,16 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useState } from "react"; function useDebounce(value, delay) { const [debouncedValue, setDebouncedValue] = useState(value); - useEffect( - () => { - const handler = setTimeout(() => { - if (debouncedValue !== value) setDebouncedValue(value); - }, delay); - return () => { - clearTimeout(handler); - }; - }, - [value, delay, debouncedValue] - ); + useEffect(() => { + const handler = setTimeout(() => { + if (debouncedValue !== value) setDebouncedValue(value); + }, delay); + return () => { + clearTimeout(handler); + }; + }, [value, delay, debouncedValue]); return debouncedValue; } diff --git a/apps/genetics/src/logic/cytobandComparator.js b/apps/genetics/src/logic/cytobandComparator.js index ee39e7c2c..0a727eab5 100644 --- a/apps/genetics/src/logic/cytobandComparator.js +++ b/apps/genetics/src/logic/cytobandComparator.js @@ -1,4 +1,4 @@ -import chromosomeComparator from './chromosomeComparator'; +import chromosomeComparator from "./chromosomeComparator"; const cytobandComparator = (a, b) => { const { chromosome: chromosomeA, cytoband: cytobandA } = a; @@ -15,7 +15,7 @@ const cytobandComparator = (a, b) => { const armB = matchB[0]; if (armA !== armB) { - if (armA === 'p') return -1; + if (armA === "p") return -1; return 1; } diff --git a/apps/genetics/src/logic/locusChained.js b/apps/genetics/src/logic/locusChained.js index 0f4b11b3f..39fa9f3ce 100644 --- a/apps/genetics/src/logic/locusChained.js +++ b/apps/genetics/src/logic/locusChained.js @@ -29,15 +29,9 @@ const locusChained = ({ data, dataFiltered }) => { // build dicts const geneDict = genesFiltered.reduce(dictReducer(idField), {}); const tagVariantDict = tagVariantsFiltered.reduce(dictReducer(idField), {}); - const indexVariantDict = indexVariantsFiltered.reduce( - dictReducer(idField), - {} - ); + const indexVariantDict = indexVariantsFiltered.reduce(dictReducer(idField), {}); const studyDict = studiesFiltered.reduce(dictReducer(studyIdField), {}); - const geneTagVariantDict = geneTagVariantsFiltered.reduce( - dictReducer(gTvIdField), - {} - ); + const geneTagVariantDict = geneTagVariantsFiltered.reduce(dictReducer(gTvIdField), {}); const tagVariantIndexVariantStudyDict = tagVariantIndexVariantStudiesFiltered.reduce( dictReducer(tvIvSIdField), {} @@ -63,15 +57,10 @@ const locusChained = ({ data, dataFiltered }) => { ...d, chained: geneTagVariantDict[`${d.geneId}-${d.tagVariantId}`], })); - const tagVariantIndexVariantStudiesWithChained = tagVariantIndexVariantStudies.map( - d => ({ - ...d, - chained: - tagVariantIndexVariantStudyDict[ - `${d.tagVariantId}-${d.indexVariantId}-${d.studyId}` - ], - }) - ); + const tagVariantIndexVariantStudiesWithChained = tagVariantIndexVariantStudies.map(d => ({ + ...d, + chained: tagVariantIndexVariantStudyDict[`${d.tagVariantId}-${d.indexVariantId}-${d.studyId}`], + })); return { genes: genesWithChained, diff --git a/apps/genetics/src/logic/locusFilter.js b/apps/genetics/src/logic/locusFilter.js index 4484f1ce3..94413920c 100644 --- a/apps/genetics/src/logic/locusFilter.js +++ b/apps/genetics/src/logic/locusFilter.js @@ -52,37 +52,25 @@ const locusFilter = ({ acc[d.tagVariantId] = true; return acc; }, {}); - tagVariantsFiltered = tagVariantsFiltered.filter( - d => tagVariantsLeft[d.id] - ); + tagVariantsFiltered = tagVariantsFiltered.filter(d => tagVariantsLeft[d.id]); tagVariantIndexVariantStudiesFiltered = tagVariantIndexVariantStudiesFiltered.filter( d => tagVariantsLeft[d.tagVariantId] ); - const indexVariantsLeft = tagVariantIndexVariantStudiesFiltered.reduce( - (acc, d) => { - acc[d.indexVariantId] = true; - return acc; - }, - {} - ); - indexVariantsFiltered = indexVariantsFiltered.filter( - d => indexVariantsLeft[d.id] - ); - const studiesLeft = tagVariantIndexVariantStudiesFiltered.reduce( - (acc, d) => { - acc[d.studyId] = true; - return acc; - }, - {} - ); + const indexVariantsLeft = tagVariantIndexVariantStudiesFiltered.reduce((acc, d) => { + acc[d.indexVariantId] = true; + return acc; + }, {}); + indexVariantsFiltered = indexVariantsFiltered.filter(d => indexVariantsLeft[d.id]); + const studiesLeft = tagVariantIndexVariantStudiesFiltered.reduce((acc, d) => { + acc[d.studyId] = true; + return acc; + }, {}); studiesFiltered = studiesFiltered.filter(d => studiesLeft[d.studyId]); } // tag variants if (selectedTagVariants) { - tagVariantsFiltered = tagVariantsFiltered.filter( - d => selectedTagVariants.indexOf(d.id) >= 0 - ); + tagVariantsFiltered = tagVariantsFiltered.filter(d => selectedTagVariants.indexOf(d.id) >= 0); geneTagVariantsFiltered = geneTagVariantsFiltered.filter( d => selectedTagVariants.indexOf(d.tagVariantId) >= 0 ); @@ -94,23 +82,15 @@ const locusFilter = ({ tagVariantIndexVariantStudiesFiltered = tagVariantIndexVariantStudiesFiltered.filter( d => selectedTagVariants.indexOf(d.tagVariantId) >= 0 ); - const indexVariantsLeft = tagVariantIndexVariantStudiesFiltered.reduce( - (acc, d) => { - acc[d.indexVariantId] = true; - return acc; - }, - {} - ); - indexVariantsFiltered = indexVariantsFiltered.filter( - d => indexVariantsLeft[d.id] - ); - const studiesLeft = tagVariantIndexVariantStudiesFiltered.reduce( - (acc, d) => { - acc[d.studyId] = true; - return acc; - }, - {} - ); + const indexVariantsLeft = tagVariantIndexVariantStudiesFiltered.reduce((acc, d) => { + acc[d.indexVariantId] = true; + return acc; + }, {}); + indexVariantsFiltered = indexVariantsFiltered.filter(d => indexVariantsLeft[d.id]); + const studiesLeft = tagVariantIndexVariantStudiesFiltered.reduce((acc, d) => { + acc[d.studyId] = true; + return acc; + }, {}); studiesFiltered = studiesFiltered.filter(d => studiesLeft[d.studyId]); } @@ -122,27 +102,17 @@ const locusFilter = ({ tagVariantIndexVariantStudiesFiltered = tagVariantIndexVariantStudiesFiltered.filter( d => selectedIndexVariants.indexOf(d.indexVariantId) >= 0 ); - const tagVariantsLeft = tagVariantIndexVariantStudiesFiltered.reduce( - (acc, d) => { - acc[d.tagVariantId] = true; - return acc; - }, - {} - ); - tagVariantsFiltered = tagVariantsFiltered.filter( - d => tagVariantsLeft[d.id] - ); - const studiesLeft = tagVariantIndexVariantStudiesFiltered.reduce( - (acc, d) => { - acc[d.studyId] = true; - return acc; - }, - {} - ); + const tagVariantsLeft = tagVariantIndexVariantStudiesFiltered.reduce((acc, d) => { + acc[d.tagVariantId] = true; + return acc; + }, {}); + tagVariantsFiltered = tagVariantsFiltered.filter(d => tagVariantsLeft[d.id]); + const studiesLeft = tagVariantIndexVariantStudiesFiltered.reduce((acc, d) => { + acc[d.studyId] = true; + return acc; + }, {}); studiesFiltered = studiesFiltered.filter(d => studiesLeft[d.studyId]); - geneTagVariantsFiltered = geneTagVariantsFiltered.filter( - d => tagVariantsLeft[d.tagVariantId] - ); + geneTagVariantsFiltered = geneTagVariantsFiltered.filter(d => tagVariantsLeft[d.tagVariantId]); const genesLeft = geneTagVariantsFiltered.reduce((acc, d) => { acc[d.geneId] = true; return acc; @@ -152,35 +122,21 @@ const locusFilter = ({ // studies if (selectedStudies) { - studiesFiltered = studiesFiltered.filter( - d => selectedStudies.indexOf(d.studyId) >= 0 - ); + studiesFiltered = studiesFiltered.filter(d => selectedStudies.indexOf(d.studyId) >= 0); tagVariantIndexVariantStudiesFiltered = tagVariantIndexVariantStudiesFiltered.filter( d => selectedStudies.indexOf(d.studyId) >= 0 ); - const tagVariantsLeft = tagVariantIndexVariantStudiesFiltered.reduce( - (acc, d) => { - acc[d.tagVariantId] = true; - return acc; - }, - {} - ); - const indexVariantsLeft = tagVariantIndexVariantStudiesFiltered.reduce( - (acc, d) => { - acc[d.indexVariantId] = true; - return acc; - }, - {} - ); - tagVariantsFiltered = tagVariantsFiltered.filter( - d => tagVariantsLeft[d.id] - ); - indexVariantsFiltered = indexVariantsFiltered.filter( - d => indexVariantsLeft[d.id] - ); - geneTagVariantsFiltered = geneTagVariantsFiltered.filter( - d => tagVariantsLeft[d.tagVariantId] - ); + const tagVariantsLeft = tagVariantIndexVariantStudiesFiltered.reduce((acc, d) => { + acc[d.tagVariantId] = true; + return acc; + }, {}); + const indexVariantsLeft = tagVariantIndexVariantStudiesFiltered.reduce((acc, d) => { + acc[d.indexVariantId] = true; + return acc; + }, {}); + tagVariantsFiltered = tagVariantsFiltered.filter(d => tagVariantsLeft[d.id]); + indexVariantsFiltered = indexVariantsFiltered.filter(d => indexVariantsLeft[d.id]); + geneTagVariantsFiltered = geneTagVariantsFiltered.filter(d => tagVariantsLeft[d.tagVariantId]); const genesLeft = geneTagVariantsFiltered.reduce((acc, d) => { acc[d.geneId] = true; return acc; diff --git a/apps/genetics/src/logic/locusFinemapping.js b/apps/genetics/src/logic/locusFinemapping.js index 8e967c2ef..abd6e2554 100644 --- a/apps/genetics/src/logic/locusFinemapping.js +++ b/apps/genetics/src/logic/locusFinemapping.js @@ -8,13 +8,10 @@ const locusFinemapping = ({ data, finemappingOnly }) => { const tagVariantIndexVariantStudiesFinemapping = tagVariantIndexVariantStudies.filter( d => d.posteriorProbability ); - const tagVariantsFinemapping = tagVariantIndexVariantStudiesFinemapping.reduce( - (acc, d) => { - acc[d.tagVariantId] = true; - return acc; - }, - {} - ); + const tagVariantsFinemapping = tagVariantIndexVariantStudiesFinemapping.reduce((acc, d) => { + acc[d.tagVariantId] = true; + return acc; + }, {}); const geneTagVariantsFinemapping = geneTagVariants.filter( d => tagVariantsFinemapping[d.tagVariantId] ); diff --git a/apps/genetics/src/logic/locusScheme.js b/apps/genetics/src/logic/locusScheme.js index c1a9598cf..abfe62a51 100644 --- a/apps/genetics/src/logic/locusScheme.js +++ b/apps/genetics/src/logic/locusScheme.js @@ -1,12 +1,12 @@ -import _ from 'lodash'; +import _ from "lodash"; -import locusFilter from './locusFilter'; -import locusSelected from './locusSelected'; -import locusTransform from './locusTransform'; -import locusChained from './locusChained'; -import locusFinemapping from './locusFinemapping'; -import locusLookups from './locusLookups'; -import locusTable from './locusTable'; +import locusFilter from "./locusFilter"; +import locusSelected from "./locusSelected"; +import locusTransform from "./locusTransform"; +import locusChained from "./locusChained"; +import locusFinemapping from "./locusFinemapping"; +import locusLookups from "./locusLookups"; +import locusTable from "./locusTable"; export const LOCUS_SCHEME = { CHAINED: 1, @@ -37,13 +37,9 @@ const geneTagVariantComparator = (a, b) => { const tagVariantIndexVariantStudyComparator = (a, b) => { // render by ordering (chained, fine-mapping, r2) const scoreA = - (a.chained ? 8 : 4) + - (a.posteriorProbability ? 1 + a.posteriorProbability : 0) + - a.r2; + (a.chained ? 8 : 4) + (a.posteriorProbability ? 1 + a.posteriorProbability : 0) + a.r2; const scoreB = - (b.chained ? 8 : 4) + - (b.posteriorProbability ? 1 + b.posteriorProbability : 0) + - b.r2; + (b.chained ? 8 : 4) + (b.posteriorProbability ? 1 + b.posteriorProbability : 0) + b.r2; return scoreA - scoreB; }; @@ -120,29 +116,15 @@ const locusScheme = ({ } = chained; const entities = { - genes: _.sortBy(genes, [d => !d.selected, d => !d.chained, 'symbol']), + genes: _.sortBy(genes, [d => !d.selected, d => !d.chained, "symbol"]), tagVariants: tagVariants, - indexVariants: _.sortBy(indexVariants, [ - d => !d.selected, - d => !d.chained, - - 'id', - ]), - studies: _.sortBy(studies, [ - d => !d.selected, - d => !d.chained, - 'traitReported', - 'pubAuthor', - ]), + indexVariants: _.sortBy(indexVariants, [d => !d.selected, d => !d.chained, "id"]), + studies: _.sortBy(studies, [d => !d.selected, d => !d.chained, "traitReported", "pubAuthor"]), }; const genesFiltered = genes.filter(d => d.chained); - const tagVariantsFiltered = tagVariants - .filter(d => d.chained) - .sort(variantComparator); - const indexVariantsFiltered = indexVariants - .filter(d => d.chained) - .sort(variantComparator); + const tagVariantsFiltered = tagVariants.filter(d => d.chained).sort(variantComparator); + const indexVariantsFiltered = indexVariants.filter(d => d.chained).sort(variantComparator); const studiesFiltered = studies.filter(d => d.chained); const geneTagVariantsFiltered = geneTagVariants .filter(d => d.chained) @@ -155,8 +137,7 @@ const locusScheme = ({ transformed.geneTagVariants.length === 0 && transformed.tagVariantIndexVariantStudies.length === 0; const isEmptyFiltered = - filtered.geneTagVariants.length === 0 && - filtered.tagVariantIndexVariantStudies.length === 0; + filtered.geneTagVariants.length === 0 && filtered.tagVariantIndexVariantStudies.length === 0; const rows = locusTable( { @@ -184,9 +165,7 @@ const locusScheme = ({ case LOCUS_SCHEME.ALL: const tagVariantsSorted = tagVariants.sort(variantComparator); const indexVariantsSorted = indexVariants.sort(variantComparator); - const geneTagVariantsSorted = geneTagVariants.sort( - geneTagVariantComparator - ); + const geneTagVariantsSorted = geneTagVariants.sort(geneTagVariantComparator); const tagVariantIndexVariantStudiesSorted = tagVariantIndexVariantStudies.sort( tagVariantIndexVariantStudyComparator ); diff --git a/apps/genetics/src/logic/locusTable.js b/apps/genetics/src/logic/locusTable.js index 52ea21e56..ad1f514eb 100644 --- a/apps/genetics/src/logic/locusTable.js +++ b/apps/genetics/src/logic/locusTable.js @@ -1,12 +1,5 @@ const locusTable = ( - { - genes, - tagVariants, - indexVariants, - studies, - geneTagVariants, - tagVariantIndexVariantStudies, - }, + { genes, tagVariants, indexVariants, studies, geneTagVariants, tagVariantIndexVariantStudies }, lookups ) => { const { geneDict, tagVariantDict, indexVariantDict, studyDict } = lookups; diff --git a/apps/genetics/src/logic/locusTransform.js b/apps/genetics/src/logic/locusTransform.js index 28c7580a6..d7f3d6efb 100644 --- a/apps/genetics/src/logic/locusTransform.js +++ b/apps/genetics/src/logic/locusTransform.js @@ -1,10 +1,5 @@ function locusTransform({ data, lookups }) { - const { - genes, - geneTagVariants, - tagVariantIndexVariantStudies, - ...rest - } = data; + const { genes, geneTagVariants, tagVariantIndexVariantStudies, ...rest } = data; const { geneDict, tagVariantDict, indexVariantDict, studyDict } = lookups; // gene exons come as flat list, rendering expects list of pairs @@ -26,19 +21,15 @@ function locusTransform({ data, lookups }) { })); // tagVariantIndexVariantStudies come with ids only, but need position info for tagVariant and indexVariant - const tagVariantIndexVariantStudiesWithPosition = tagVariantIndexVariantStudies.map( - d => ({ - ...d, - tagVariantPosition: tagVariantDict[d.tagVariantId].position, - indexVariantPosition: indexVariantDict[d.indexVariantId].position, - traitReported: studyDict[d.studyId].traitReported, - }) - ); + const tagVariantIndexVariantStudiesWithPosition = tagVariantIndexVariantStudies.map(d => ({ + ...d, + tagVariantPosition: tagVariantDict[d.tagVariantId].position, + indexVariantPosition: indexVariantDict[d.indexVariantId].position, + traitReported: studyDict[d.studyId].traitReported, + })); console.info( - `Rendering ${geneTagVariants.length} (G, TV)s and ${ - tagVariantIndexVariantStudies.length - } (TV, IV, S)s` + `Rendering ${geneTagVariants.length} (G, TV)s and ${tagVariantIndexVariantStudies.length} (TV, IV, S)s` ); return { diff --git a/apps/genetics/src/logic/variantIdComparator.js b/apps/genetics/src/logic/variantIdComparator.js index c7dd43bf2..cc7bda404 100644 --- a/apps/genetics/src/logic/variantIdComparator.js +++ b/apps/genetics/src/logic/variantIdComparator.js @@ -1,4 +1,4 @@ -import chromosomeComparator from './chromosomeComparator'; +import chromosomeComparator from "./chromosomeComparator"; const variantIdComparator = (a, b) => { const { chromosome: aChrom, position: aPos } = a; diff --git a/apps/genetics/src/ot-ui-components/helpers/downloadTable.js b/apps/genetics/src/ot-ui-components/helpers/downloadTable.js index 3933ca4db..ba115b9e3 100644 --- a/apps/genetics/src/ot-ui-components/helpers/downloadTable.js +++ b/apps/genetics/src/ot-ui-components/helpers/downloadTable.js @@ -1,17 +1,16 @@ -import FileSaver from 'file-saver'; +import FileSaver from "file-saver"; -const UNEXPECTED_FORMAT = - 'Unexpected format. Supported options are csv, tsv and json.'; +const UNEXPECTED_FORMAT = "Unexpected format. Supported options are csv, tsv and json."; const pick = (object, keys) => { - return keys.reduce(function(o, k) { + return keys.reduce(function (o, k) { // take into account optional export() function, which takes precedence as per other download formats o[k.id] = k.export ? k.export(object) : object[k.id]; return o; }, {}); }; -const quoteIfString = d => (typeof d === 'string' ? `"${d}"` : d); +const quoteIfString = d => (typeof d === "string" ? `"${d}"` : d); const asJSONString = ({ rows, headerMap }) => { // use the full headerMap which contain optional export() function for each header @@ -20,17 +19,13 @@ const asJSONString = ({ rows, headerMap }) => { }; const asCSVString = ({ rows, headerMap }) => { - const separator = ','; - const lineSeparator = '\n'; - const headersString = headerMap - .map(d => quoteIfString(d.label)) - .join(separator); + const separator = ","; + const lineSeparator = "\n"; + const headersString = headerMap.map(d => quoteIfString(d.label)).join(separator); const rowsArray = rows.map(row => { return headerMap .map(header => { - return quoteIfString( - header.export ? header.export(row) : row[header.id] - ); + return quoteIfString(header.export ? header.export(row) : row[header.id]); }) .join(separator); }); @@ -38,8 +33,8 @@ const asCSVString = ({ rows, headerMap }) => { }; const asTSVString = ({ rows, headerMap }) => { - const separator = '\t'; - const lineSeparator = '\n'; + const separator = "\t"; + const lineSeparator = "\n"; const headersString = headerMap.map(d => d.label).join(separator); const rowsArray = rows.map(row => { return headerMap @@ -53,11 +48,11 @@ const asTSVString = ({ rows, headerMap }) => { const asContentString = ({ rows, headerMap, format }) => { switch (format) { - case 'json': + case "json": return asJSONString({ rows, headerMap }); - case 'csv': + case "csv": return asCSVString({ rows, headerMap }); - case 'tsv': + case "tsv": return asTSVString({ rows, headerMap }); default: throw Error(UNEXPECTED_FORMAT); @@ -66,12 +61,12 @@ const asContentString = ({ rows, headerMap, format }) => { const asMimeType = format => { switch (format) { - case 'json': - return 'application/json;charset=utf-8'; - case 'csv': - return 'text/csv;charset=utf-8'; - case 'tsv': - return 'text/tab-separated-values;charset=utf-8'; + case "json": + return "application/json;charset=utf-8"; + case "csv": + return "text/csv;charset=utf-8"; + case "tsv": + return "text/tab-separated-values;charset=utf-8"; default: throw Error(UNEXPECTED_FORMAT); } @@ -79,7 +74,7 @@ const asMimeType = format => { const downloadTable = ({ rows, headerMap, format, filenameStem }) => { if (!rows || rows.length === 0) { - console.info('Nothing to download.'); + console.info("Nothing to download."); return; } diff --git a/apps/genetics/src/ot-ui-components/icons/setupIcons.js b/apps/genetics/src/ot-ui-components/icons/setupIcons.js index d445da36a..608b15240 100644 --- a/apps/genetics/src/ot-ui-components/icons/setupIcons.js +++ b/apps/genetics/src/ot-ui-components/icons/setupIcons.js @@ -1,9 +1,9 @@ -import { loadCSS } from 'fg-loadcss/src/loadCSS'; +import { loadCSS } from "fg-loadcss/src/loadCSS"; const setupIcons = () => { loadCSS( - 'https://use.fontawesome.com/releases/v5.1.0/css/all.css', - document.querySelector('#insertion-point-jss') + "https://use.fontawesome.com/releases/v5.1.0/css/all.css", + document.querySelector("#insertion-point-jss") ); }; diff --git a/apps/genetics/src/ot-ui-components/index.js b/apps/genetics/src/ot-ui-components/index.js index 7cc9d8a2d..75a3a6de1 100644 --- a/apps/genetics/src/ot-ui-components/index.js +++ b/apps/genetics/src/ot-ui-components/index.js @@ -1,32 +1,32 @@ -export { default as Link } from './components/Link'; -export { default as Page } from './components/Page'; -export { default as Tabs } from '@material-ui/core/Tabs'; -export { default as Tab } from '@material-ui/core/Tab'; +export { default as Link } from "./components/Link"; +export { default as Page } from "./components/Page"; +export { default as Tabs } from "@material-ui/core/Tabs"; +export { default as Tab } from "@material-ui/core/Tab"; -export { default as Splash } from './components/Splash'; -export { default as Autocomplete } from './components/search/Autocomplete'; -export { default as downloadSVG } from './helpers/downloadSVG'; -export { default as downloadPNG } from './helpers/downloadPNG'; -export { default as downloadTable } from './helpers/downloadTable'; -export { default as OtTable } from './components/OtTable'; -export { default as OtTableRF } from './components/OtTableRF'; -export { default as DataDownloader } from './components/DataDownloader'; -export { default as commaSeparate } from './helpers/commaSeparate'; -export { default as significantFigures } from './helpers/significantFigures'; -export { default as ListTooltip } from './components/ListTooltip'; -export { default as DownloadSVGPlot } from './components/DownloadSVGPlot'; -export { default as ModelSchematic } from './components/ModelSchematic'; -export { default as SectionHeading } from './components/SectionHeading'; -export { default as Button } from './components/Button'; -export { default as PlotContainer } from './components/PlotContainer'; -export { default as PlotContainerSection } from './components/PlotContainerSection'; -export { default as DataCircle } from './components/DataCircle'; -export { default as Tooltip } from '@material-ui/core/Tooltip'; -export { default as Typography } from '@material-ui/core/Typography'; -export { default as OverviewIcon } from './icons/OverviewIcon'; -export { default as DrugsIcon } from './icons/DrugsIcon'; -export { default as MouseIcon } from './icons/MouseIcon'; -export { default as PathwaysIcon } from './icons/PathwaysIcon'; -export { default as ExpressionIcon } from './icons/ExpressionIcon'; -export { default as LocusIcon } from './icons/LocusIcon'; -export { default as OverlapIcon } from './icons/OverlapIcon'; +export { default as Splash } from "./components/Splash"; +export { default as Autocomplete } from "./components/search/Autocomplete"; +export { default as downloadSVG } from "./helpers/downloadSVG"; +export { default as downloadPNG } from "./helpers/downloadPNG"; +export { default as downloadTable } from "./helpers/downloadTable"; +export { default as OtTable } from "./components/OtTable"; +export { default as OtTableRF } from "./components/OtTableRF"; +export { default as DataDownloader } from "./components/DataDownloader"; +export { default as commaSeparate } from "./helpers/commaSeparate"; +export { default as significantFigures } from "./helpers/significantFigures"; +export { default as ListTooltip } from "./components/ListTooltip"; +export { default as DownloadSVGPlot } from "./components/DownloadSVGPlot"; +export { default as ModelSchematic } from "./components/ModelSchematic"; +export { default as SectionHeading } from "./components/SectionHeading"; +export { default as Button } from "./components/Button"; +export { default as PlotContainer } from "./components/PlotContainer"; +export { default as PlotContainerSection } from "./components/PlotContainerSection"; +export { default as DataCircle } from "./components/DataCircle"; +export { default as Tooltip } from "@material-ui/core/Tooltip"; +export { default as Typography } from "@material-ui/core/Typography"; +export { default as OverviewIcon } from "./icons/OverviewIcon"; +export { default as DrugsIcon } from "./icons/DrugsIcon"; +export { default as MouseIcon } from "./icons/MouseIcon"; +export { default as PathwaysIcon } from "./icons/PathwaysIcon"; +export { default as ExpressionIcon } from "./icons/ExpressionIcon"; +export { default as LocusIcon } from "./icons/LocusIcon"; +export { default as OverlapIcon } from "./icons/OverlapIcon"; diff --git a/apps/genetics/src/pages/APIPage/index.js b/apps/genetics/src/pages/APIPage/index.js index cb0fed650..57df657bf 100644 --- a/apps/genetics/src/pages/APIPage/index.js +++ b/apps/genetics/src/pages/APIPage/index.js @@ -1 +1 @@ -export { default } from './APIPageWrapper.jsx'; +export { default } from "./APIPageWrapper.jsx"; diff --git a/apps/genetics/src/pages/GenePage/index.js b/apps/genetics/src/pages/GenePage/index.js index 8f9a1374b..a1bfc19b9 100644 --- a/apps/genetics/src/pages/GenePage/index.js +++ b/apps/genetics/src/pages/GenePage/index.js @@ -1 +1 @@ -export { default } from './GenePage'; +export { default } from "./GenePage"; diff --git a/apps/genetics/src/pages/HomePage/index.js b/apps/genetics/src/pages/HomePage/index.js index bf97a3e7d..cbd475008 100644 --- a/apps/genetics/src/pages/HomePage/index.js +++ b/apps/genetics/src/pages/HomePage/index.js @@ -1 +1 @@ -export { default } from './HomePage'; +export { default } from "./HomePage"; diff --git a/apps/genetics/src/pages/StudyLocusPage/index.js b/apps/genetics/src/pages/StudyLocusPage/index.js index 9bc2ecd76..5b5298011 100644 --- a/apps/genetics/src/pages/StudyLocusPage/index.js +++ b/apps/genetics/src/pages/StudyLocusPage/index.js @@ -1 +1 @@ -export { default } from './StudyLocusPage'; +export { default } from "./StudyLocusPage"; diff --git a/apps/genetics/src/pages/StudyPage/index.js b/apps/genetics/src/pages/StudyPage/index.js index 155bfe7f2..e7341980e 100644 --- a/apps/genetics/src/pages/StudyPage/index.js +++ b/apps/genetics/src/pages/StudyPage/index.js @@ -1 +1 @@ -export { default } from './StudyPage'; +export { default } from "./StudyPage"; diff --git a/apps/genetics/src/pages/VariantPage/index.js b/apps/genetics/src/pages/VariantPage/index.js index 42479602b..88b3b52cc 100644 --- a/apps/genetics/src/pages/VariantPage/index.js +++ b/apps/genetics/src/pages/VariantPage/index.js @@ -1 +1 @@ -export { default } from './VariantPage'; +export { default } from "./VariantPage"; diff --git a/apps/genetics/src/registerServiceWorker.js b/apps/genetics/src/registerServiceWorker.js index a3e6c0cfc..0a4219941 100644 --- a/apps/genetics/src/registerServiceWorker.js +++ b/apps/genetics/src/registerServiceWorker.js @@ -9,17 +9,15 @@ // This link also includes instructions on opting out of this behavior. const isLocalhost = Boolean( - window.location.hostname === 'localhost' || + window.location.hostname === "localhost" || // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || + window.location.hostname === "[::1]" || // 127.0.0.1/8 is considered localhost for IPv4. - window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ - ) + window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/) ); export default function register() { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) { // The URL constructor is available in all browsers that support SW. const publicUrl = new URL(process.env.PUBLIC_URL, window.location); if (publicUrl.origin !== window.location.origin) { @@ -29,7 +27,7 @@ export default function register() { return; } - window.addEventListener('load', () => { + window.addEventListener("load", () => { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; if (isLocalhost) { @@ -40,8 +38,8 @@ export default function register() { // service worker/PWA documentation. navigator.serviceWorker.ready.then(() => { console.log( - 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://goo.gl/SC7cgQ' + "This web app is being served cache-first by a service " + + "worker. To learn more, visit https://goo.gl/SC7cgQ" ); }); } else { @@ -59,25 +57,25 @@ function registerValidSW(swUrl) { registration.onupdatefound = () => { const installingWorker = registration.installing; installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { + if (installingWorker.state === "installed") { if (navigator.serviceWorker.controller) { // At this point, the old content will have been purged and // the fresh content will have been added to the cache. // It's the perfect time to display a "New content is // available; please refresh." message in your web app. - console.log('New content is available; please refresh.'); + console.log("New content is available; please refresh."); } else { // At this point, everything has been precached. // It's the perfect time to display a // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); + console.log("Content is cached for offline use."); } } }; }; }) .catch(error => { - console.error('Error during service worker registration:', error); + console.error("Error during service worker registration:", error); }); } @@ -88,7 +86,7 @@ function checkValidServiceWorker(swUrl) { // Ensure service worker exists, and that we really are getting a JS file. if ( response.status === 404 || - response.headers.get('content-type').indexOf('javascript') === -1 + response.headers.get("content-type").indexOf("javascript") === -1 ) { // No service worker found. Probably a different app. Reload the page. navigator.serviceWorker.ready.then(registration => { @@ -102,14 +100,12 @@ function checkValidServiceWorker(swUrl) { } }) .catch(() => { - console.log( - 'No internet connection found. App is running in offline mode.' - ); + console.log("No internet connection found. App is running in offline mode."); }); } export function unregister() { - if ('serviceWorker' in navigator) { + if ("serviceWorker" in navigator) { navigator.serviceWorker.ready.then(registration => { registration.unregister(); }); diff --git a/apps/genetics/src/sections/api-page/Header/index.js b/apps/genetics/src/sections/api-page/Header/index.js index d15b27e03..f16255b19 100644 --- a/apps/genetics/src/sections/api-page/Header/index.js +++ b/apps/genetics/src/sections/api-page/Header/index.js @@ -1 +1 @@ -export { default } from './APIHeader'; +export { default } from "./APIHeader"; diff --git a/apps/genetics/src/sections/api-page/SampleQueries/index.js b/apps/genetics/src/sections/api-page/SampleQueries/index.js index e9c13c289..bb6be7b36 100644 --- a/apps/genetics/src/sections/api-page/SampleQueries/index.js +++ b/apps/genetics/src/sections/api-page/SampleQueries/index.js @@ -1 +1 @@ -export { default } from './SampleQueries'; +export { default } from "./SampleQueries"; diff --git a/apps/genetics/src/sections/gene/ColocAnalysis/index.js b/apps/genetics/src/sections/gene/ColocAnalysis/index.js index 05d820f29..a8aee95bb 100644 --- a/apps/genetics/src/sections/gene/ColocAnalysis/index.js +++ b/apps/genetics/src/sections/gene/ColocAnalysis/index.js @@ -1 +1 @@ -export { default } from './ColocAnalysis'; +export { default } from "./ColocAnalysis"; diff --git a/apps/genetics/src/sections/gene/L2GPipeline/index.js b/apps/genetics/src/sections/gene/L2GPipeline/index.js index 394ea17cc..575fd7dcd 100644 --- a/apps/genetics/src/sections/gene/L2GPipeline/index.js +++ b/apps/genetics/src/sections/gene/L2GPipeline/index.js @@ -1 +1 @@ -export { default } from './L2GPipeline'; \ No newline at end of file +export { default } from "./L2GPipeline"; diff --git a/apps/genetics/src/sections/study/Summary/index.js b/apps/genetics/src/sections/study/Summary/index.js index 813846eea..25a9e3000 100644 --- a/apps/genetics/src/sections/study/Summary/index.js +++ b/apps/genetics/src/sections/study/Summary/index.js @@ -1 +1 @@ -export { default } from './Summary'; +export { default } from "./Summary"; diff --git a/apps/genetics/src/sections/studyLocus/ColocGWASTable/index.js b/apps/genetics/src/sections/studyLocus/ColocGWASTable/index.js index 9441e8d12..31201bea0 100644 --- a/apps/genetics/src/sections/studyLocus/ColocGWASTable/index.js +++ b/apps/genetics/src/sections/studyLocus/ColocGWASTable/index.js @@ -1 +1 @@ -export { default } from './ColocGWASTable'; +export { default } from "./ColocGWASTable"; diff --git a/apps/genetics/src/sections/studyLocus/ColocL2GTable/index.js b/apps/genetics/src/sections/studyLocus/ColocL2GTable/index.js index 84f9ad7a6..8da34bb3b 100644 --- a/apps/genetics/src/sections/studyLocus/ColocL2GTable/index.js +++ b/apps/genetics/src/sections/studyLocus/ColocL2GTable/index.js @@ -1 +1 @@ -export { default } from './ColocL2GTable'; +export { default } from "./ColocL2GTable"; diff --git a/apps/genetics/src/sections/studyLocus/CredibleSetsGroup/index.js b/apps/genetics/src/sections/studyLocus/CredibleSetsGroup/index.js index 29c1cbcbb..6f859f4f2 100644 --- a/apps/genetics/src/sections/studyLocus/CredibleSetsGroup/index.js +++ b/apps/genetics/src/sections/studyLocus/CredibleSetsGroup/index.js @@ -1 +1 @@ -export { default } from './CredibleSetsGroup'; +export { default } from "./CredibleSetsGroup"; diff --git a/apps/genetics/src/sections/studyLocus/CredibleSetsGwasQtlList/index.js b/apps/genetics/src/sections/studyLocus/CredibleSetsGwasQtlList/index.js index 84557f0bd..f62deb100 100644 --- a/apps/genetics/src/sections/studyLocus/CredibleSetsGwasQtlList/index.js +++ b/apps/genetics/src/sections/studyLocus/CredibleSetsGwasQtlList/index.js @@ -1 +1 @@ -export { default } from './CredibleSetsGwasQtlList'; +export { default } from "./CredibleSetsGwasQtlList"; diff --git a/apps/genetics/src/sections/studyLocus/GenePrioritisationTabs/index.js b/apps/genetics/src/sections/studyLocus/GenePrioritisationTabs/index.js index 0b1d4a643..2746237e9 100644 --- a/apps/genetics/src/sections/studyLocus/GenePrioritisationTabs/index.js +++ b/apps/genetics/src/sections/studyLocus/GenePrioritisationTabs/index.js @@ -1 +1 @@ -export { default } from './GenePrioritisationTabs'; +export { default } from "./GenePrioritisationTabs"; diff --git a/apps/genetics/src/sections/studyLocus/Genes/index.js b/apps/genetics/src/sections/studyLocus/Genes/index.js index 79f128152..635bdf57d 100644 --- a/apps/genetics/src/sections/studyLocus/Genes/index.js +++ b/apps/genetics/src/sections/studyLocus/Genes/index.js @@ -1 +1 @@ -export { default } from './StudyLocusGenes'; +export { default } from "./StudyLocusGenes"; diff --git a/apps/genetics/src/sections/studyLocus/Summary/index.js b/apps/genetics/src/sections/studyLocus/Summary/index.js index 813846eea..25a9e3000 100644 --- a/apps/genetics/src/sections/studyLocus/Summary/index.js +++ b/apps/genetics/src/sections/studyLocus/Summary/index.js @@ -1 +1 @@ -export { default } from './Summary'; +export { default } from "./Summary"; diff --git a/apps/genetics/src/sections/variant/AssociatedGenes/index.js b/apps/genetics/src/sections/variant/AssociatedGenes/index.js index 2b327e9c8..311cc4049 100644 --- a/apps/genetics/src/sections/variant/AssociatedGenes/index.js +++ b/apps/genetics/src/sections/variant/AssociatedGenes/index.js @@ -1,9 +1,9 @@ -import AssociatedGenes from './AssociatedGenes'; +import AssociatedGenes from "./AssociatedGenes"; -export { TabOverview } from './TabOverview'; -export { GenesTabs } from './GenesTabs'; -export { TabIssues } from './TabIssues'; +export { TabOverview } from "./TabOverview"; +export { GenesTabs } from "./GenesTabs"; +export { TabIssues } from "./TabIssues"; -export { useAssociatedGenes } from './useAssociatedGenes'; +export { useAssociatedGenes } from "./useAssociatedGenes"; export default AssociatedGenes; diff --git a/apps/genetics/src/sections/variant/AssociatedGenes/useAssociatedGenes.js b/apps/genetics/src/sections/variant/AssociatedGenes/useAssociatedGenes.js index f9ba5b4e8..4f162a99a 100644 --- a/apps/genetics/src/sections/variant/AssociatedGenes/useAssociatedGenes.js +++ b/apps/genetics/src/sections/variant/AssociatedGenes/useAssociatedGenes.js @@ -1,6 +1,6 @@ -import { useState } from 'react'; -import { OVERVIEW, getDataAll, getDataAllDownload } from './utils'; -import { getColumnsAll } from './Renderes'; +import { useState } from "react"; +import { OVERVIEW, getDataAll, getDataAllDownload } from "./utils"; +import { getColumnsAll } from "./Renderes"; export const useAssociatedGenes = (genesForVariantSchema, genesForVariant) => { const [value, setValue] = useState(OVERVIEW); @@ -10,21 +10,21 @@ export const useAssociatedGenes = (genesForVariantSchema, genesForVariant) => { }; const schemas = [ - ...genesForVariantSchema.distances.map((distanceSchema) => ({ + ...genesForVariantSchema.distances.map(distanceSchema => ({ ...distanceSchema, - type: 'distances', + type: "distances", })), - ...genesForVariantSchema.qtls.map((qtlSchema) => ({ + ...genesForVariantSchema.qtls.map(qtlSchema => ({ ...qtlSchema, - type: 'qtls', + type: "qtls", })), - ...genesForVariantSchema.intervals.map((intervalSchema) => ({ + ...genesForVariantSchema.intervals.map(intervalSchema => ({ ...intervalSchema, - type: 'intervals', + type: "intervals", })), - ...genesForVariantSchema.functionalPredictions.map((fpSchema) => ({ + ...genesForVariantSchema.functionalPredictions.map(fpSchema => ({ ...fpSchema, - type: 'functionalPredictions', + type: "functionalPredictions", })), ]; diff --git a/apps/genetics/src/sections/variant/AssociatedGenes/utils.js b/apps/genetics/src/sections/variant/AssociatedGenes/utils.js index f1d4fc803..08690d354 100644 --- a/apps/genetics/src/sections/variant/AssociatedGenes/utils.js +++ b/apps/genetics/src/sections/variant/AssociatedGenes/utils.js @@ -1,12 +1,12 @@ -import { scaleSqrt } from 'd3'; +import { scaleSqrt } from "d3"; -export const OVERVIEW = 'overview'; +export const OVERVIEW = "overview"; export const radiusScale = scaleSqrt().domain([0, 1]).range([0, 6]); -export const getDataAll = (genesForVariant) => { +export const getDataAll = genesForVariant => { const data = []; - genesForVariant.forEach((item) => { + genesForVariant.forEach(item => { const row = { geneId: item.gene.id, geneSymbol: item.gene.symbol, @@ -14,18 +14,18 @@ export const getDataAll = (genesForVariant) => { }; // for distances we want to use the first element of // the distances array - item.distances.forEach((distance) => { + item.distances.forEach(distance => { row[distance.sourceId] = item.distances[0]; }); - item.qtls.forEach((qtl) => { + item.qtls.forEach(qtl => { row[qtl.sourceId] = qtl.aggregatedScore; }); - item.intervals.forEach((interval) => { + item.intervals.forEach(interval => { row[interval.sourceId] = interval.aggregatedScore; }); // for functionalPredictions we want to use the first element of // the functionalPredictions array - item.functionalPredictions.forEach((fp) => { + item.functionalPredictions.forEach(fp => { row[fp.sourceId] = item.functionalPredictions[0]; }); data.push(row); @@ -33,8 +33,8 @@ export const getDataAll = (genesForVariant) => { return data; }; -export const getDataAllDownload = (tableData) => { - return tableData.map((row) => { +export const getDataAllDownload = tableData => { + return tableData.map(row => { const newRow = { ...row }; if (row.canonical_tss) { newRow.canonical_tss = row.canonical_tss.tissues[0].distance; @@ -47,5 +47,5 @@ export const getDataAllDownload = (tableData) => { }; export const isDisabledColumn = (allData, sourceId) => { - return !allData.some((d) => d[sourceId]); + return !allData.some(d => d[sourceId]); }; diff --git a/apps/genetics/src/sections/variant/PheWASSection/index.js b/apps/genetics/src/sections/variant/PheWASSection/index.js index 13282e4c6..69ac2eb02 100644 --- a/apps/genetics/src/sections/variant/PheWASSection/index.js +++ b/apps/genetics/src/sections/variant/PheWASSection/index.js @@ -1 +1 @@ -export { default } from './PheWASSection'; +export { default } from "./PheWASSection"; diff --git a/apps/genetics/src/setupTests.js b/apps/genetics/src/setupTests.js index 82edfc9e5..6f413a40b 100644 --- a/apps/genetics/src/setupTests.js +++ b/apps/genetics/src/setupTests.js @@ -1,4 +1,4 @@ -import { configure } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; +import { configure } from "enzyme"; +import Adapter from "enzyme-adapter-react-16"; configure({ adapter: new Adapter() }); diff --git a/apps/genetics/src/utils/gene.js b/apps/genetics/src/utils/gene.js index 7d6dca76c..9a7cc5ffb 100644 --- a/apps/genetics/src/utils/gene.js +++ b/apps/genetics/src/utils/gene.js @@ -1,6 +1,6 @@ -import queryString from 'query-string'; -import { commaSeparate } from '../ot-ui-components'; -import { chromosomesWithCumulativeLengths } from './chromosome'; +import queryString from "query-string"; +import { commaSeparate } from "../ot-ui-components"; +import { chromosomesWithCumulativeLengths } from "./chromosome"; const chromosomeDict = chromosomesWithCumulativeLengths.reduce((acc, d) => { acc[d.name] = d; @@ -9,9 +9,9 @@ const chromosomeDict = chromosomesWithCumulativeLengths.reduce((acc, d) => { const mb = 1000000; -export function parseGeneDescription(description = '') { +export function parseGeneDescription(description = "") { if (!description) return null; - const brIndex = description.indexOf('['); + const brIndex = description.indexOf("["); return description.slice(0, brIndex); } @@ -20,28 +20,20 @@ export function parseGeneLocation(chromosome, start, end) { return `${chromosome}:${commaSeparate(start)}-${commaSeparate(end)}`; } -export function parseGeneBioType(bioType = '') { +export function parseGeneBioType(bioType = "") { if (!bioType) return null; - return bioType.replaceAll('_', ' '); + return bioType.replaceAll("_", " "); } export function getGeneLocusURL(locusParams) { - const { - start: startParam, - end: endParam, - chromosome, - selectedGene, - } = locusParams; + const { start: startParam, end: endParam, chromosome, selectedGene } = locusParams; if (!chromosome) return null; const rounded = Math.round((startParam + endParam) / 2); const chromosomeObj = chromosomeDict[chromosome]; const start = rounded > mb ? rounded - mb : 0; - const end = - rounded <= chromosomeObj.length - mb - ? rounded + mb - : chromosomeObj.length - 1; + const end = rounded <= chromosomeObj.length - mb ? rounded + mb : chromosomeObj.length - 1; const params = { chromosome, start, end, selectedGenes: selectedGene }; diff --git a/apps/genetics/src/utils/index.js b/apps/genetics/src/utils/index.js index a1d12af50..3da09ffdf 100644 --- a/apps/genetics/src/utils/index.js +++ b/apps/genetics/src/utils/index.js @@ -1,11 +1,11 @@ // Common helpers -export * from './common'; +export * from "./common"; // chromosome helpers -export * from './chromosome'; +export * from "./chromosome"; // Pages helpers -export * from './gene'; -export * from './variant'; -export * from './study'; -export * from './studyLocus'; +export * from "./gene"; +export * from "./variant"; +export * from "./study"; +export * from "./studyLocus"; diff --git a/apps/genetics/src/utils/studyLocus.js b/apps/genetics/src/utils/studyLocus.js index f686dcbf6..adeff09a0 100644 --- a/apps/genetics/src/utils/studyLocus.js +++ b/apps/genetics/src/utils/studyLocus.js @@ -1,6 +1,5 @@ -import { generateComparator, sanitize } from './common'; -import gql from 'graphql-tag'; - +import { generateComparator, sanitize } from "./common"; +import gql from "graphql-tag"; // keep and optimise export function buildFilteredCredibleGwasColocalisation( @@ -35,37 +34,33 @@ export function buildFilteredCredibleQtlColocalisation( state ) { const filteredQtlColoc = qtlColocalisationResult - .filter(d => d.log2h4h3 >= state.log2h4h3SliderValue) - .filter(d => d.h4 >= state.h4SliderValue) - .sort(log2h4h3Comparator) - .reverse(); + .filter(d => d.log2h4h3 >= state.log2h4h3SliderValue) + .filter(d => d.h4 >= state.h4SliderValue) + .sort(log2h4h3Comparator) + .reverse(); - return filteredQtlColoc.map( - ({ qtlStudyName, gene, tissue, indexVariant, ...rest }) => { - const key = `qtlCredibleSet__${qtlStudyName}__${gene.id}__${ - tissue.id - }__${indexVariant.id}`; - return { - key, - qtlStudyName, - gene, - tissue, - indexVariant, - credibleSet: credibleSetSingleQueryResult[key] - ? credibleSetSingleQueryResult[key] - .map(flattenPosition) - .filter(d => (state.credSet95Value === '95' ? d.is95CredibleSet : true)) - : [], - ...rest, - }; - } - ); + return filteredQtlColoc.map(({ qtlStudyName, gene, tissue, indexVariant, ...rest }) => { + const key = `qtlCredibleSet__${qtlStudyName}__${gene.id}__${tissue.id}__${indexVariant.id}`; + return { + key, + qtlStudyName, + gene, + tissue, + indexVariant, + credibleSet: credibleSetSingleQueryResult[key] + ? credibleSetSingleQueryResult[key] + .map(flattenPosition) + .filter(d => (state.credSet95Value === "95" ? d.is95CredibleSet : true)) + : [], + ...rest, + }; + }); } export function filterPageCredibleSet(data, credSet95Value) { return data .map(flattenPosition) - .filter(d => (credSet95Value === '95' ? d.is95CredibleSet : true)); + .filter(d => (credSet95Value === "95" ? d.is95CredibleSet : true)); } export function filterCredibleSets(data, credibleSetIntersectionKeys) { @@ -82,35 +77,29 @@ export function getCheckedCredibleSets(credibleSetsChecked) { } export function getVariantByCredibleSetsIntersection(variantsByCredibleSets) { - let variantIdsInCredibleSetsIntersection = variantsByCredibleSets.reduce( - (acc, vs, i) => { - vs.forEach(v => { - const { statsFields, ...variantFields } = v; - if (acc[v.id]) { - acc[v.id].posteriorProbabilityProd *= - statsFields.posteriorProbability; - acc[v.id].posteriorProbabilityMax = Math.max( - acc[v.id].posteriorProbabilityMax, - statsFields.posteriorProbability - ); - acc[v.id].appearsInCount += 1; - } else { - acc[v.id] = { - ...variantFields, - posteriorProbabilityMax: statsFields.posteriorProbability, - posteriorProbabilityProd: statsFields.posteriorProbability, - appearsInCount: 1, - }; - } - }); - return acc; - }, - {} - ); - - let variantsByCredibleSetsIntersection = Object.values( - variantIdsInCredibleSetsIntersection - ) + let variantIdsInCredibleSetsIntersection = variantsByCredibleSets.reduce((acc, vs, i) => { + vs.forEach(v => { + const { statsFields, ...variantFields } = v; + if (acc[v.id]) { + acc[v.id].posteriorProbabilityProd *= statsFields.posteriorProbability; + acc[v.id].posteriorProbabilityMax = Math.max( + acc[v.id].posteriorProbabilityMax, + statsFields.posteriorProbability + ); + acc[v.id].appearsInCount += 1; + } else { + acc[v.id] = { + ...variantFields, + posteriorProbabilityMax: statsFields.posteriorProbability, + posteriorProbabilityProd: statsFields.posteriorProbability, + appearsInCount: 1, + }; + } + }); + return acc; + }, {}); + + let variantsByCredibleSetsIntersection = Object.values(variantIdsInCredibleSetsIntersection) .filter(v => v.appearsInCount === variantsByCredibleSets.length) .map(v => ({ ...v, @@ -119,25 +108,21 @@ export function getVariantByCredibleSetsIntersection(variantsByCredibleSets) { return variantsByCredibleSetsIntersection; } -export function createCredibleSetsQuery({ - gwasColocalisation, - qtlColocalisation, -}) { +export function createCredibleSetsQuery({ gwasColocalisation, qtlColocalisation }) { return gql(`query CredibleSetsQuery { - ${gwasColocalisation.map(gwasCredibleSetQueryAliasedFragment).join('')} - ${qtlColocalisation.map(qtlCredibleSetQueryAliasedFragment).join('')} + ${gwasColocalisation.map(gwasCredibleSetQueryAliasedFragment).join("")} + ${qtlColocalisation.map(qtlCredibleSetQueryAliasedFragment).join("")} }`); } const log2h4h3Comparator = generateComparator(d => d.log2h4h3); const buildCredibleSet = (data, study, indexVariant, credSet95Value) => { - const selection = - data[`gwasCredibleSet__${study.studyId}__${indexVariant.id}`]; + const selection = data[`gwasCredibleSet__${study.studyId}__${indexVariant.id}`]; if (selection === undefined) return []; return selection .map(flattenPosition) - .filter(d => (credSet95Value === '95' ? d.is95CredibleSet : true)); + .filter(d => (credSet95Value === "95" ? d.is95CredibleSet : true)); }; const flattenPosition = ({ tagVariant, postProb, is95, is99, ...rest }) => { @@ -152,11 +137,7 @@ const flattenPosition = ({ tagVariant, postProb, is95, is99, ...rest }) => { }; const gwasCredibleSetQueryAliasedFragment = ({ study, indexVariant }) => ` -gwasCredibleSet__${study.studyId}__${ - indexVariant.id -}: gwasCredibleSet(studyId: "${study.studyId}", variantId: "${ - indexVariant.id -}") { +gwasCredibleSet__${study.studyId}__${indexVariant.id}: gwasCredibleSet(studyId: "${study.studyId}", variantId: "${indexVariant.id}") { tagVariant { id rsId @@ -173,24 +154,15 @@ gwasCredibleSet__${study.studyId}__${ } `; -const qtlCredibleSetQueryAliasedFragment = ({ - qtlStudyName, - gene, - tissue, - indexVariant, -}) => { - const tissueId = tissue.id.replaceAll('-', '_'); - const parseQTLStudyName = qtlStudyName.replaceAll('-', '_'); +const qtlCredibleSetQueryAliasedFragment = ({ qtlStudyName, gene, tissue, indexVariant }) => { + const tissueId = tissue.id.replaceAll("-", "_"); + const parseQTLStudyName = qtlStudyName.replaceAll("-", "_"); const geneId = gene.id; const sanitizedTissueId = sanitize(tissueId); const sanitizedGeneId = sanitize(geneId); const sanitizedParseQTLStudyName = sanitize(parseQTLStudyName); return ` - qtlCredibleSet__${sanitizedParseQTLStudyName}__${sanitizedGeneId}__${sanitizedTissueId}__${ - indexVariant.id - }: qtlCredibleSet(studyId: "${parseQTLStudyName}", variantId: "${ - indexVariant.id - }", geneId: "${geneId}", bioFeature: "${tissueId}") { + qtlCredibleSet__${sanitizedParseQTLStudyName}__${sanitizedGeneId}__${sanitizedTissueId}__${indexVariant.id}: qtlCredibleSet(studyId: "${parseQTLStudyName}", variantId: "${indexVariant.id}", geneId: "${geneId}", bioFeature: "${tissueId}") { tagVariant { id rsId diff --git a/apps/genetics/src/utils/variant.js b/apps/genetics/src/utils/variant.js index 56cec0cff..7f83ea5cd 100644 --- a/apps/genetics/src/utils/variant.js +++ b/apps/genetics/src/utils/variant.js @@ -6,57 +6,55 @@ export function variantGetInfo(data) { } export function variantTransformAssociatedIndexVariants(data) { - const associationsFlattened = - data.indexVariantsAndStudiesForTagVariant.associations.map((d) => { - const { indexVariant, study, ...rest } = d; - return { - indexVariantId: indexVariant.id, - indexVariantRsId: indexVariant.rsId, - studyId: study.studyId, - traitReported: study.traitReported, - pmid: study.pmid, - pubDate: study.pubDate, - pubAuthor: study.pubAuthor, - hasSumstats: study.hasSumstats, - ...rest, - }; - }); + const associationsFlattened = data.indexVariantsAndStudiesForTagVariant.associations.map(d => { + const { indexVariant, study, ...rest } = d; + return { + indexVariantId: indexVariant.id, + indexVariantRsId: indexVariant.rsId, + studyId: study.studyId, + traitReported: study.traitReported, + pmid: study.pmid, + pubDate: study.pubDate, + pubAuthor: study.pubAuthor, + hasSumstats: study.hasSumstats, + ...rest, + }; + }); return associationsFlattened; } export function variantTransformAssociatedTagVariants(data) { - const associationsFlattened = - data.tagVariantsAndStudiesForIndexVariant.associations.map((d) => { - const { tagVariant, study, ...rest } = d; - return { - tagVariantId: tagVariant.id, - tagVariantRsId: tagVariant.rsId, - studyId: study.studyId, - traitReported: study.traitReported, - pmid: study.pmid, - pubDate: study.pubDate, - pubAuthor: study.pubAuthor, - hasSumstats: study.hasSumstats, - ...rest, - }; - }); + const associationsFlattened = data.tagVariantsAndStudiesForIndexVariant.associations.map(d => { + const { tagVariant, study, ...rest } = d; + return { + tagVariantId: tagVariant.id, + tagVariantRsId: tagVariant.rsId, + studyId: study.studyId, + traitReported: study.traitReported, + pmid: study.pmid, + pubDate: study.pubDate, + pubAuthor: study.pubAuthor, + hasSumstats: study.hasSumstats, + ...rest, + }; + }); return associationsFlattened; } export const variantPopulations = [ - { code: 'AFR', description: 'African/African-American' }, - { code: 'AMR', description: 'Latino/Admixed American' }, - { code: 'ASJ', description: 'Ashkenazi Jewish' }, - { code: 'EAS', description: 'East Asian' }, - { code: 'FIN', description: 'Finnish' }, - { code: 'NFE', description: 'Non-Finnish European' }, - { code: 'NFEEST', description: 'Non-Finnish European Estonian' }, + { code: "AFR", description: "African/African-American" }, + { code: "AMR", description: "Latino/Admixed American" }, + { code: "ASJ", description: "Ashkenazi Jewish" }, + { code: "EAS", description: "East Asian" }, + { code: "FIN", description: "Finnish" }, + { code: "NFE", description: "Non-Finnish European" }, + { code: "NFEEST", description: "Non-Finnish European Estonian" }, { - code: 'NFENWE', - description: 'Non-Finnish European North-Western European', + code: "NFENWE", + description: "Non-Finnish European North-Western European", }, - { code: 'NFESEU', description: 'Non-Finnish European Southern European' }, - { code: 'OTH', description: 'Other (population not assigned)' }, + { code: "NFESEU", description: "Non-Finnish European Southern European" }, + { code: "OTH", description: "Other (population not assigned)" }, ]; export function variantParseGenesForVariantSchema(data) { @@ -64,7 +62,7 @@ export function variantParseGenesForVariantSchema(data) { const currentQtls = genesForVariantSchema.qtls; if (currentQtls.length === 0) return genesForVariantSchema; //possibly add new fields - if (currentQtls[0].id === 'pqtl') { + if (currentQtls[0].id === "pqtl") { const pqtl = currentQtls[0]; const restQtls = currentQtls.slice(1, pqtl.length); const sourceDescriptionBreakdown = parseSourceDescriptionBreakdown( @@ -78,12 +76,12 @@ export function variantParseGenesForVariantSchema(data) { return genesForVariantSchema; } -function parseSourceDescriptionBreakdown(description = '') { +function parseSourceDescriptionBreakdown(description = "") { if (!description) return; - return description.replace(' Sun *et al.* (2018)', ''); + return description.replace(" Sun *et al.* (2018)", ""); } -function parseSourceLabel(label = '') { +function parseSourceLabel(label = "") { if (!label) return; - return label.replace(' (Sun, 2018)', ''); + return label.replace(" (Sun, 2018)", ""); } diff --git a/apps/platform/package.json b/apps/platform/package.json index 58bd7c6be..62805f91f 100644 --- a/apps/platform/package.json +++ b/apps/platform/package.json @@ -57,7 +57,7 @@ "lint": "eslint --quiet \"src/**/*.{js,jsx,mjs,cjs,ts,tsx}\"", "lint:fix": "eslint \"src/**/*.{js,jsx,mjs,cjs,ts,tsx}\" --fix", "lint:quiet": "eslint --quiet \"src/**/*.{js,jsx,mjs,cjs,ts,tsx}\"", - "prettier:all": "prettier --write 'src/**/*.js'", + "prettier:all": "prettier --write \"src/**/*.{js,jsx,mjs,cjs,ts,tsx}\"", "analyze": "source-map-explorer 'build/static/js/*.js'" }, "browserslist": [ diff --git a/apps/platform/src/assets/OTLogo.jsx b/apps/platform/src/assets/OTLogo.jsx index 6f0a2a561..a6ef6c375 100644 --- a/apps/platform/src/assets/OTLogo.jsx +++ b/apps/platform/src/assets/OTLogo.jsx @@ -1,16 +1,16 @@ -import { SvgIcon } from '@mui/material'; +import { SvgIcon } from "@mui/material"; // import { makeStyles } from '@mui/styles'; -import config from '../config'; +import config from "../config"; const styles = { root: { - height: 'unset', + height: "unset", }, }; -function OTLogo({props, sx = []}) { - const tagline = config.profile.otLogoTagline ?? ''; +function OTLogo({ props, sx = [] }) { + const tagline = config.profile.otLogoTagline ?? ""; return ( - + @@ -77,9 +74,9 @@ function OTLogo({props, sx = []}) { diff --git a/apps/platform/src/components/AssociationsToolkit/HeaderControls/HeaderControls.jsx b/apps/platform/src/components/AssociationsToolkit/HeaderControls/HeaderControls.jsx index 0bbb67e13..5816f8097 100644 --- a/apps/platform/src/components/AssociationsToolkit/HeaderControls/HeaderControls.jsx +++ b/apps/platform/src/components/AssociationsToolkit/HeaderControls/HeaderControls.jsx @@ -1,36 +1,35 @@ -import { Box, Collapse, Grid, Typography } from '@mui/material'; -import { faXmark } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Box, Collapse, Grid, Typography } from "@mui/material"; +import { faXmark } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { styled } from '@mui/material/styles'; -import dataSources from '../static_datasets/dataSourcesAssoc'; +import { styled } from "@mui/material/styles"; +import dataSources from "../static_datasets/dataSourcesAssoc"; -import Slider from './SliderControl'; -import Required from './RequiredControl'; -import { GridContainer } from '../layout'; +import Slider from "./SliderControl"; +import Required from "./RequiredControl"; +import { GridContainer } from "../layout"; -import useAotfContext from '../hooks/useAotfContext'; +import useAotfContext from "../hooks/useAotfContext"; -const CloseContainer = styled('div')({ - position: 'absolute', - left: '10px', - top: '10px', - cursor: 'pointer', +const CloseContainer = styled("div")({ + position: "absolute", + left: "10px", + top: "10px", + cursor: "pointer", zIndex: 10, }); -const WeightsControllsContainer = styled('div')({ - backgroundColor: 'var(--colums-controls-color)', - position: 'relative', - boxSizing: 'content-box', - padding: '20px 0 15px', +const WeightsControllsContainer = styled("div")({ + backgroundColor: "var(--colums-controls-color)", + position: "relative", + boxSizing: "content-box", + padding: "20px 0 15px", }); function HeaderControls({ cols = [] }) { - const { activeHeadersControlls, setActiveHeadersControlls, displayedTable } = - useAotfContext(); + const { activeHeadersControlls, setActiveHeadersControlls, displayedTable } = useAotfContext(); - if (displayedTable === 'prioritisations') return null; + if (displayedTable === "prioritisations") return null; const handleClose = () => { setActiveHeadersControlls(false); @@ -57,10 +56,7 @@ function HeaderControls({ cols = [] }) { Require - + {cols.map(({ id }) => (
@@ -69,9 +65,7 @@ function HeaderControls({ cols = [] }) {
el.id === id).aggregationId, id) - } + aggregationId={(dataSources.find(el => el.id === id).aggregationId, id)} />
diff --git a/apps/platform/src/components/AssociationsToolkit/HeaderControls/RequiredControl.jsx b/apps/platform/src/components/AssociationsToolkit/HeaderControls/RequiredControl.jsx index ab38fa0cb..28e1a37b1 100644 --- a/apps/platform/src/components/AssociationsToolkit/HeaderControls/RequiredControl.jsx +++ b/apps/platform/src/components/AssociationsToolkit/HeaderControls/RequiredControl.jsx @@ -1,24 +1,18 @@ -import { useState, useEffect } from 'react'; -import { Checkbox } from '@mui/material'; -import { styled } from '@mui/material/styles'; -import useAotfContext from '../hooks/useAotfContext'; -import { checkBoxPayload, getControlChecked } from '../utils'; +import { useState, useEffect } from "react"; +import { Checkbox } from "@mui/material"; +import { styled } from "@mui/material/styles"; +import useAotfContext from "../hooks/useAotfContext"; +import { checkBoxPayload, getControlChecked } from "../utils"; const OTCheckbox = styled(Checkbox)` padding: 0; `; function RequiredControl({ id, aggregationId }) { - const { - dataSourcesRequired, - setDataSourcesRequired, - loading, - resetToInitialPagination, - } = useAotfContext(); + const { dataSourcesRequired, setDataSourcesRequired, loading, resetToInitialPagination } = + useAotfContext(); - const [displayValue, setDisplayValue] = useState( - getControlChecked(dataSourcesRequired, id) - ); + const [displayValue, setDisplayValue] = useState(getControlChecked(dataSourcesRequired, id)); useEffect(() => { if (loading) return; @@ -32,9 +26,7 @@ function RequiredControl({ id, aggregationId }) { setDataSourcesRequired([...dataSourcesRequired, payload]); setDisplayValue(newValue); } else { - const indexToRemove = dataSourcesRequired.findIndex( - element => element.id === id - ); + const indexToRemove = dataSourcesRequired.findIndex(element => element.id === id); const newRequiredElement = [ ...dataSourcesRequired.slice(0, indexToRemove), ...dataSourcesRequired.slice(indexToRemove + 1), @@ -45,14 +37,7 @@ function RequiredControl({ id, aggregationId }) { resetToInitialPagination(); }; - return ( - - ); + return ; } export default RequiredControl; diff --git a/apps/platform/src/components/AssociationsToolkit/HeaderControls/SliderControl.jsx b/apps/platform/src/components/AssociationsToolkit/HeaderControls/SliderControl.jsx index 25bd13da1..7ddca22b5 100644 --- a/apps/platform/src/components/AssociationsToolkit/HeaderControls/SliderControl.jsx +++ b/apps/platform/src/components/AssociationsToolkit/HeaderControls/SliderControl.jsx @@ -1,22 +1,22 @@ -import { useState, useEffect } from 'react'; -import { Slider } from '@mui/material'; -import { styled } from '@mui/material/styles'; +import { useState, useEffect } from "react"; +import { Slider } from "@mui/material"; +import { styled } from "@mui/material/styles"; -import useAotfContext from '../hooks/useAotfContext'; -import { getWightSourceDefault } from '../utils'; +import useAotfContext from "../hooks/useAotfContext"; +import { getWightSourceDefault } from "../utils"; const OTSlider = styled(Slider)({ root: { - padding: '0 10px !important', + padding: "0 10px !important", }, mark: { - backgroundColor: '#b8b8b8', + backgroundColor: "#b8b8b8", width: 10, height: 1, marginLeft: -4, }, valueLabel: { - zIndex: '9999', + zIndex: "9999", }, }); @@ -32,11 +32,7 @@ const getSliderValue = (values, id) => { }; function SliderControll({ id }) { - const { - dataSourcesWeights, - setDataSourcesWeights, - resetToInitialPagination, - } = useAotfContext(); + const { dataSourcesWeights, setDataSourcesWeights, resetToInitialPagination } = useAotfContext(); const defaultValue = getWightSourceDefault(id); const initialValue = getSliderValue(dataSourcesWeights, id); diff --git a/apps/platform/src/components/AssociationsToolkit/HeaderControls/index.ts b/apps/platform/src/components/AssociationsToolkit/HeaderControls/index.ts index 18bd99c36..6498b9bbf 100644 --- a/apps/platform/src/components/AssociationsToolkit/HeaderControls/index.ts +++ b/apps/platform/src/components/AssociationsToolkit/HeaderControls/index.ts @@ -1 +1 @@ -export { default } from './HeaderControls'; +export { default } from "./HeaderControls"; diff --git a/apps/platform/src/components/AssociationsToolkit/SearchInput.jsx b/apps/platform/src/components/AssociationsToolkit/SearchInput.jsx index 33f93dc06..725d2e4b0 100644 --- a/apps/platform/src/components/AssociationsToolkit/SearchInput.jsx +++ b/apps/platform/src/components/AssociationsToolkit/SearchInput.jsx @@ -1,22 +1,22 @@ -import { useEffect, useState } from 'react'; -import { Grid, Input, IconButton } from '@mui/material'; -import { styled } from '@mui/material/styles'; -import { faXmark, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { useDebounce } from 'ui'; -import useAotfContext from './hooks/useAotfContext'; +import { useEffect, useState } from "react"; +import { Grid, Input, IconButton } from "@mui/material"; +import { styled } from "@mui/material/styles"; +import { faXmark, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { useDebounce } from "ui"; +import useAotfContext from "./hooks/useAotfContext"; const InputContainer = styled(Grid)({ - marginRight: '15px', - width: '250px', - '& input': { - width: '220px', + marginRight: "15px", + width: "250px", + "& input": { + width: "220px", }, }); -function SearchInput({ placeholder = 'Search' }) { +function SearchInput({ placeholder = "Search" }) { const { handleSearchInputChange } = useAotfContext(); - const [inputValue, setInputValue] = useState(''); + const [inputValue, setInputValue] = useState(""); const debouncedInputValue = useDebounce(inputValue, 200); const handleInputChange = e => { @@ -24,7 +24,7 @@ function SearchInput({ placeholder = 'Search' }) { }; const handleInputClean = () => { - setInputValue(''); + setInputValue(""); }; useEffect( diff --git a/apps/platform/src/components/AssociationsToolkit/Table/AssocTooltip.jsx b/apps/platform/src/components/AssociationsToolkit/Table/AssocTooltip.jsx index 99d8374a1..7ad571ad9 100644 --- a/apps/platform/src/components/AssociationsToolkit/Table/AssocTooltip.jsx +++ b/apps/platform/src/components/AssociationsToolkit/Table/AssocTooltip.jsx @@ -1,5 +1,5 @@ -import { withStyles } from '@mui/styles'; -import Tooltip from '@mui/material/Tooltip'; +import { withStyles } from "@mui/styles"; +import Tooltip from "@mui/material/Tooltip"; const HtmlTooltip = withStyles(theme => ({ tooltip: { diff --git a/apps/platform/src/components/AssociationsToolkit/Table/CellName.jsx b/apps/platform/src/components/AssociationsToolkit/Table/CellName.jsx index 7e2a55152..0da879dc6 100644 --- a/apps/platform/src/components/AssociationsToolkit/Table/CellName.jsx +++ b/apps/platform/src/components/AssociationsToolkit/Table/CellName.jsx @@ -1,53 +1,48 @@ -import { useState } from 'react'; -import { styled, Typography } from '@mui/material'; -import { - faDna, - faStethoscope, - faThumbTack, - faXmark, -} from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Link } from 'ui'; -import Tooltip from './AssocTooltip'; +import { useState } from "react"; +import { styled, Typography } from "@mui/material"; +import { faDna, faStethoscope, faThumbTack, faXmark } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { Link } from "ui"; +import Tooltip from "./AssocTooltip"; -import useAotfContext from '../hooks/useAotfContext'; +import useAotfContext from "../hooks/useAotfContext"; -const NameContainer = styled('div')({ - position: 'relative', - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - '&:hover': { - cursor: 'pointer', +const NameContainer = styled("div")({ + position: "relative", + display: "flex", + alignItems: "center", + justifyContent: "space-between", + "&:hover": { + cursor: "pointer", }, - '&:hover > .PinnedContainer': { + "&:hover > .PinnedContainer": { opacity: 1, }, }); -const TextContainer = styled('div')({ - display: 'block', - overflow: 'hidden', - textAlign: 'end', - textOverflow: 'ellipsis', - maxWidth: '120px', - '&:hover span': { - textDecoration: 'underline', +const TextContainer = styled("div")({ + display: "block", + overflow: "hidden", + textAlign: "end", + textOverflow: "ellipsis", + maxWidth: "120px", + "&:hover span": { + textDecoration: "underline", }, }); -const LinksTooltipContent = styled('span')({ - display: 'flex', - flexDirection: 'column', - gap: '5px', +const LinksTooltipContent = styled("span")({ + display: "flex", + flexDirection: "column", + gap: "5px", }); -const PinnedContainer = styled('div', { - shouldForwardProp: prop => prop !== 'active', +const PinnedContainer = styled("div", { + shouldForwardProp: prop => prop !== "active", })(({ active }) => ({ - opacity: active ? '1' : '0', - cursor: 'pointer', - marginLeft: '5px', + opacity: active ? "1" : "0", + cursor: "pointer", + marginLeft: "5px", })); function TooltipContent({ id, entity, name, icon }) { @@ -75,10 +70,10 @@ function CellName({ name, rowId, row, tablePrefix }) { const rowData = row.original; const isPinned = pinnedEntries.find(e => e === rowData.id); - const rowEntity = entityToGet === 'target' ? 'target' : 'disease'; - const icon = rowEntity === 'target' ? faDna : faStethoscope; + const rowEntity = entityToGet === "target" ? "target" : "disease"; + const icon = rowEntity === "target" ? faDna : faStethoscope; - const pinnedIcon = tablePrefix === 'body' ? faThumbTack : faXmark; + const pinnedIcon = tablePrefix === "body" ? faThumbTack : faXmark; const handleClickPin = () => { if (isPinned) { @@ -95,20 +90,14 @@ function CellName({ name, rowId, row, tablePrefix }) { onClose={() => setOpen(false)} placement="top" arrow - title={ - - } + title={} > { setOpen(true); }} > - + diff --git a/apps/platform/src/components/AssociationsToolkit/Table/ColoredCell.jsx b/apps/platform/src/components/AssociationsToolkit/Table/ColoredCell.jsx index 1458c2f27..a5f36c002 100644 --- a/apps/platform/src/components/AssociationsToolkit/Table/ColoredCell.jsx +++ b/apps/platform/src/components/AssociationsToolkit/Table/ColoredCell.jsx @@ -1,10 +1,10 @@ -import { getScale } from '../utils'; -import Tooltip from './AssocTooltip'; +import { getScale } from "../utils"; +import Tooltip from "./AssocTooltip"; const getClassName = ({ globalScore, hasValue }) => { - if (globalScore) return 'data-global-score'; - if (hasValue) return 'data-score'; - return 'data-empty'; + if (globalScore) return "data-global-score"; + if (hasValue) return "data-score"; + return "data-empty"; }; function ColoredCell({ @@ -20,18 +20,16 @@ function ColoredCell({ // if(!hasValue) return null const colorScale = getScale(isAssociations); - const onClickHandler = onClick - ? () => onClick(cell, tablePrefix) - : () => ({}); - const backgroundColor = hasValue ? colorScale(scoreValue) : '#fafafa'; - const borderColor = hasValue ? colorScale(scoreValue) : '#e0dede'; + const onClickHandler = onClick ? () => onClick(cell, tablePrefix) : () => ({}); + const backgroundColor = hasValue ? colorScale(scoreValue) : "#fafafa"; + const borderColor = hasValue ? colorScale(scoreValue) : "#e0dede"; const className = getClassName({ globalScore, hasValue }); - const scoreText = hasValue ? `Score: ${scoreValue.toFixed(2)}` : 'No data'; + const scoreText = hasValue ? `Score: ${scoreValue.toFixed(2)}` : "No data"; const style = { - height: '24px', - width: '24px', - borderRadius: rounded ? '50%' : 0, + height: "24px", + width: "24px", + borderRadius: rounded ? "50%" : 0, backgroundColor, border: `1px solid ${borderColor}`, }; diff --git a/apps/platform/src/components/AssociationsToolkit/Table/TableBody.jsx b/apps/platform/src/components/AssociationsToolkit/Table/TableBody.jsx index 63fca51b1..73f0f2798 100644 --- a/apps/platform/src/components/AssociationsToolkit/Table/TableBody.jsx +++ b/apps/platform/src/components/AssociationsToolkit/Table/TableBody.jsx @@ -1,71 +1,47 @@ -import { Fragment } from 'react'; -import { flexRender } from '@tanstack/react-table'; -import { ClickAwayListener, Fade, Box } from '@mui/material'; -import { v1 } from 'uuid'; +import { Fragment } from "react"; +import { flexRender } from "@tanstack/react-table"; +import { ClickAwayListener, Fade, Box } from "@mui/material"; +import { v1 } from "uuid"; -import useAotfContext from '../hooks/useAotfContext'; +import useAotfContext from "../hooks/useAotfContext"; -import { getCellId } from '../utils'; -import { - RowContainer, - RowsContainer, - TableBodyContent, - GridContainer, -} from '../layout'; +import { getCellId } from "../utils"; +import { RowContainer, RowsContainer, TableBodyContent, GridContainer } from "../layout"; -import { SectionRender, SectionRendererWrapper } from './SectionRender'; +import { SectionRender, SectionRendererWrapper } from "./SectionRender"; /* HELPERS */ const getColContainerClassName = ({ id }) => { - if (id === '1_naiming-cols_name') return 'group-naiming-cols'; - return 'group-entity-cols'; + if (id === "1_naiming-cols_name") return "group-naiming-cols"; + return "group-entity-cols"; }; -const getRowActive = ({ getIsExpanded }, isExpandedInTable) => - getIsExpanded() && isExpandedInTable; +const getRowActive = ({ getIsExpanded }, isExpandedInTable) => getIsExpanded() && isExpandedInTable; -const getCellClassName = ( - cell, - entityToGet, - displayedTable, - expanded, - tablePrefix -) => { - if (cell.column.id === 'name') return 'name-cell'; - const expandedId = getCellId( - cell, - entityToGet, - displayedTable, - tablePrefix - ).join('-'); - if (expandedId === expanded.join('-')) return 'active data-cell'; - return 'data-cell'; +const getCellClassName = (cell, entityToGet, displayedTable, expanded, tablePrefix) => { + if (cell.column.id === "name") return "name-cell"; + const expandedId = getCellId(cell, entityToGet, displayedTable, tablePrefix).join("-"); + if (expandedId === expanded.join("-")) return "active data-cell"; + return "data-cell"; }; -function ExpandableContainer({ - rowExpanded, - isExpandedInTable, - loading, - children, -}) { +function ExpandableContainer({ rowExpanded, isExpandedInTable, loading, children }) { if (!isExpandedInTable || !rowExpanded || loading) return null; return {children}; } function TableBody({ core, expanded, cols }) { - const { id, entity, entityToGet, displayedTable, resetExpandler } = - useAotfContext(); + const { id, entity, entityToGet, displayedTable, resetExpandler } = useAotfContext(); const { rows } = core.getRowModel(); if (rows.length < 1) return null; const flatCols = cols.map(c => c.id); - const rowNameEntity = entity === 'target' ? 'name' : 'approvedSymbol'; + const rowNameEntity = entity === "target" ? "name" : "approvedSymbol"; const highLevelHeaders = core.getHeaderGroups()[0].headers; const { prefix, loading } = core.getState(); - const isExpandedInTable = - expanded[3] === prefix && flatCols.includes(expanded[1]); + const isExpandedInTable = expanded[3] === prefix && flatCols.includes(expanded[1]); const handleClickAway = () => { resetExpandler(); @@ -85,9 +61,7 @@ function TableBody({ core, expanded, cols }) { key={columnGroup.id} > {columnGroup.subHeaders.map(column => { - const cell = row - .getVisibleCells() - .find(el => el.column.id === column.id); + const cell = row.getVisibleCells().find(el => el.column.id === column.id); return (
- {flexRender( - cell.column.columnDef.cell, - cell.getContext() - )} + {flexRender(cell.column.columnDef.cell, cell.getContext())}
); })} diff --git a/apps/platform/src/components/AssociationsToolkit/Table/TableFooter.jsx b/apps/platform/src/components/AssociationsToolkit/Table/TableFooter.jsx index ca0fd59ab..1d23bb6d3 100644 --- a/apps/platform/src/components/AssociationsToolkit/Table/TableFooter.jsx +++ b/apps/platform/src/components/AssociationsToolkit/Table/TableFooter.jsx @@ -1,8 +1,8 @@ -import { useEffect } from 'react'; -import { Alert, TablePagination, Typography } from '@mui/material'; -import useAotfContext from '../hooks/useAotfContext'; -import ColoredCell from './ColoredCell'; -import { getLegend } from '../utils'; +import { useEffect } from "react"; +import { Alert, TablePagination, Typography } from "@mui/material"; +import useAotfContext from "../hooks/useAotfContext"; +import ColoredCell from "./ColoredCell"; +import { getLegend } from "../utils"; function TableFooter({ table }) { const { @@ -13,35 +13,35 @@ function TableFooter({ table }) { displayedTable, resetDatasourceControls, } = useAotfContext(); - const isAssociations = displayedTable === 'associations'; + const isAssociations = displayedTable === "associations"; /** * LEGEND EFECT */ useEffect(() => { - const Legend = getLegend(displayedTable === 'associations'); - document.getElementById('legend').innerHTML = ''; - document.getElementById('legend').appendChild(Legend); + const Legend = getLegend(displayedTable === "associations"); + document.getElementById("legend").innerHTML = ""; + document.getElementById("legend").appendChild(Legend); }, [displayedTable]); return (
-
+
No data @@ -49,15 +49,13 @@ function TableFooter({ table }) {
-
+
{modifiedSourcesDataControls && isAssociations && ( - - Datasource controls modified - {' '} + Datasource controls modified{" "}
diff --git a/apps/platform/src/components/AssociationsToolkit/TargetPrioritisationSwitch.jsx b/apps/platform/src/components/AssociationsToolkit/TargetPrioritisationSwitch.jsx index 19cdcf689..e1e95bc16 100644 --- a/apps/platform/src/components/AssociationsToolkit/TargetPrioritisationSwitch.jsx +++ b/apps/platform/src/components/AssociationsToolkit/TargetPrioritisationSwitch.jsx @@ -1,8 +1,8 @@ -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; +import ToggleButton from "@mui/material/ToggleButton"; +import ToggleButtonGroup from "@mui/material/ToggleButtonGroup"; -import { DISPLAY_MODE } from './utils'; -import useAotfContext from './hooks/useAotfContext'; +import { DISPLAY_MODE } from "./utils"; +import useAotfContext from "./hooks/useAotfContext"; function TargetPrioritisationSwitch() { const { displayedTable, setDisplayedTable } = useAotfContext(); @@ -26,12 +26,8 @@ function TargetPrioritisationSwitch() { aria-label="Visualizations" size="small" > - - Target-disease association - - - Target prioritisation factors - + Target-disease association + Target prioritisation factors ); } diff --git a/apps/platform/src/components/AssociationsToolkit/hooks/useAotfContext.js b/apps/platform/src/components/AssociationsToolkit/hooks/useAotfContext.js index 39ea550a1..0d4c5828b 100644 --- a/apps/platform/src/components/AssociationsToolkit/hooks/useAotfContext.js +++ b/apps/platform/src/components/AssociationsToolkit/hooks/useAotfContext.js @@ -1,5 +1,5 @@ -import { useContext } from 'react'; -import AssociationsContext from '../context/AssociationsContext'; +import { useContext } from "react"; +import AssociationsContext from "../context/AssociationsContext"; function useAotfContext() { return useContext(AssociationsContext); diff --git a/apps/platform/src/components/AssociationsToolkit/hooks/useAssociationsData.js b/apps/platform/src/components/AssociationsToolkit/hooks/useAssociationsData.js index b63a5c162..6c7cd80f6 100644 --- a/apps/platform/src/components/AssociationsToolkit/hooks/useAssociationsData.js +++ b/apps/platform/src/components/AssociationsToolkit/hooks/useAssociationsData.js @@ -1,6 +1,6 @@ /* eslint-disable */ -import { useEffect, useState } from 'react'; -import client from '../../../client'; +import { useEffect, useState } from "react"; +import client from "../../../client"; // Select and parsed data from API response from fixed Target const getAssociatedDiseasesData = data => { @@ -48,13 +48,13 @@ const getAssociatedTargetsData = data => { }; const getParsedData = (entity, apiResponse) => { - if (entity === 'target') return getAssociatedDiseasesData(apiResponse); - if (entity === 'disease') return getAssociatedTargetsData(apiResponse); + if (entity === "target") return getAssociatedDiseasesData(apiResponse); + if (entity === "disease") return getAssociatedTargetsData(apiResponse); }; const getAllDataCount = (entity, apiResponse) => { - if (entity === 'target') return apiResponse.target.associatedDiseases.count; - if (entity === 'disease') return apiResponse.disease.associatedTargets.count; + if (entity === "target") return apiResponse.target.associatedDiseases.count; + if (entity === "disease") return apiResponse.disease.associatedTargets.count; }; const initialState = { @@ -68,11 +68,11 @@ const initialState = { function useAssociationsData({ query, options: { - id = '', + id = "", index = 0, size = 50, - filter = '', - sortBy = 'score', + filter = "", + sortBy = "score", aggregationFilters = [], enableIndirect = false, datasources = null, diff --git a/apps/platform/src/components/AssociationsToolkit/hooks/useBatchDownloader.js b/apps/platform/src/components/AssociationsToolkit/hooks/useBatchDownloader.js index 43b0e49be..9b6be9bf5 100644 --- a/apps/platform/src/components/AssociationsToolkit/hooks/useBatchDownloader.js +++ b/apps/platform/src/components/AssociationsToolkit/hooks/useBatchDownloader.js @@ -1,6 +1,6 @@ -import _ from 'lodash'; +import _ from "lodash"; -import defaultClient from '../../../client'; +import defaultClient from "../../../client"; const DOWNLOAD_CHUNK_SIZE = 300; const getRows = (data, dataPath) => _.get(data, dataPath, []); @@ -25,8 +25,8 @@ function useBatchDownloader( variables, dataPath, client = defaultClient, - rowField = 'rows', - countField = 'count' + rowField = "rows", + countField = "count" ) { const rowPath = `${dataPath}.${rowField}`; const countPath = `${dataPath}.${countField}`; diff --git a/apps/platform/src/components/AssociationsToolkit/layout.jsx b/apps/platform/src/components/AssociationsToolkit/layout.jsx index 05328647e..3716b0104 100644 --- a/apps/platform/src/components/AssociationsToolkit/layout.jsx +++ b/apps/platform/src/components/AssociationsToolkit/layout.jsx @@ -1,13 +1,13 @@ -import { styled } from '@mui/material'; -import { LoadingBackdrop } from 'ui'; +import { styled } from "@mui/material"; +import { LoadingBackdrop } from "ui"; -const LoadingContainer = styled('div')({ - height: '1100px', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - flexDirection: 'column', - gap: '15px', +const LoadingContainer = styled("div")({ + height: "1100px", + display: "flex", + alignItems: "center", + justifyContent: "center", + flexDirection: "column", + gap: "15px", }); export function AotFLoader() { @@ -20,59 +20,59 @@ export function AotFLoader() { } const baseGridContainerStyles = { - display: 'grid', - gridTemplateRows: '1fr', - gridColumnGap: '2px', - gridRowGap: '0px', - justifyItems: 'center', - width: '100%', + display: "grid", + gridTemplateRows: "1fr", + gridColumnGap: "2px", + gridRowGap: "0px", + justifyItems: "center", + width: "100%", }; -const boxShadow = '0px 3px 15px -3px rgba(0,0,0,0.1)'; +const boxShadow = "0px 3px 15px -3px rgba(0,0,0,0.1)"; -export const GridContainer = styled('div', { - shouldForwardProp: prop => prop !== 'columnsCount', +export const GridContainer = styled("div", { + shouldForwardProp: prop => prop !== "columnsCount", })(({ columnsCount }) => ({ ...baseGridContainerStyles, gridTemplateColumns: `repeat(${columnsCount}, 1fr)`, })); -export const TableBodyContent = styled('div')({ - display: 'flex', - flexDirection: 'column', - margin: '6px 0', +export const TableBodyContent = styled("div")({ + display: "flex", + flexDirection: "column", + margin: "6px 0", }); -export const RowsContainer = styled('div')({ - display: 'flex', - flexDirection: 'column', +export const RowsContainer = styled("div")({ + display: "flex", + flexDirection: "column", }); -export const RowContainer = styled('div', { - shouldForwardProp: prop => prop !== 'rowExpanded', +export const RowContainer = styled("div", { + shouldForwardProp: prop => prop !== "rowExpanded", })(({ rowExpanded }) => ({ - top: '148px', - position: rowExpanded ? 'sticky' : 'initial', - padding: rowExpanded ? '0.1em 0 0.1em 0' : '0.1em 0 0.1em 0', - zIndex: rowExpanded ? '90 !important' : 'initial', - backgroundColor: rowExpanded ? 'var(--row-hover-color)' : 'initial', - display: 'flex', - alignItems: 'center', - width: '100%', - boxSizing: 'content-box', - boxShadow: rowExpanded ? boxShadow : 'none', - border: rowExpanded ? '0.7px solid #666' : '0.7px solid #fafafa', - '&:hover': { - backgroundColor: 'var(--row-hover-color)', - border: '0.7px solid #666', + top: "148px", + position: rowExpanded ? "sticky" : "initial", + padding: rowExpanded ? "0.1em 0 0.1em 0" : "0.1em 0 0.1em 0", + zIndex: rowExpanded ? "90 !important" : "initial", + backgroundColor: rowExpanded ? "var(--row-hover-color)" : "initial", + display: "flex", + alignItems: "center", + width: "100%", + boxSizing: "content-box", + boxShadow: rowExpanded ? boxShadow : "none", + border: rowExpanded ? "0.7px solid #666" : "0.7px solid #fafafa", + "&:hover": { + backgroundColor: "var(--row-hover-color)", + border: "0.7px solid #666", }, - '&:hover .pinnedIcon': { + "&:hover .pinnedIcon": { opacity: 1, - cursor: 'pointer', + cursor: "pointer", }, })); -export const ControlsSection = styled('section')` +export const ControlsSection = styled("section")` margin-top: 30px; margin-bottom: 30px; display: flex; @@ -81,7 +81,7 @@ export const ControlsSection = styled('section')` flex-wrap: wrap; `; -export const OptionsControlls = styled('div')` +export const OptionsControlls = styled("div")` display: flex; justify-content: space-between; gap: 12px; diff --git a/apps/platform/src/components/AssociationsToolkit/utils/Legend.js b/apps/platform/src/components/AssociationsToolkit/utils/Legend.js index dcca9e81d..d664d62b8 100644 --- a/apps/platform/src/components/AssociationsToolkit/utils/Legend.js +++ b/apps/platform/src/components/AssociationsToolkit/utils/Legend.js @@ -10,13 +10,13 @@ import { scaleLinear, scaleBand, axisBottom, -} from 'd3'; +} from "d3"; function ramp(color, n = 256) { - const canvas = document.createElement('canvas'); + const canvas = document.createElement("canvas"); canvas.width = n; canvas.height = 1; - const context = canvas.getContext('2d'); + const context = canvas.getContext("2d"); for (let i = 0; i < n; ++i) { context.fillStyle = color(i / (n - 1)); context.fillRect(i, 0, 1, 1); @@ -40,44 +40,36 @@ function Legend( tickValues, } = {} ) { - const svg = create('svg') - .attr('width', width) - .attr('height', height) - .attr('viewBox', [0, 0, width, height]) - .style('overflow', 'visible') - .style('display', 'block'); - - let tickAdjust = g => - g.selectAll('.tick line').attr('y1', marginTop + marginBottom - height); + const svg = create("svg") + .attr("width", width) + .attr("height", height) + .attr("viewBox", [0, 0, width, height]) + .style("overflow", "visible") + .style("display", "block"); + + let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); - x = color - .copy() - .rangeRound(quantize(interpolate(marginLeft, width - marginRight), n)); + x = color.copy().rangeRound(quantize(interpolate(marginLeft, width - marginRight), n)); svg - .append('image') - .attr('x', marginLeft) - .attr('y', marginTop) - .attr('width', width - marginLeft - marginRight) - .attr('height', height - marginTop - marginBottom) - .attr('preserveAspectRatio', 'none') - .attr( - 'xlink:href', - ramp(color.copy().domain(quantize(interpolate(0, 1), n))).toDataURL() - ); + .append("image") + .attr("x", marginLeft) + .attr("y", marginTop) + .attr("width", width - marginLeft - marginRight) + .attr("height", height - marginTop - marginBottom) + .attr("preserveAspectRatio", "none") + .attr("xlink:href", ramp(color.copy().domain(quantize(interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign( - color - .copy() - .interpolator(interpolateRound(marginLeft, width - marginRight)), + color.copy().interpolator(interpolateRound(marginLeft, width - marginRight)), { range() { return [marginLeft, width - marginRight]; @@ -86,13 +78,13 @@ function Legend( ); svg - .append('image') - .attr('x', marginLeft) - .attr('y', marginTop) - .attr('width', width - marginLeft - marginRight) - .attr('height', height - marginTop - marginBottom) - .attr('preserveAspectRatio', 'none') - .attr('xlink:href', ramp(color.interpolator()).toDataURL()); + .append("image") + .attr("x", marginLeft) + .attr("y", marginTop) + .attr("width", width - marginLeft - marginRight) + .attr("height", height - marginTop - marginBottom) + .attr("preserveAspectRatio", "none") + .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { @@ -100,8 +92,8 @@ function Legend( const n = Math.round(ticks + 1); tickValues = range(n).map(i => quantile(color.domain(), i / (n - 1))); } - if (typeof tickFormat !== 'function') { - tickFormat = format(tickFormat === undefined ? ',f' : tickFormat); + if (typeof tickFormat !== "function") { + tickFormat = format(tickFormat === undefined ? ",f" : tickFormat); } } } @@ -117,7 +109,7 @@ function Legend( const thresholdFormat = tickFormat === undefined ? d => d - : typeof tickFormat === 'string' + : typeof tickFormat === "string" ? format(tickFormat) : tickFormat; @@ -126,15 +118,15 @@ function Legend( .rangeRound([marginLeft, width - marginRight]); svg - .append('g') - .selectAll('rect') + .append("g") + .selectAll("rect") .data(color.range()) - .join('rect') - .attr('x', (d, i) => x(i - 1)) - .attr('y', marginTop) - .attr('width', (d, i) => x(i) - x(i - 1)) - .attr('height', height - marginTop - marginBottom) - .attr('fill', d => d); + .join("rect") + .attr("x", (d, i) => x(i - 1)) + .attr("y", marginTop) + .attr("width", (d, i) => x(i) - x(i - 1)) + .attr("height", height - marginTop - marginBottom) + .attr("fill", d => d); tickValues = range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); @@ -147,40 +139,40 @@ function Legend( .rangeRound([marginLeft, width - marginRight]); svg - .append('g') - .selectAll('rect') + .append("g") + .selectAll("rect") .data(color.domain()) - .join('rect') - .attr('x', x) - .attr('y', marginTop) - .attr('width', Math.max(0, x.bandwidth() - 1)) - .attr('height', height - marginTop - marginBottom) - .attr('fill', color); + .join("rect") + .attr("x", x) + .attr("y", marginTop) + .attr("width", Math.max(0, x.bandwidth() - 1)) + .attr("height", height - marginTop - marginBottom) + .attr("fill", color); tickAdjust = () => {}; } svg - .append('g') - .attr('transform', `translate(0,${height - marginBottom})`) + .append("g") + .attr("transform", `translate(0,${height - marginBottom})`) .call( axisBottom(x) - .ticks(ticks, typeof tickFormat === 'string' ? tickFormat : undefined) - .tickFormat(typeof tickFormat === 'function' ? tickFormat : undefined) + .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) + .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues) ) .call(tickAdjust) - .call(g => g.select('.domain').remove()) + .call(g => g.select(".domain").remove()) .call(g => g - .append('text') - .attr('x', marginLeft) - .attr('y', marginTop + marginBottom - height - 6) - .attr('fill', 'currentColor') - .attr('text-anchor', 'start') - .attr('font-weight', 'bold') - .attr('class', 'title') + .append("text") + .attr("x", marginLeft) + .attr("y", marginTop + marginBottom - height - 6) + .attr("fill", "currentColor") + .attr("text-anchor", "start") + .attr("font-weight", "bold") + .attr("class", "title") .text(title) ); diff --git a/apps/platform/src/components/AssociationsToolkit/utils/index.js b/apps/platform/src/components/AssociationsToolkit/utils/index.js index 641944f44..31bdd89be 100644 --- a/apps/platform/src/components/AssociationsToolkit/utils/index.js +++ b/apps/platform/src/components/AssociationsToolkit/utils/index.js @@ -1,31 +1,31 @@ -import { scaleQuantize, rgb } from 'd3'; -import Legend from './Legend'; -import dataSources from '../static_datasets/dataSourcesAssoc'; -import config from '../../../config'; +import { scaleQuantize, rgb } from "d3"; +import Legend from "./Legend"; +import dataSources from "../static_datasets/dataSourcesAssoc"; +import config from "../../../config"; export const { isPartnerPreview } = config.profile; -const ASSOCIATION_LEGEND_LABEL = 'Association score'; -const PRIORITISATION_LEGEND_LABEL = 'Prioritisation indicator'; -const TARGE_PRIORITISATION_LEGEND_TICKS = ['Unfavourable', 'Favourable']; +const ASSOCIATION_LEGEND_LABEL = "Association score"; +const PRIORITISATION_LEGEND_LABEL = "Prioritisation indicator"; +const TARGE_PRIORITISATION_LEGEND_TICKS = ["Unfavourable", "Favourable"]; export const DISPLAY_MODE = { - PRIORITISATION: 'prioritisations', - ASSOCIATIONS: 'associations', + PRIORITISATION: "prioritisations", + ASSOCIATIONS: "associations", }; export const ENTITIES = { - TARGET: 'target', - EVIDENCE: 'evidence', - DISEASE: 'disease', - DRUG: 'drug', + TARGET: "target", + EVIDENCE: "evidence", + DISEASE: "disease", + DRUG: "drug", }; export const groupViewColumnsBy = (input, key) => input.reduce((acc, currentValue) => { const groupKey = currentValue[key]; const { isPrivate } = currentValue; - if (isPrivate === false || typeof isPrivate === 'undefined') { + if (isPrivate === false || typeof isPrivate === "undefined") { if (!acc[groupKey]) { acc[groupKey] = []; } @@ -42,22 +42,15 @@ export const groupViewColumnsBy = (input, key) => /* --- TABLE SHARED HELPERS --- */ export const getPriorisationSectionId = columnDef => columnDef.sectionId; -export const getCellId = ( - cell, - entityToGet, - displayedTable, - tablePrefix = null -) => { +export const getCellId = (cell, entityToGet, displayedTable, tablePrefix = null) => { const colId = cell.column.id; const rowId = cell.row.original[entityToGet].id; const sectionId = - displayedTable === 'associations' - ? cell.column.id - : cell.column.columnDef.sectionId; + displayedTable === "associations" ? cell.column.id : cell.column.columnDef.sectionId; return [rowId, colId, sectionId, tablePrefix]; }; -export const cellHasValue = score => typeof score === 'number'; +export const cellHasValue = score => typeof score === "number"; export const defaulDatasourcesWeigths = dataSources.map(({ id, weight }) => ({ id, @@ -66,45 +59,42 @@ export const defaulDatasourcesWeigths = dataSources.map(({ id, weight }) => ({ })); export const getWightSourceDefault = source => { - const sourcesDetails = defaulDatasourcesWeigths.find( - src => src.id === source - ); + const sourcesDetails = defaulDatasourcesWeigths.find(src => src.id === source); return sourcesDetails.weight; }; export const checkBoxPayload = (id, aggregationId) => ({ id, path: [aggregationId, id], - name: 'dataTypes', + name: "dataTypes", }); -export const getControlChecked = (values, id) => - values.filter(val => val.id === id).length > 0; +export const getControlChecked = (values, id) => values.filter(val => val.id === id).length > 0; /* --- CONSTANTS --- */ const { primaryColor } = config.profile; /* Associations colors */ export const ASSOCIATION_COLORS = [ - rgb('#deebf7'), - rgb('#c6dbef'), - rgb('#9ecae1'), - rgb('#6baed6'), - rgb('#4292c6'), - rgb('#2171b5'), - rgb('#08519c'), + rgb("#deebf7"), + rgb("#c6dbef"), + rgb("#9ecae1"), + rgb("#6baed6"), + rgb("#4292c6"), + rgb("#2171b5"), + rgb("#08519c"), ]; /* PRIORITIZATION */ // Red to blue export const PRIORITISATION_COLORS = [ - rgb('#ec2746'), - rgb('#f16d47'), - rgb('#f19d5c'), - rgb('#f0c584'), - rgb('#c8b95f'), - rgb('#95ae43'), - rgb('#52a237'), + rgb("#ec2746"), + rgb("#f16d47"), + rgb("#f19d5c"), + rgb("#f0c584"), + rgb("#c8b95f"), + rgb("#95ae43"), + rgb("#52a237"), ]; /* ASSOCIATION SCALE */ @@ -113,9 +103,7 @@ export const assocScale = asscScaleDomain.range(ASSOCIATION_COLORS); /* PRIORITISATION SCALE */ export const prioritizationScaleDomain = scaleQuantize().domain([-1, 1]); -export const prioritizationScale = prioritizationScaleDomain.range( - PRIORITISATION_COLORS -); +export const prioritizationScale = prioritizationScaleDomain.range(PRIORITISATION_COLORS); /* LEGENDS */ const PrioritisationLegend = Legend(prioritizationScale, { @@ -123,17 +111,17 @@ const PrioritisationLegend = Legend(prioritizationScale, { tickFormat: (d, i) => [ TARGE_PRIORITISATION_LEGEND_TICKS[0], - ' ', - ' ', - ' ', - ' ', + " ", + " ", + " ", + " ", TARGE_PRIORITISATION_LEGEND_TICKS[1], ][i], }); const AssociationsLegend = Legend(assocScale, { title: ASSOCIATION_LEGEND_LABEL, - tickFormat: '.1f', + tickFormat: ".1f", }); export const getLegend = isAssoc => { @@ -146,20 +134,20 @@ export const getScale = isAssoc => (isAssoc ? assocScale : prioritizationScale); /* --- CSS VARIABLES --- */ export const tableCSSVariables = { - '--grey-lighter': '#f6f6f6', - '--grey-light': '#ececec', - '--grey-mid': '#b8b8b8', - '--primary-color': primaryColor, - '--text-color': '#5A5F5F', - '--aggregations-background-color': 'var(--grey-light)', - '--aggregations-border-color': 'var(--grey-mid)', - '--header-border-color': 'var(--grey-light)', + "--grey-lighter": "#f6f6f6", + "--grey-light": "#ececec", + "--grey-mid": "#b8b8b8", + "--primary-color": primaryColor, + "--text-color": "#5A5F5F", + "--aggregations-background-color": "var(--grey-light)", + "--aggregations-border-color": "var(--grey-mid)", + "--header-border-color": "var(--grey-light)", // '--aggregations-color': 'var(--grey-mid)', - '--entities-border-color': 'var(--grey-light)', - '--table-header-min-width': '120px', - '--table-header-max-width': '160px', - '--table-left-column-width': '260px', - '--table-footer-border-color': 'var(--grey-light)', - '--row-hover-color': 'var(--grey-light)', - '--colums-controls-color': 'var(--grey-lighter)', + "--entities-border-color": "var(--grey-light)", + "--table-header-min-width": "120px", + "--table-header-max-width": "160px", + "--table-left-column-width": "260px", + "--table-footer-border-color": "var(--grey-light)", + "--row-hover-color": "var(--grey-light)", + "--colums-controls-color": "var(--grey-lighter)", }; diff --git a/apps/platform/src/components/Facets/Facet.jsx b/apps/platform/src/components/Facets/Facet.jsx index ac216e4e3..0b38a437a 100644 --- a/apps/platform/src/components/Facets/Facet.jsx +++ b/apps/platform/src/components/Facets/Facet.jsx @@ -4,31 +4,27 @@ import { AccordionSummary, IconButton, Typography, -} from '@mui/material'; -import { - faChevronRight, - faChevronDown, - faXmark, -} from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +} from "@mui/material"; +import { faChevronRight, faChevronDown, faXmark } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { TreeView } from '@mui/lab'; -import { makeStyles } from '@mui/styles'; +import { TreeView } from "@mui/lab"; +import { makeStyles } from "@mui/styles"; -import { hasAnyDescendantChecked } from './utils'; -import TreeLevel from './TreeLevel'; +import { hasAnyDescendantChecked } from "./utils"; +import TreeLevel from "./TreeLevel"; const useStyles = makeStyles({ accordionSummaryContent: { - alignItems: 'center', - justifyContent: 'space-between', - margin: '0 !important', + alignItems: "center", + justifyContent: "space-between", + margin: "0 !important", }, clearButtonRoot: { - height: 'unset', + height: "unset", }, facetRoot: { - width: '100%', + width: "100%", }, }); diff --git a/apps/platform/src/components/Facets/Facets.jsx b/apps/platform/src/components/Facets/Facets.jsx index 9b0fb529c..ca9674c22 100644 --- a/apps/platform/src/components/Facets/Facets.jsx +++ b/apps/platform/src/components/Facets/Facets.jsx @@ -1,16 +1,10 @@ -import { useEffect, useState } from 'react'; -import { - Typography, - Box, - CircularProgress, - IconButton, - Skeleton, -} from '@mui/material'; -import { faXmark } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { makeStyles } from '@mui/styles'; - -import Facet from './Facet'; +import { useEffect, useState } from "react"; +import { Typography, Box, CircularProgress, IconButton, Skeleton } from "@mui/material"; +import { faXmark } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { makeStyles } from "@mui/styles"; + +import Facet from "./Facet"; import { getFilters, hasAllChildrenChecked, @@ -19,30 +13,30 @@ import { updateFacetCounts, setAllChildren, traverse, -} from './utils'; +} from "./utils"; const useStyles = makeStyles({ facetSummary: { - alignItems: 'center', - display: 'flex', - justifyContent: 'space-between', + alignItems: "center", + display: "flex", + justifyContent: "space-between", }, loadingContainer: { - alignItems: 'center', - display: 'flex', + alignItems: "center", + display: "flex", - '& > div': { - marginRight: '.5rem', + "& > div": { + marginRight: ".5rem", }, }, subtitle1: { - marginBottom: '1rem !important', - fontWeight: 'bold !important', + marginBottom: "1rem !important", + fontWeight: "bold !important", }, subtitle2: { - marginTop: '1rem !important', - marginBottom: '1rem !important', - fontWeight: 'bold !important', + marginTop: "1rem !important", + marginBottom: "1rem !important", + fontWeight: "bold !important", }, }); @@ -69,8 +63,7 @@ function Facets({ loading, data, onChange, type }) { node.checked = newValue; if (!newValue && parent) parent.checked = false; - if (parent && !parent.root && hasAllChildrenChecked(parent)) - parent.checked = true; + if (parent && !parent.root && hasAllChildrenChecked(parent)) parent.checked = true; setAllChildren(node, newValue); const filters = getFilters(newFacets); @@ -113,9 +106,7 @@ function Facets({ loading, data, onChange, type }) { )} {facets.length > 0 && ( <> - - Evidence-specific filters - + Evidence-specific filters - {type === 'target' ? 'Target' : 'Disease/phenotype'}-specific - filters + {type === "target" ? "Target" : "Disease/phenotype"}-specific filters {facets.slice(1).map(facet => ( ({ countLabel: { - fontSize: '.7rem', - fontWeight: 'bold', + fontSize: ".7rem", + fontWeight: "bold", color: theme.palette.grey[500], }, formControlLabelRoot: { - minWidth: '85%', + minWidth: "85%", }, FormControlLabelLabel: { - fontSize: '.9rem', - display: 'flex', - maxWidth: '100%', - paddingRight: '15%', + fontSize: ".9rem", + display: "flex", + maxWidth: "100%", + paddingRight: "15%", }, treeItemRoot: { - '&:focus > $treeItemContent $treeItemLabel': { - backgroundColor: 'transparent', + "&:focus > $treeItemContent $treeItemLabel": { + backgroundColor: "transparent", }, - '&$treeItemSelected > $treeItemContent $treeItemLabel': { - backgroundColor: 'transparent', + "&$treeItemSelected > $treeItemContent $treeItemLabel": { + backgroundColor: "transparent", }, - '&$treeItemSelected:focus > $treeItemContent $treeItemLabel': { - backgroundColor: 'transparent', + "&$treeItemSelected:focus > $treeItemContent $treeItemLabel": { + backgroundColor: "transparent", }, - '&$treeItemSelected > $treeItemContent $treeItemLabel:hover': { - backgroundColor: 'transparent', + "&$treeItemSelected > $treeItemContent $treeItemLabel:hover": { + backgroundColor: "transparent", }, }, treeItemContent: { - '&:hover': { + "&:hover": { backgroundColor: theme.palette.grey[200], }, }, treeItemSelected: {}, treeItemLabel: { - alignItems: 'center', - display: 'flex', - justifyContent: 'space-between', - width: '91%', - '&:hover': { - backgroundColor: 'transparent', + alignItems: "center", + display: "flex", + justifyContent: "space-between", + width: "91%", + "&:hover": { + backgroundColor: "transparent", }, }, treeItemLabelText: { - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', + overflow: "hidden", + textOverflow: "ellipsis", + whiteSpace: "nowrap", }, treeItemLabelIcon: { - marginLeft: '0.5em', + marginLeft: "0.5em", }, })); @@ -98,7 +98,7 @@ function TreeItem({ color="primary" checked={checked} indeterminate={indeterminate} - sx={{ padding: '4px' }} + sx={{ padding: "4px" }} /> } label={ diff --git a/apps/platform/src/components/Facets/TreeLevel.jsx b/apps/platform/src/components/Facets/TreeLevel.jsx index a1ba11fbe..1839f0c43 100644 --- a/apps/platform/src/components/Facets/TreeLevel.jsx +++ b/apps/platform/src/components/Facets/TreeLevel.jsx @@ -1,5 +1,5 @@ -import TreeItem from './TreeItem'; -import { hasSomeChildrenChecked } from './utils'; +import TreeItem from "./TreeItem"; +import { hasSomeChildrenChecked } from "./utils"; function TreeLevel({ loading, levelId, aggs, onSelectionChange }) { const handleSelectionChange = newSelection => { diff --git a/apps/platform/src/components/Facets/index.js b/apps/platform/src/components/Facets/index.js index f049799c3..5abb74a8b 100644 --- a/apps/platform/src/components/Facets/index.js +++ b/apps/platform/src/components/Facets/index.js @@ -1 +1 @@ -export { default as Facets } from './Facets'; +export { default as Facets } from "./Facets"; diff --git a/apps/platform/src/components/Facets/utils.js b/apps/platform/src/components/Facets/utils.js index 8e77bd96f..451d2cb17 100644 --- a/apps/platform/src/components/Facets/utils.js +++ b/apps/platform/src/components/Facets/utils.js @@ -1,6 +1,6 @@ -import dataTypes from '../../dataTypes'; -import dataSources from '../../dataSources'; -import config from '../../config'; +import dataTypes from "../../dataTypes"; +import dataSources from "../../dataSources"; +import config from "../../config"; const facetData = [...dataTypes, ...dataSources]; @@ -9,13 +9,13 @@ export const fixLabel = id => { if (label) return label; - if (id === 'tractabilityProtac') { - return 'Tractability PROTAC'; + if (id === "tractabilityProtac") { + return "Tractability PROTAC"; } // only do this for ids that start with a lowercase character if (/^[a-z]/.test(id)) { - const spacedLabel = id.replace(/([a-z])([A-Z])/g, '$1 $2'); + const spacedLabel = id.replace(/([a-z])([A-Z])/g, "$1 $2"); return `${spacedLabel[0].toUpperCase()}${spacedLabel.slice(1)}`; } @@ -26,8 +26,7 @@ export const fixLabel = id => { * Check if specified facet (id) is set as private * in the facet data (so datatypes and datasource) */ -const fixIsPrivate = id => - facetData.find(item => item.id === id)?.isPrivate || false; +const fixIsPrivate = id => facetData.find(item => item.id === id)?.isPrivate || false; /** * Filter a level in the datatypes facets based on config where @@ -43,9 +42,7 @@ const sortLevel = (a, b) => { const aIndex = facetData.findIndex(item => item.id === a.nodeId); const bIndex = facetData.findIndex(item => item.id === b.nodeId); - return aIndex !== -1 && bIndex !== -1 - ? aIndex - bIndex - : a.nodeId.localeCompare(b.nodeId); + return aIndex !== -1 && bIndex !== -1 ? aIndex - bIndex : a.nodeId.localeCompare(b.nodeId); }; const extractLevel = level => @@ -67,8 +64,7 @@ export const prepareFacetData = data => extractLevel(data) || []; const updateLevel = (facets, data = []) => { facets.forEach(facet => { const newFacet = data.find( - searchElement => - facet.nodeId === (searchElement.key || searchElement.name) + searchElement => facet.nodeId === (searchElement.key || searchElement.name) ); const newCount = newFacet?.uniques || 0; facet.count = newCount; @@ -79,8 +75,7 @@ const updateLevel = (facets, data = []) => { return facets; }; -export const updateFacetCounts = (facets, data) => - updateLevel([...facets], data); +export const updateFacetCounts = (facets, data) => updateLevel([...facets], data); // Facet tree tools export const traverse = (tree, path, parent) => { @@ -98,8 +93,7 @@ export const setAllChildren = (tree, value) => setAllChildren(branch, value); }); -export const hasAllChildrenChecked = level => - level.aggs?.every(agg => agg.checked); +export const hasAllChildrenChecked = level => level.aggs?.every(agg => agg.checked); export const hasSomeChildrenChecked = level => level.aggs?.some(agg => agg.checked) && !hasAllChildrenChecked(level); diff --git a/apps/platform/src/components/ShouldAccessPPP.tsx b/apps/platform/src/components/ShouldAccessPPP.tsx index 1299c1f2b..115f2f6c8 100644 --- a/apps/platform/src/components/ShouldAccessPPP.tsx +++ b/apps/platform/src/components/ShouldAccessPPP.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useState } from "react"; import { Dialog, DialogTitle, @@ -8,32 +8,31 @@ import { Button, Snackbar, styled, -} from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { useLocation } from 'react-router-dom'; +} from "@mui/material"; +import { makeStyles } from "@mui/styles"; +import { useLocation } from "react-router-dom"; -const PPP_API_URL = - 'https://api.partner-platform.opentargets.org/api/v4/graphql'; -const PPP_WEB_URL = 'https://partner-platform.opentargets.org'; +const PPP_API_URL = "https://api.partner-platform.opentargets.org/api/v4/graphql"; +const PPP_WEB_URL = "https://partner-platform.opentargets.org"; const FOURTEEN = 14; const useStyles = makeStyles(theme => ({ paper: { - padding: '1em 1em 2em', - borderRadius: '12px', + padding: "1em 1em 2em", + borderRadius: "12px", }, actions: { - '@media (max-width: 767px)': { - flexDirection: 'column', + "@media (max-width: 767px)": { + flexDirection: "column", }, }, button: { - '@media (max-width: 767px)': { - minHeight: 'auto', - height: '100%', - width: '100%', - margin: '0 !important', - marginTop: '0.3em !important', + "@media (max-width: 767px)": { + minHeight: "auto", + height: "100%", + width: "100%", + margin: "0 !important", + marginTop: "0.3em !important", }, }, })); @@ -53,14 +52,12 @@ function ShouldAccessPPP() { const windowLocation = window.location.href; // escape validation on dev mode if (import.meta.env.DEV) return false; - return !windowLocation.includes('partner'); + return !windowLocation.includes("partner"); }; const shouldShowPopupAfterFixedDays = (DAYS: number) => { const currentDate = new Date(); - const oldDateObject = JSON.parse( - localStorage.getItem('ppp-reminder-closed-on') || '{}' - ); + const oldDateObject = JSON.parse(localStorage.getItem("ppp-reminder-closed-on") || "{}"); if (!oldDateObject.date) return true; const oldDate = new Date(oldDateObject.date); const diffInTime = Math.abs(currentDate.getTime() - oldDate.getTime()); @@ -83,19 +80,16 @@ function ShouldAccessPPP() { const remindMeLater = () => { handleCloseDialog(); - localStorage.setItem( - 'ppp-reminder-closed-on', - JSON.stringify({ date: new Date() }) - ); + localStorage.setItem("ppp-reminder-closed-on", JSON.stringify({ date: new Date() })); setSnackbarOpen(true); }; const checkPPPaccess = () => { fetch(PPP_API_URL, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, + method: "POST", + headers: { "Content-Type": "application/json" }, body: JSON.stringify({ - operationName: 'DataVersion', + operationName: "DataVersion", variables: {}, query: `query DataVersion { meta { @@ -114,13 +108,12 @@ function ShouldAccessPPP() { if (response.status === 200) handleOpenDialog(); }) .catch(() => { - console.log('Does not have access to Partner Preview Platform'); + console.log("Does not have access to Partner Preview Platform"); }); }; useEffect(() => { - if (isOnPublic() && shouldShowPopupAfterFixedDays(FOURTEEN)) - checkPPPaccess(); + if (isOnPublic() && shouldShowPopupAfterFixedDays(FOURTEEN)) checkPPPaccess(); }, []); const goToPPP = () => { @@ -137,25 +130,17 @@ function ShouldAccessPPP() { paper: classes.paper, }} > - - Looks like you are part of the Open Targets Consortium! - + Looks like you are part of the Open Targets Consortium! - We are pleased to inform you that you have access to our exclusive - Partner Preview Platform (PPP). This will have - pre-publication data from OTAR projects in addition to all the - publicly available data, providing early access to the latest - features, updates, and innovations before they are made available to - the public. + We are pleased to inform you that you have access to our exclusive Partner Preview + Platform (PPP). This will have pre-publication data from OTAR projects in + addition to all the publicly available data, providing early access to the latest + features, updates, and innovations before they are made available to the public. - { @@ -288,48 +288,48 @@ export const phaseMap = clinicalPhase => { }; export const sourceMap = { - 'FDA Information': 'FDA', - FDA: 'FDA', - 'Clinical Trials Information': 'ClinicalTrials.gov', - ClinicalTrials: 'ClinicalTrials.gov', - 'DailyMed Information': 'DailyMed', - DailyMed: 'DailyMed', - 'ATC Information': 'ATC', - ATC: 'ATC', + "FDA Information": "FDA", + FDA: "FDA", + "Clinical Trials Information": "ClinicalTrials.gov", + ClinicalTrials: "ClinicalTrials.gov", + "DailyMed Information": "DailyMed", + DailyMed: "DailyMed", + "ATC Information": "ATC", + ATC: "ATC", }; export const clinvarStarMap = { - 'practice guideline': 4, - 'reviewed by expert panel': 3, - 'criteria provided, multiple submitters, no conflicts': 2, - 'criteria provided, conflicting interpretations': 1, - 'criteria provided, single submitter': 1, - 'no assertion for the individual variant': 0, - 'no assertion criteria provided': 0, - 'no assertion provided': 0, + "practice guideline": 4, + "reviewed by expert panel": 3, + "criteria provided, multiple submitters, no conflicts": 2, + "criteria provided, conflicting interpretations": 1, + "criteria provided, single submitter": 1, + "no assertion for the individual variant": 0, + "no assertion criteria provided": 0, + "no assertion provided": 0, }; export const formatMap = { - json: 'JSON', - parquet: 'Parquet', + json: "JSON", + parquet: "Parquet", }; export const studySourceMap = { - FINNGEN: 'FinnGen', - GCST: 'GWAS Catalog', - SAIGE: 'UK Biobank', - NEALE: 'UK Biobank', + FINNGEN: "FinnGen", + GCST: "GWAS Catalog", + SAIGE: "UK Biobank", + NEALE: "UK Biobank", }; export const variantConsequenceSource = { VEP: { - label: 'VEP', - tooltip: 'Ensembl variant effect predictor', + label: "VEP", + tooltip: "Ensembl variant effect predictor", }, - ProtVar: { label: 'ProtVar', tooltip: 'Variant effect on protein function' }, + ProtVar: { label: "ProtVar", tooltip: "Variant effect on protein function" }, QTL: { - label: 'QTL', + label: "QTL", tooltip: - 'The direction is inferred from the strongest effect across all the co-localising QTLs', + "The direction is inferred from the strongest effect across all the co-localising QTLs", }, }; diff --git a/apps/platform/src/contexts/PlatformApiProvider.jsx b/apps/platform/src/contexts/PlatformApiProvider.jsx index bfdf5536a..b1241209a 100644 --- a/apps/platform/src/contexts/PlatformApiProvider.jsx +++ b/apps/platform/src/contexts/PlatformApiProvider.jsx @@ -1,7 +1,7 @@ -import { useMemo, createContext } from 'react'; -import { useQuery } from '@apollo/client'; +import { useMemo, createContext } from "react"; +import { useQuery } from "@apollo/client"; -import productionClient from '../client'; +import productionClient from "../client"; const PlatformApiContext = createContext(); @@ -21,9 +21,7 @@ function PlatformApiProvider({ ); return ( - - {children} - + {children} ); } diff --git a/apps/platform/src/dataSources.js b/apps/platform/src/dataSources.js index b690f3acb..3d3887279 100644 --- a/apps/platform/src/dataSources.js +++ b/apps/platform/src/dataSources.js @@ -1,131 +1,131 @@ -import { isPrivateDataSource } from './utils/partnerPreviewUtils'; +import { isPrivateDataSource } from "./utils/partnerPreviewUtils"; const dataSources = [ { - id: 'ot_genetics_portal', // ot_genetics_portal - label: 'Open Targets Genetics', - isPrivate: isPrivateDataSource('ot_genetics_portal'), + id: "ot_genetics_portal", // ot_genetics_portal + label: "Open Targets Genetics", + isPrivate: isPrivateDataSource("ot_genetics_portal"), }, - { id: 'eva', label: 'ClinVar', isPrivate: isPrivateDataSource('eva') }, // eva + { id: "eva", label: "ClinVar", isPrivate: isPrivateDataSource("eva") }, // eva { - id: 'gene_burden', // gene_burden - label: 'Gene Burden', - isPrivate: isPrivateDataSource('cancer_biomarkers'), + id: "gene_burden", // gene_burden + label: "Gene Burden", + isPrivate: isPrivateDataSource("cancer_biomarkers"), }, { - id: 'genomics_england', - label: 'GEL PanelApp', - isPrivate: isPrivateDataSource('genomics_england'), + id: "genomics_england", + label: "GEL PanelApp", + isPrivate: isPrivateDataSource("genomics_england"), }, { - id: 'gene2phenotype', // gene2phenotype - label: 'Gene2phenotype', - isPrivate: isPrivateDataSource('gene2phenotype'), + id: "gene2phenotype", // gene2phenotype + label: "Gene2phenotype", + isPrivate: isPrivateDataSource("gene2phenotype"), }, { - id: 'uniprot_literature', // uniprot_literature - label: 'UniProt literature', - isPrivate: isPrivateDataSource('uniprot_literature'), + id: "uniprot_literature", // uniprot_literature + label: "UniProt literature", + isPrivate: isPrivateDataSource("uniprot_literature"), }, { - id: 'clingen', // clingen - label: 'Clingen', - isPrivate: isPrivateDataSource('clingen'), + id: "clingen", // clingen + label: "Clingen", + isPrivate: isPrivateDataSource("clingen"), }, { - id: 'cancer_gene_census', // cancer_gene_census - label: 'Cancer Gene Census', - isPrivate: isPrivateDataSource('cancer_gene_census'), + id: "cancer_gene_census", // cancer_gene_census + label: "Cancer Gene Census", + isPrivate: isPrivateDataSource("cancer_gene_census"), }, { - id: 'intogen', // intogen - label: 'IntOGen', - isPrivate: isPrivateDataSource('intogen'), + id: "intogen", // intogen + label: "IntOGen", + isPrivate: isPrivateDataSource("intogen"), }, { - id: 'eva_somatic', // eva_somatic - label: 'ClinVar (somatic)', - isPrivate: isPrivateDataSource('eva_somatic'), + id: "eva_somatic", // eva_somatic + label: "ClinVar (somatic)", + isPrivate: isPrivateDataSource("eva_somatic"), }, - { id: 'chembl', label: 'ChEMBL', isPrivate: isPrivateDataSource('chembl') }, + { id: "chembl", label: "ChEMBL", isPrivate: isPrivateDataSource("chembl") }, { - id: 'crispr_screen', // crispr_screen - label: 'CRISPR Screens', - isPrivate: isPrivateDataSource('crispr_screen'), + id: "crispr_screen", // crispr_screen + label: "CRISPR Screens", + isPrivate: isPrivateDataSource("crispr_screen"), }, { - id: 'crispr', // crispr - label: 'Project Score', - isPrivate: isPrivateDataSource('crispr'), + id: "crispr", // crispr + label: "Project Score", + isPrivate: isPrivateDataSource("crispr"), }, { - id: 'slapenrich', // slapenrich - label: 'SLAPenrich', - isPrivate: isPrivateDataSource('slapenrich'), + id: "slapenrich", // slapenrich + label: "SLAPenrich", + isPrivate: isPrivateDataSource("slapenrich"), }, { - id: 'progeny', // progeny - label: 'PROGENy', - isPrivate: isPrivateDataSource('progeny'), + id: "progeny", // progeny + label: "PROGENy", + isPrivate: isPrivateDataSource("progeny"), }, { - id: 'reactome', // reactome - label: 'Reactome', - isPrivate: isPrivateDataSource('reactome'), + id: "reactome", // reactome + label: "Reactome", + isPrivate: isPrivateDataSource("reactome"), }, { - id: 'sysbio', // sysbio - label: 'Gene signatures', - isPrivate: isPrivateDataSource('sysbio'), + id: "sysbio", // sysbio + label: "Gene signatures", + isPrivate: isPrivateDataSource("sysbio"), }, { - id: 'europepmc', // europepmc - label: 'Europe PMC', - isPrivate: isPrivateDataSource('europepmc'), + id: "europepmc", // europepmc + label: "Europe PMC", + isPrivate: isPrivateDataSource("europepmc"), }, { - id: 'expression_atlas', // expression_atlas - label: 'Expression Atlas', - isPrivate: isPrivateDataSource('expression_atlas'), + id: "expression_atlas", // expression_atlas + label: "Expression Atlas", + isPrivate: isPrivateDataSource("expression_atlas"), }, { - id: 'impc', // impc - label: 'IMPC', - isPrivate: isPrivateDataSource('impc'), + id: "impc", // impc + label: "IMPC", + isPrivate: isPrivateDataSource("impc"), }, { - id: 'uniprot_variants', // uniprot_variants - label: 'UniProt curated variants', - isPrivate: isPrivateDataSource('uniprot_variants'), + id: "uniprot_variants", // uniprot_variants + label: "UniProt curated variants", + isPrivate: isPrivateDataSource("uniprot_variants"), }, { - id: 'orphanet', // orphanet - label: 'Orphanet', - isPrivate: isPrivateDataSource('orphanet'), + id: "orphanet", // orphanet + label: "Orphanet", + isPrivate: isPrivateDataSource("orphanet"), }, // Private { - id: 'ot_crispr', // ot_crispr - label: 'OTAR CRISPR', - isPrivate: isPrivateDataSource('ot_crispr'), + id: "ot_crispr", // ot_crispr + label: "OTAR CRISPR", + isPrivate: isPrivateDataSource("ot_crispr"), }, // Private { - id: 'ot_crispr_validation', // ot_crispr_validation - label: 'OT CRISPR Validation', - isPrivate: isPrivateDataSource('ot_crispr_validation'), + id: "ot_crispr_validation", // ot_crispr_validation + label: "OT CRISPR Validation", + isPrivate: isPrivateDataSource("ot_crispr_validation"), }, // Private { - id: 'encore', - label: 'ENCORE', - isPrivate: isPrivateDataSource('encore'), + id: "encore", + label: "ENCORE", + isPrivate: isPrivateDataSource("encore"), }, { - id: 'cancer_biomarkers', // cancer_biomarkers - label: 'Cancer Biomarkers', - isPrivate: isPrivateDataSource('cancer_biomarkers'), - dataType: 'affected_pathway', + id: "cancer_biomarkers", // cancer_biomarkers + label: "Cancer Biomarkers", + isPrivate: isPrivateDataSource("cancer_biomarkers"), + dataType: "affected_pathway", }, ]; diff --git a/apps/platform/src/dataTypes.js b/apps/platform/src/dataTypes.js index 722768214..52353697e 100644 --- a/apps/platform/src/dataTypes.js +++ b/apps/platform/src/dataTypes.js @@ -1,50 +1,50 @@ -import { isPrivateDataType } from './utils/partnerPreviewUtils'; +import { isPrivateDataType } from "./utils/partnerPreviewUtils"; const dataTypes = [ { - id: 'genetic_association', - label: 'Genetic associations', - isPrivate: isPrivateDataType('genetic_association'), + id: "genetic_association", + label: "Genetic associations", + isPrivate: isPrivateDataType("genetic_association"), }, { - id: 'somatic_mutation', - label: 'Somatic mutations', - isPrivate: isPrivateDataType('somatic_mutation'), + id: "somatic_mutation", + label: "Somatic mutations", + isPrivate: isPrivateDataType("somatic_mutation"), }, { - id: 'known_drug', - label: 'Drugs', - isPrivate: isPrivateDataType('known_drug'), + id: "known_drug", + label: "Drugs", + isPrivate: isPrivateDataType("known_drug"), }, { - id: 'affected_pathway', - label: 'Pathways & systems biology', - isPrivate: isPrivateDataType('affected_pathway'), + id: "affected_pathway", + label: "Pathways & systems biology", + isPrivate: isPrivateDataType("affected_pathway"), }, { - id: 'literature', - label: 'Text mining', - isPrivate: isPrivateDataType('literature'), + id: "literature", + label: "Text mining", + isPrivate: isPrivateDataType("literature"), }, { - id: 'rna_expression', - label: 'RNA expression', - isPrivate: isPrivateDataType('rna_expression'), + id: "rna_expression", + label: "RNA expression", + isPrivate: isPrivateDataType("rna_expression"), }, { - id: 'animal_model', - label: 'Animal models', - isPrivate: isPrivateDataType('animal_model'), + id: "animal_model", + label: "Animal models", + isPrivate: isPrivateDataType("animal_model"), }, { - id: 'ot_partner', - label: 'OTAR Projects', - isPrivate: isPrivateDataType('ot_partner'), + id: "ot_partner", + label: "OTAR Projects", + isPrivate: isPrivateDataType("ot_partner"), }, { - id: 'ot_validation_lab', - label: 'OTAR Validation Lab', - isPrivate: isPrivateDataType('ot_validation_lab'), + id: "ot_validation_lab", + label: "OTAR Validation Lab", + isPrivate: isPrivateDataType("ot_validation_lab"), }, ]; diff --git a/apps/platform/src/documentNode.d.ts b/apps/platform/src/documentNode.d.ts index 098ae670d..e3eb4c530 100644 --- a/apps/platform/src/documentNode.d.ts +++ b/apps/platform/src/documentNode.d.ts @@ -1,5 +1,5 @@ -declare module '*.gql' { - import { DocumentNode } from 'graphql'; +declare module "*.gql" { + import { DocumentNode } from "graphql"; const value: DocumentNode; export = value; diff --git a/apps/platform/src/getPossibleTypes.js b/apps/platform/src/getPossibleTypes.js index 58afb61c4..a9cef81cd 100644 --- a/apps/platform/src/getPossibleTypes.js +++ b/apps/platform/src/getPossibleTypes.js @@ -1,14 +1,14 @@ /* eslint-disable */ // For the reason for the existence of this script, you can find more info here: // https://www.apollographql.com/docs/react/data/fragments/#generating-possibletypes-automatically -const fetch = require('cross-fetch'); -const fs = require('fs'); +const fetch = require("cross-fetch"); +const fs = require("fs"); -const API_HOST = 'https://api-beta-dot-open-targets-eu-dev.appspot.com/api/v4'; +const API_HOST = "https://api-beta-dot-open-targets-eu-dev.appspot.com/api/v4"; fetch(`${API_HOST}/graphql`, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, + method: "POST", + headers: { "Content-Type": "application/json" }, body: JSON.stringify({ variables: {}, query: ` @@ -30,15 +30,13 @@ fetch(`${API_HOST}/graphql`, { .then(result => { const possibleTypes = {}; - const SCHEMA = '__schema'; + const SCHEMA = "__schema"; result.data[SCHEMA].types.forEach(supertype => { if (supertype.possibleTypes) { - possibleTypes[supertype.name] = supertype.possibleTypes.map( - subtype => subtype.name - ); + possibleTypes[supertype.name] = supertype.possibleTypes.map(subtype => subtype.name); } }); - fs.writeFile('./possibleTypes.json', JSON.stringify(possibleTypes)); + fs.writeFile("./possibleTypes.json", JSON.stringify(possibleTypes)); }); diff --git a/apps/platform/src/pages/APIPage/APIPage.jsx b/apps/platform/src/pages/APIPage/APIPage.jsx index aa2a1c1e0..14a3244f1 100644 --- a/apps/platform/src/pages/APIPage/APIPage.jsx +++ b/apps/platform/src/pages/APIPage/APIPage.jsx @@ -1,5 +1,5 @@ -import { Suspense, useState, lazy } from 'react'; -import { LoadingBackdrop, Link } from 'ui'; +import { Suspense, useState, lazy } from "react"; +import { LoadingBackdrop, Link } from "ui"; import { Accordion, AccordionSummary, @@ -8,31 +8,31 @@ import { Grid, Typography, styled, -} from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { faChevronDown } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import 'graphiql/graphiql.min.css'; +} from "@mui/material"; +import { makeStyles } from "@mui/styles"; +import { faChevronDown } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import "graphiql/graphiql.min.css"; -import { fetcher } from '../../utils/global'; +import { fetcher } from "../../utils/global"; const QueryButton = styled(Button)` color: #fff; border: none; `; -import TARGET_ASSOCS from './TargetAssocs.gql'; -import DISEASE_ASSOCS from './DiseaseAssocs.gql'; -import TARGET_DISEASE_EVIDENCE from './TargetDiseaseEvidence.gql'; -import TARGET_ANNOTATION from './TargetAnnotation.gql'; -import DISEASE_ANNOTATION from './DiseaseAnnotation.gql'; -import DRUG_ANNOTATION from './DrugAnnotation.gql'; -import SEARCH_ANNOTATION from './SearchAnnotation.gql'; -import SEARCH_ASSOCS from './SearchAssocs.gql'; +import TARGET_ASSOCS from "./TargetAssocs.gql"; +import DISEASE_ASSOCS from "./DiseaseAssocs.gql"; +import TARGET_DISEASE_EVIDENCE from "./TargetDiseaseEvidence.gql"; +import TARGET_ANNOTATION from "./TargetAnnotation.gql"; +import DISEASE_ANNOTATION from "./DiseaseAnnotation.gql"; +import DRUG_ANNOTATION from "./DrugAnnotation.gql"; +import SEARCH_ANNOTATION from "./SearchAnnotation.gql"; +import SEARCH_ASSOCS from "./SearchAssocs.gql"; // lazy load GraphiQL and remove Logo and Toolbar const GraphiQL = lazy(() => - import('graphiql').then(module => { + import("graphiql").then(module => { // eslint-disable-next-line module.default.Logo = function () { return null; @@ -47,16 +47,16 @@ const GraphiQL = lazy(() => const useStyles = makeStyles({ container: { - minHeight: '600px !important', + minHeight: "600px !important", }, buttonMargin: { - marginBottom: '12px', + marginBottom: "12px", }, }); function APIPage() { const classes = useStyles(); - const [query, setQuery] = useState(''); + const [query, setQuery] = useState(""); return ( <> @@ -64,35 +64,25 @@ function APIPage() { API - The Open Targets Platform is powered by a GraphQL API that supports - graphical queries for a single entity or target-disease association - across our knowledge graph. Read our{' '} - + The Open Targets Platform is powered by a GraphQL API that supports graphical queries for a + single entity or target-disease association across our knowledge graph. Read our{" "} + GraphQL API documentation - {' '} - and visit the{' '} + {" "} + and visit the{" "} Open Targets Community - {' '} + {" "} for more how-to guides and tutorials. - Please note that our API is optimised for a single query. For more - programmatic or systematic analyses, please use{' '} - + Please note that our API is optimised for a single query. For more programmatic or + systematic analyses, please use{" "} + our dataset downloads - {' '} - or{' '} - + {" "} + or{" "} + Google BigQuery instance . @@ -103,12 +93,8 @@ function APIPage() { Example queries - } - > - - Target-disease association - + }> + Target-disease association
@@ -137,26 +123,19 @@ function APIPage() { - } - > - - Target-disease evidence - + }> + Target-disease evidence
- Explore evidence that supports a specific target-disease - association + Explore evidence that supports a specific target-disease association - setQuery(TARGET_DISEASE_EVIDENCE.loc.source.body) - } + onClick={() => setQuery(TARGET_DISEASE_EVIDENCE.loc.source.body)} > Run sample query @@ -164,9 +143,7 @@ function APIPage() { - } - > + }> Target annotation @@ -186,9 +163,7 @@ function APIPage() { - } - > + }> Disease annotation @@ -208,16 +183,13 @@ function APIPage() { - } - > + }> Drug annotation
- Find approval status and withdrawn and black-box warning for a - specific drug + Find approval status and withdrawn and black-box warning for a specific drug - } - > + }> Search page @@ -250,8 +220,8 @@ function APIPage() { Run sample query - Example query to get how many entries there are in each entity - category for Insulin + Example query to get how many entries there are in each entity category for + Insulin import('./APIPage')); +const APIPage = lazy(() => import("./APIPage")); function APIPageWrapper() { return ( diff --git a/apps/platform/src/pages/APIPage/index.js b/apps/platform/src/pages/APIPage/index.js index f4f320fa4..8f1bf715a 100644 --- a/apps/platform/src/pages/APIPage/index.js +++ b/apps/platform/src/pages/APIPage/index.js @@ -1 +1 @@ -export { default } from './APIPageWrapper'; +export { default } from "./APIPageWrapper"; diff --git a/apps/platform/src/pages/DiseasePage/ClassicAssociations.jsx b/apps/platform/src/pages/DiseasePage/ClassicAssociations.jsx index 1caa56cb4..49ba3634c 100644 --- a/apps/platform/src/pages/DiseasePage/ClassicAssociations.jsx +++ b/apps/platform/src/pages/DiseasePage/ClassicAssociations.jsx @@ -1,11 +1,11 @@ -import { useState } from 'react'; -import { Card, CardContent, Grid, Typography } from '@mui/material'; -import { useQuery } from '@apollo/client'; +import { useState } from "react"; +import { Card, CardContent, Grid, Typography } from "@mui/material"; +import { useQuery } from "@apollo/client"; -import ClassicAssociationsTable from './ClassicAssociationsTable'; -import { Facets } from '../../components/Facets'; +import ClassicAssociationsTable from "./ClassicAssociationsTable"; +import { Facets } from "../../components/Facets"; -import DISEASE_FACETS_QUERY from './DiseaseFacets.gql'; +import DISEASE_FACETS_QUERY from "./DiseaseFacets.gql"; function ClassicAssociations({ efoId }) { const [aggregationFilters, setAggregationFilters] = useState([]); @@ -20,13 +20,13 @@ function ClassicAssociations({ efoId }) { const facetData = data?.disease?.associatedTargets.aggregations.aggs; return ( - + {data ? ( <> - {data.disease.associatedTargets.count} targets{' '} - associated with {data.disease.name} + {data.disease.associatedTargets.count} targets associated with{" "} + {data.disease.name} ) : ( Loading... @@ -46,12 +46,9 @@ function ClassicAssociations({ efoId }) { - + - + diff --git a/apps/platform/src/pages/DiseasePage/ClassicAssociationsTable.jsx b/apps/platform/src/pages/DiseasePage/ClassicAssociationsTable.jsx index cf8736f29..1714ac6d8 100644 --- a/apps/platform/src/pages/DiseasePage/ClassicAssociationsTable.jsx +++ b/apps/platform/src/pages/DiseasePage/ClassicAssociationsTable.jsx @@ -1,106 +1,99 @@ -import { useState, useEffect } from 'react'; -import { makeStyles } from '@mui/styles'; -import { Skeleton } from '@mui/material'; -import { - Link, - Table, - PartnerLockIcon, - useBatchDownloader, - usePermissions, - Legend, -} from 'ui'; -import AssocCell from '../../components/AssocCell'; -import dataTypes from '../../dataTypes'; -import client from '../../client'; -import config from '../../config'; +import { useState, useEffect } from "react"; +import { makeStyles } from "@mui/styles"; +import { Skeleton } from "@mui/material"; +import { Link, Table, PartnerLockIcon, useBatchDownloader, usePermissions, Legend } from "ui"; +import AssocCell from "../../components/AssocCell"; +import dataTypes from "../../dataTypes"; +import client from "../../client"; +import config from "../../config"; -import DISEASE_ASSOCIATIONS_QUERY from './DiseaseAssociations.gql'; +import DISEASE_ASSOCIATIONS_QUERY from "./DiseaseAssociations.gql"; const useStyles = makeStyles(theme => ({ root: { - overflow: 'visible', - padding: '2rem 2rem 0 0 !important', + overflow: "visible", + padding: "2rem 2rem 0 0 !important", }, table: { - tableLayout: 'fixed !imortant', + tableLayout: "fixed !imortant", }, sortLabel: { - top: '8px', + top: "8px", }, innerLabel: { - position: 'absolute', - display: 'inline-block', - transformOrigin: '0 0', + position: "absolute", + display: "inline-block", + transformOrigin: "0 0", bottom: 0, - transform: 'rotate(310deg)', - marginBottom: '5px', + transform: "rotate(310deg)", + marginBottom: "5px", }, symbolHeaderCell: { - width: '10% !important', - borderBottom: '0 !important', - height: '140px !important', - verticalAlign: 'bottom !important', - textAlign: 'end !important', - paddingBottom: '.4rem', + width: "10% !important", + borderBottom: "0 !important", + height: "140px !important", + verticalAlign: "bottom !important", + textAlign: "end !important", + paddingBottom: ".4rem", }, nameHeaderCell: { - width: '20%', - borderBottom: '0 !important', - height: '140px !important', - verticalAlign: 'bottom !important', - paddingBottom: '.4rem', + width: "20%", + borderBottom: "0 !important", + height: "140px !important", + verticalAlign: "bottom !important", + paddingBottom: ".4rem", }, headerCell: { - position: 'relative', - borderBottom: '0 !important', - height: '140px !important', - whiteSpace: 'nowrap', - textAlign: 'center !important', - verticalAlign: 'bottom !important', + position: "relative", + borderBottom: "0 !important", + height: "140px !important", + whiteSpace: "nowrap", + textAlign: "center !important", + verticalAlign: "bottom !important", }, overallCell: { - border: '0 !important', - textAlign: 'center !important', - paddingTop: '1px !important', - paddingBottom: '1px !important', - paddingLeft: '1px !important', - paddingRight: '10px !important', + border: "0 !important", + textAlign: "center !important", + paddingTop: "1px !important", + paddingBottom: "1px !important", + paddingLeft: "1px !important", + paddingRight: "10px !important", }, cell: { - border: '0 !important', - height: '20px !important', - textAlign: 'center !important', - padding: '1px 1px !important', - '&:last-child': { + border: "0 !important", + height: "20px !important", + textAlign: "center !important", + padding: "1px 1px !important", + "&:last-child": { paddingRight: 0, }, }, symbolCell: { - border: '0 !important', - width: '20%', - padding: '0 0.5rem 0 0 !important', + border: "0 !important", + width: "20%", + padding: "0 0.5rem 0 0 !important", }, nameCell: { - border: '0 !important', - width: '10%', - padding: '0 0 0 0.5rem !important', + border: "0 !important", + width: "10%", + padding: "0 0 0 0.5rem !important", }, symbolContainer: { - display: 'block', - textAlign: 'end !important', - textOverflow: 'ellipsis', - overflow: 'hidden', + display: "block", + textAlign: "end !important", + textOverflow: "ellipsis", + overflow: "hidden", color: theme.palette.text.primary, - '&:hover': { + "&:hover": { color: theme.palette.text.primary, }, }, nameContainer: { - display: 'block', - textOverflow: 'ellipsis', - overflow: 'hidden', + display: "block", + textOverflow: "ellipsis", + overflow: "hidden", color: theme.palette.text.primary, - '&:hover': { + "&:hover": { color: theme.palette.text.primary, }, }, @@ -109,25 +102,22 @@ const useStyles = makeStyles(theme => ({ function getColumns(efoId, classes, isPartnerPreview) { const columns = [ { - id: 'symbol', - label: 'Symbol', + id: "symbol", + label: "Symbol", classes: { headerCell: classes.symbolHeaderCell, cell: classes.symbolCell, }, exportValue: data => data.target.approvedSymbol, renderCell: row => ( - + {row.symbol} ), }, { - id: 'score', - label: 'Overall association score', + id: "score", + label: "Overall association score", classes: { headerCell: classes.headerCell, cell: classes.overallCell, @@ -159,7 +149,7 @@ function getColumns(efoId, classes, isPartnerPreview) { {dt.label} {dt.isPrivate ? : null} ), - exportLabel: `${dt.label} ${dt.isPrivate ? 'Private' : ''}`, + exportLabel: `${dt.label} ${dt.isPrivate ? "Private" : ""}`, classes: { headerCell: classes.headerCell, innerLabel: classes.innerLabel, @@ -167,36 +157,25 @@ function getColumns(efoId, classes, isPartnerPreview) { cell: classes.cell, }, exportValue: data => { - const datatypeScore = data.datatypeScores.find( - DTScore => DTScore.componentId === dt.id - ); - return datatypeScore ? datatypeScore.score : 'No data'; + const datatypeScore = data.datatypeScores.find(DTScore => DTScore.componentId === dt.id); + return datatypeScore ? datatypeScore.score : "No data"; }, sortable: true, - renderCell: row => ( - - ), + renderCell: row => , }); }); columns.push({ - id: 'name', - label: 'Target name', + id: "name", + label: "Target name", classes: { headerCell: classes.nameHeaderCell, cell: classes.nameCell, }, exportValue: data => data.target.approvedName, - hidden: ['smDown', 'lgOnly'], + hidden: ["smDown", "lgOnly"], renderCell: row => ( - + {row.name} ), @@ -214,9 +193,7 @@ function getRows(data) { score: d.score, }; dataTypes.forEach(dataType => { - const dataTypeScore = d.datatypeScores.find( - DTScore => DTScore.componentId === dataType.id - ); + const dataTypeScore = d.datatypeScores.find(DTScore => DTScore.componentId === dataType.id); if (dataTypeScore) { row[dataType.id] = dataTypeScore.score; @@ -232,8 +209,8 @@ function ClassicAssociationsTable({ efoId, aggregationFilters }) { const [count, setCount] = useState(); const [initialLoading, setInitialLoading] = useState(true); const [loading, setLoading] = useState(false); - const [filter, setFilter] = useState(''); - const [sortBy, setSortBy] = useState('score'); + const [filter, setFilter] = useState(""); + const [sortBy, setSortBy] = useState("score"); const [page, setPage] = useState(0); const [pageSize, setPageSize] = useState(50); @@ -272,11 +249,11 @@ function ClassicAssociationsTable({ efoId, aggregationFilters }) { DISEASE_ASSOCIATIONS_QUERY, { efoId, - filter: filter === '' ? null : filter, + filter: filter === "" ? null : filter, sortBy, aggregationFilters, }, - 'data.disease.associatedTargets' + "data.disease.associatedTargets" ); const handlePageChange = pageChanged => { diff --git a/apps/platform/src/pages/DiseasePage/DiseaseAssociations/index.js b/apps/platform/src/pages/DiseasePage/DiseaseAssociations/index.js index e184215ca..315492f75 100644 --- a/apps/platform/src/pages/DiseasePage/DiseaseAssociations/index.js +++ b/apps/platform/src/pages/DiseasePage/DiseaseAssociations/index.js @@ -1 +1 @@ -export { default } from './DiseaseAssociations'; +export { default } from "./DiseaseAssociations"; diff --git a/apps/platform/src/pages/DiseasePage/Header.jsx b/apps/platform/src/pages/DiseasePage/Header.jsx index 65654a9c5..f3f60d7c8 100644 --- a/apps/platform/src/pages/DiseasePage/Header.jsx +++ b/apps/platform/src/pages/DiseasePage/Header.jsx @@ -1,22 +1,22 @@ -import { faStethoscope } from '@fortawesome/free-solid-svg-icons'; +import { faStethoscope } from "@fortawesome/free-solid-svg-icons"; -import { Header as HeaderBase, ExternalLink, XRefLinks } from 'ui'; +import { Header as HeaderBase, ExternalLink, XRefLinks } from "ui"; const xrefsToDisplay = { - mondo: { label: 'MONDO', urlStem: 'http://purl.obolibrary.org/obo/MONDO_' }, - mesh: { label: 'MeSH', urlStem: 'https://identifiers.org/mesh:' }, - ncit: { label: 'NCIt', urlStem: 'https://identifiers.org/ncit:' }, - meddra: { label: 'MedDRA', urlStem: 'https://identifiers.org/meddra:' }, - umls: { label: 'UMLS', urlStem: 'https://identifiers.org/umls:' }, - orphanet: { label: 'Orphanet', urlStem: 'https://identifiers.org/orphanet:' }, - icd10: { label: 'ICD10', urlStem: 'https://identifiers.org/icd:' }, - omim: { label: 'OMIM', urlStem: 'https://www.omim.org/entry/' }, + mondo: { label: "MONDO", urlStem: "http://purl.obolibrary.org/obo/MONDO_" }, + mesh: { label: "MeSH", urlStem: "https://identifiers.org/mesh:" }, + ncit: { label: "NCIt", urlStem: "https://identifiers.org/ncit:" }, + meddra: { label: "MedDRA", urlStem: "https://identifiers.org/meddra:" }, + umls: { label: "UMLS", urlStem: "https://identifiers.org/umls:" }, + orphanet: { label: "Orphanet", urlStem: "https://identifiers.org/orphanet:" }, + icd10: { label: "ICD10", urlStem: "https://identifiers.org/icd:" }, + omim: { label: "OMIM", urlStem: "https://www.omim.org/entry/" }, }; function processXRefs(dbXRefs) { const xrefs = {}; for (let i = 0; i < dbXRefs.length; i++) { - const [label, id] = dbXRefs[i].split(':'); + const [label, id] = dbXRefs[i].split(":"); const source = label.toLowerCase(); if (xrefsToDisplay[source]) { @@ -43,11 +43,11 @@ function Header({ loading, efoId, name, dbXRefs = [] }) { return ( - {efoId.startsWith('OTAR') ? ( + {efoId.startsWith("OTAR") ? ( `EFO: ${efoId}` ) : ( diff --git a/apps/platform/src/pages/DiseasePage/Profile.jsx b/apps/platform/src/pages/DiseasePage/Profile.jsx index 69d0c1099..9992506cf 100644 --- a/apps/platform/src/pages/DiseasePage/Profile.jsx +++ b/apps/platform/src/pages/DiseasePage/Profile.jsx @@ -1,5 +1,5 @@ -import { gql } from '@apollo/client'; -import { lazy, Suspense } from 'react'; +import { gql } from "@apollo/client"; +import { lazy, Suspense } from "react"; import { PlatformApiProvider, @@ -8,32 +8,22 @@ import { summaryUtils, PrivateWrapper, SectionLoader, -} from 'ui'; +} from "ui"; -import OntologySummary from 'sections/src/disease/Ontology/Summary'; -import KnownDrugsSummary from 'sections/src/disease/KnownDrugs/Summary'; -import BibliographySummary from 'sections/src/disease/Bibliography/Summary'; -import PhenotypesSummary from 'sections/src/disease/Phenotypes/Summary'; -import OTProjectsSummary from 'sections/src/disease/OTProjects/Summary'; +import OntologySummary from "sections/src/disease/Ontology/Summary"; +import KnownDrugsSummary from "sections/src/disease/KnownDrugs/Summary"; +import BibliographySummary from "sections/src/disease/Bibliography/Summary"; +import PhenotypesSummary from "sections/src/disease/Phenotypes/Summary"; +import OTProjectsSummary from "sections/src/disease/OTProjects/Summary"; -import client from '../../client'; -import ProfileHeader from './ProfileHeader'; +import client from "../../client"; +import ProfileHeader from "./ProfileHeader"; -const OntologySection = lazy(() => - import('sections/src/disease/Ontology/Body') -); -const KnownDrugsSection = lazy(() => - import('sections/src/disease/KnownDrugs/Body') -); -const BibliographySection = lazy(() => - import('sections/src/disease/Bibliography/Body') -); -const PhenotypesSection = lazy(() => - import('sections/src/disease/Phenotypes/Body') -); -const OTProjectsSection = lazy(() => - import('sections/src/disease/OTProjects/Body') -); +const OntologySection = lazy(() => import("sections/src/disease/Ontology/Body")); +const KnownDrugsSection = lazy(() => import("sections/src/disease/KnownDrugs/Body")); +const BibliographySection = lazy(() => import("sections/src/disease/Bibliography/Body")); +const PhenotypesSection = lazy(() => import("sections/src/disease/Phenotypes/Body")); +const OTProjectsSection = lazy(() => import("sections/src/disease/OTProjects/Body")); const summaries = [ OntologySummary, @@ -43,11 +33,8 @@ const summaries = [ OTProjectsSummary, ]; -const DISEASE = 'disease'; -const DISEASE_PROFILE_SUMMARY_FRAGMENT = summaryUtils.createSummaryFragment( - summaries, - 'Disease' -); +const DISEASE = "disease"; +const DISEASE_PROFILE_SUMMARY_FRAGMENT = summaryUtils.createSummaryFragment(summaries, "Disease"); const DISEASE_PROFILE_QUERY = gql` query DiseaseProfileQuery($efoId: String!) { disease(efoId: $efoId) { diff --git a/apps/platform/src/pages/DiseasePage/ProfileHeader.jsx b/apps/platform/src/pages/DiseasePage/ProfileHeader.jsx index 43909336a..298d8a5b2 100644 --- a/apps/platform/src/pages/DiseasePage/ProfileHeader.jsx +++ b/apps/platform/src/pages/DiseasePage/ProfileHeader.jsx @@ -1,11 +1,7 @@ -import { usePlatformApi } from 'ui'; -import { - ProfileDescription, - ProfileHeader as BaseProfileHeader, - ProfileChipList, -} from 'ui'; +import { usePlatformApi } from "ui"; +import { ProfileDescription, ProfileHeader as BaseProfileHeader, ProfileChipList } from "ui"; -import DISEASE_PROFILE_HEADER_FRAGMENT from './ProfileHeader.gql'; +import DISEASE_PROFILE_HEADER_FRAGMENT from "./ProfileHeader.gql"; /** * Disease synonyms are organized by "relation", each with a list of "terms". @@ -29,7 +25,7 @@ const parseSynonyms = diseaseSynonyms => { // convert the tooltip array to a string for display in the Tooltip component t.map(tItem => { const syn = tItem; - syn.tooltip = tItem.tooltip.join(', '); + syn.tooltip = tItem.tooltip.join(", "); return syn; }); return t; @@ -44,9 +40,7 @@ function ProfileHeader() { return ( - - {data?.disease.description} - + {data?.disease.description} {diseaseSynonyms.length > 0 ? ( {diseaseSynonyms} diff --git a/apps/platform/src/pages/DiseasePage/index.js b/apps/platform/src/pages/DiseasePage/index.js index b54444db3..435ebd8e0 100644 --- a/apps/platform/src/pages/DiseasePage/index.js +++ b/apps/platform/src/pages/DiseasePage/index.js @@ -1 +1 @@ -export { default } from './DiseasePage'; +export { default } from "./DiseasePage"; diff --git a/apps/platform/src/pages/DownloadsPage/DownloadsDrawer.jsx b/apps/platform/src/pages/DownloadsPage/DownloadsDrawer.jsx index f24289b05..a7bfc69a7 100644 --- a/apps/platform/src/pages/DownloadsPage/DownloadsDrawer.jsx +++ b/apps/platform/src/pages/DownloadsPage/DownloadsDrawer.jsx @@ -1,43 +1,43 @@ -import { useState } from 'react'; -import { Drawer, IconButton, Paper, Typography } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { faXmark } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { formatMap } from '../../constants'; +import { useState } from "react"; +import { Drawer, IconButton, Paper, Typography } from "@mui/material"; +import { makeStyles } from "@mui/styles"; +import { faXmark } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { formatMap } from "../../constants"; const useStyles = makeStyles(theme => ({ backdrop: { - '& .MuiBackdrop-root': { - opacity: '0 !important', + "& .MuiBackdrop-root": { + opacity: "0 !important", }, }, container: { backgroundColor: theme.palette.grey[300], }, title: { - display: 'flex', - justifyContent: 'space-between', - backgroundColor: 'white', - borderBottom: '1px solid #ccc', - fontSize: '1.2rem', - fontWeight: 'bold', - padding: '1rem', + display: "flex", + justifyContent: "space-between", + backgroundColor: "white", + borderBottom: "1px solid #ccc", + fontSize: "1.2rem", + fontWeight: "bold", + padding: "1rem", }, paper: { - width: '420px', - margin: '1.5rem', - padding: '1rem', + width: "420px", + margin: "1.5rem", + padding: "1rem", }, resourceURL: { - marginBottom: '8px', - padding: '10px', - wordBreak: 'break-all', + marginBottom: "8px", + padding: "10px", + wordBreak: "break-all", backgroundColor: theme.palette.grey[800], - color: 'white', + color: "white", }, ftpURL: { - color: 'white', - textDecoration: 'none', + color: "white", + textDecoration: "none", }, })); @@ -82,15 +82,14 @@ function DownloadsDrawer({ title, format, path, month, year, children }) { href={`http://ftp.ebi.ac.uk/pub/databases/opentargets/platform/${year}.${month}/output/etl/${format}${path}`} > ftp.ebi.ac.uk/pub/databases/opentargets/platform/{year}. - {month.toString().padStart(2, '0')}/output/etl/{format} + {month.toString().padStart(2, "0")}/output/etl/{format} {path}
rsync
- rsync -rpltvz --delete - rsync.ebi.ac.uk::pub/databases/opentargets/platform/{year}. - {month.toString().padStart(2, '0')}/output/etl/{format} + rsync -rpltvz --delete rsync.ebi.ac.uk::pub/databases/opentargets/platform/{year}. + {month.toString().padStart(2, "0")}/output/etl/{format} {path} .
@@ -99,7 +98,7 @@ function DownloadsDrawer({ title, format, path, month, year, children }) {
wget --recursive --no-parent --no-host-directories --cut-dirs 8 ftp://ftp.ebi.ac.uk/pub/databases/opentargets/platform/{year}. - {month.toString().padStart(2, '0')}/output/etl/{format} + {month.toString().padStart(2, "0")}/output/etl/{format} {path}
@@ -107,7 +106,7 @@ function DownloadsDrawer({ title, format, path, month, year, children }) {
gsutil -m cp -r gs://open-targets-data-releases/{year}. - {month.toString().padStart(2, '0')} + {month.toString().padStart(2, "0")} /output/etl/{format} {path} .
diff --git a/apps/platform/src/pages/DownloadsPage/DownloadsPage.jsx b/apps/platform/src/pages/DownloadsPage/DownloadsPage.jsx index bcc4b4eb6..9e95fbec1 100644 --- a/apps/platform/src/pages/DownloadsPage/DownloadsPage.jsx +++ b/apps/platform/src/pages/DownloadsPage/DownloadsPage.jsx @@ -1,5 +1,5 @@ -import { Fragment, useState, useEffect } from 'react'; -import { gql, useQuery } from '@apollo/client'; +import { Fragment, useState, useEffect } from "react"; +import { gql, useQuery } from "@apollo/client"; import { Paper, Box, @@ -9,17 +9,17 @@ import { AlertTitle, IconButton, CircularProgress, -} from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Link, DataTable } from 'ui'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faAlignLeft } from '@fortawesome/free-solid-svg-icons'; - -import { defaultRowsPerPageOptions, formatMap } from '../../constants'; -import DownloadsDrawer from './DownloadsDrawer'; -import datasetMappings from './dataset-mappings.json'; -import config from '../../config'; -import DownloadsSchemaDrawer from './DownloadsSchemaDrawer'; +} from "@mui/material"; +import { makeStyles } from "@mui/styles"; +import { Link, DataTable } from "ui"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faAlignLeft } from "@fortawesome/free-solid-svg-icons"; + +import { defaultRowsPerPageOptions, formatMap } from "../../constants"; +import DownloadsDrawer from "./DownloadsDrawer"; +import datasetMappings from "./dataset-mappings.json"; +import config from "../../config"; +import DownloadsSchemaDrawer from "./DownloadsSchemaDrawer"; const useStyles = makeStyles(theme => ({ alert: { @@ -69,11 +69,11 @@ function getRows(downloadData, allDatasetMappings) { function getColumns(date) { const columns = [ - { id: 'niceName', label: 'Dataset' }, - { id: 'description', label: 'Description' }, + { id: "niceName", label: "Dataset" }, + { id: "description", label: "Description" }, { - id: 'formats', - label: 'Format(s)', + id: "formats", + label: "Format(s)", renderCell: ({ niceName, formats }) => formats .sort((a, b) => { @@ -81,9 +81,7 @@ function getColumns(date) { return -1; }) .map(format => ( - + - {' '} + {" "} )), }, { - id: 'schemas', - label: 'Schema', + id: "schemas", + label: "Schema", renderCell: ({ niceName, serialisedSchema }) => ( - - } - /> + + } /> ), }, @@ -148,7 +139,7 @@ function DownloadsPage() { .then(res => res.text()) .then(lines => { if (isCurrent) { - const nodes = lines.trim().split('\n').map(JSON.parse); + const nodes = lines.trim().split("\n").map(JSON.parse); setDownloadsData(nodes); } setLoadingDownloadsData(false); @@ -165,33 +156,24 @@ function DownloadsPage() { Data downloads - The Open Targets Platform is committed to open data and open access - research and all of our data is publicly available for download and can - be used for academic or commercial purposes. Please see our{' '} + The Open Targets Platform is committed to open data and open access research and all of our + data is publicly available for download and can be used for academic or commercial purposes. + Please see our{" "} License documentation - {' '} + {" "} for more information. - For sample scripts to download and parse datasets using Python or R, - please visit our{' '} - + For sample scripts to download and parse datasets using Python or R, please visit our{" "} + Data Downloads documentation + Current data version: {error ? null : getVersion(data)} - Current data version: {error ? null : getVersion(data)} - - - Access archived datasets via{' '} - + Access archived datasets via{" "} + FTP @@ -199,13 +181,12 @@ function DownloadsPage() { {config.isPartnerPreview ? ( Important Note - These data files do not contain any of the custom data found in this - version of the Platform. They are the same files that are available - from the public Platform. To download the data for a specific project, - please visit the{' '} + These data files do not contain any of the custom data found in this version of the + Platform. They are the same files that are available from the public Platform. To download + the data for a specific project, please visit the{" "} Open Targets Intranet - {' '} + {" "} and submit a data request. ) : null} diff --git a/apps/platform/src/pages/DownloadsPage/DownloadsWrapper.jsx b/apps/platform/src/pages/DownloadsPage/DownloadsWrapper.jsx index 438e2d36c..d41afe2d0 100644 --- a/apps/platform/src/pages/DownloadsPage/DownloadsWrapper.jsx +++ b/apps/platform/src/pages/DownloadsPage/DownloadsWrapper.jsx @@ -1,8 +1,8 @@ -import { Suspense, lazy } from 'react'; -import { useLocation } from 'react-router-dom'; -import { LoadingBackdrop, BasePage } from 'ui'; +import { Suspense, lazy } from "react"; +import { useLocation } from "react-router-dom"; +import { LoadingBackdrop, BasePage } from "ui"; -const DownloadsPage = lazy(() => import('./DownloadsPage')); +const DownloadsPage = lazy(() => import("./DownloadsPage")); function DownloadsWrapper() { const location = useLocation(); diff --git a/apps/platform/src/pages/DownloadsPage/index.js b/apps/platform/src/pages/DownloadsPage/index.js index aa364c593..a1b7036e5 100644 --- a/apps/platform/src/pages/DownloadsPage/index.js +++ b/apps/platform/src/pages/DownloadsPage/index.js @@ -1 +1 @@ -export { default } from './DownloadsWrapper'; +export { default } from "./DownloadsWrapper"; diff --git a/apps/platform/src/pages/DownloadsPage/releases.js b/apps/platform/src/pages/DownloadsPage/releases.js index facb96632..eb86abfc3 100644 --- a/apps/platform/src/pages/DownloadsPage/releases.js +++ b/apps/platform/src/pages/DownloadsPage/releases.js @@ -1,98 +1,88 @@ const releases = [ // 20.09 RELEASE { - version: '20.09', - date: '2020 September', + version: "20.09", + date: "2020 September", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.09/output/20.09_association_data.json.gz', - size: '677MB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.09/output/20.09_association_data.json.gz", + size: "677MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.09/output/20.09_evidence_data.json.gz', - size: '3.2GB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.09/output/20.09_evidence_data.json.gz", + size: "3.2GB", }, ], }, { - name: 'Target list', + name: "Target list", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.09/output/20.09_target_list.csv.gz', - size: '910KB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.09/output/20.09_target_list.csv.gz", + size: "910KB", }, { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.09/output/20.09_target_list.json.gz', - size: '1MB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.09/output/20.09_target_list.json.gz", + size: "1MB", }, ], }, { - name: 'Disease list', + name: "Disease list", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.09/output/20.09_disease_list.csv.gz', - size: '292KB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.09/output/20.09_disease_list.csv.gz", + size: "292KB", }, { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.09/output/20.09_disease_list.json.gz', - size: '338KB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.09/output/20.09_disease_list.json.gz", + size: "338KB", }, ], }, { - name: 'Known target safety', + name: "Known target safety", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.09/input/annotation-files/known_target_safety-2020-09-02.json', - size: '345KB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.09/input/annotation-files/known_target_safety-2020-09-02.json", + size: "345KB", }, ], }, { - name: 'Non-clinical experimental toxicity', + name: "Non-clinical experimental toxicity", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.09/input/annotation-files/experimental-toxicity-2020-04-07.tsv', - size: '149KB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.09/input/annotation-files/experimental-toxicity-2020-04-07.tsv", + size: "149KB", }, ], }, { - name: 'Target tractability', + name: "Target tractability", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.09/input/annotation-files/tractability_buckets-2020-08-14.tsv', - size: '28.1MB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.09/input/annotation-files/tractability_buckets-2020-08-14.tsv", + size: "28.1MB", }, ], }, { - name: 'Baseline expression', + name: "Baseline expression", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.09/input/annotation-files/baseline_expression_counts-2020-05-07.tsv', - size: '15.2MB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.09/input/annotation-files/baseline_expression_counts-2020-05-07.tsv", + size: "15.2MB", }, ], }, @@ -101,100 +91,90 @@ const releases = [ // 20.06 RELEASE { - version: '20.06', - date: '2020 June', + version: "20.06", + date: "2020 June", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.06/output/20.06_association_data.json.gz', - size: '767MB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.06/output/20.06_association_data.json.gz", + size: "767MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.06/output/20.06_evidence_data.json.gz', - size: '4.1GB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.06/output/20.06_evidence_data.json.gz", + size: "4.1GB", }, ], }, { - name: 'Target list', + name: "Target list", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.06/output/20.06_target_list.csv.gz', - size: '916KB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.06/output/20.06_target_list.csv.gz", + size: "916KB", }, { - name: 'GZipped JSON', - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.06/output/20.06_target_list.json.gz', - size: '1MB', + name: "GZipped JSON", + url: "https://storage.googleapis.com/open-targets-data-releases/20.06/output/20.06_target_list.json.gz", + size: "1MB", }, ], }, { - name: 'Disease list', + name: "Disease list", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.06/output/20.06_disease_list.csv.gz', - size: '285KB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.06/output/20.06_disease_list.csv.gz", + size: "285KB", }, { - name: 'GZipped JSON', - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.06/output/20.06_disease_list.json.gz', - size: '331KB', + name: "GZipped JSON", + url: "https://storage.googleapis.com/open-targets-data-releases/20.06/output/20.06_disease_list.json.gz", + size: "331KB", }, ], }, { - name: 'Known target safety', + name: "Known target safety", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.06/input/annotation-files/known_target_safety-2020-06-01.json', - size: '349KB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.06/input/annotation-files/known_target_safety-2020-06-01.json", + size: "349KB", }, ], }, { - name: 'Non-clinical experimental toxicity', + name: "Non-clinical experimental toxicity", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.06/input/annotation-files/experimental-toxicity-2020-04-07.tsv', - size: '149KB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.06/input/annotation-files/experimental-toxicity-2020-04-07.tsv", + size: "149KB", }, ], }, { - name: 'Target tractability', + name: "Target tractability", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.06/input/annotation-files/tractability_buckets-2020-05-14.tsv', - size: '18MB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.06/input/annotation-files/tractability_buckets-2020-05-14.tsv", + size: "18MB", }, ], }, { - name: 'Baseline expression', + name: "Baseline expression", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.06/input/annotation-files/baseline_expression_counts-2020-05-07.tsv', - size: '15MB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.06/input/annotation-files/baseline_expression_counts-2020-05-07.tsv", + size: "15MB", }, ], }, @@ -203,90 +183,81 @@ const releases = [ // 20.04 RELEASE { - version: '20.04', - date: '2020 April', + version: "20.04", + date: "2020 April", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.04/output/20.04_association_data.json.gz', - size: '878MB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.04/output/20.04_association_data.json.gz", + size: "878MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.04/output/20.04_evidence_data.json.gz', - size: '4.4GB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.04/output/20.04_evidence_data.json.gz", + size: "4.4GB", }, ], }, { - name: 'Target list', + name: "Target list", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.04/output/20.04_target_list.csv.gz', - size: '918KB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.04/output/20.04_target_list.csv.gz", + size: "918KB", }, { - name: 'GZipped JSON', - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.04/output/20.04_target_list.json.gz', - size: '1MB', + name: "GZipped JSON", + url: "https://storage.googleapis.com/open-targets-data-releases/20.04/output/20.04_target_list.json.gz", + size: "1MB", }, ], }, { - name: 'Disease list', + name: "Disease list", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.04/output/20.04_disease_list.csv.gz', - size: '285KB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.04/output/20.04_disease_list.csv.gz", + size: "285KB", }, { - name: 'GZipped JSON', - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.04/output/20.04_disease_list.json.gz', - size: '332KB', + name: "GZipped JSON", + url: "https://storage.googleapis.com/open-targets-data-releases/20.04/output/20.04_disease_list.json.gz", + size: "332KB", }, ], }, { - name: 'Known target safety', + name: "Known target safety", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.04/input/annotation-files/known_target_safety-2020-04-01.json', - size: '345KB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.04/input/annotation-files/known_target_safety-2020-04-01.json", + size: "345KB", }, ], }, { - name: 'Target tractability', + name: "Target tractability", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.04/input/annotation-files/tractability_buckets-2020-03-26.tsv', - size: '17.3MB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.04/input/annotation-files/tractability_buckets-2020-03-26.tsv", + size: "17.3MB", }, ], }, { - name: 'Baseline expression', + name: "Baseline expression", files: [ { - url: - 'https://github.com/opentargets/expression_analysis/raw/master/exp_summary_NormCounts_genes.txt', - size: '12.3MB', + url: "https://github.com/opentargets/expression_analysis/raw/master/exp_summary_NormCounts_genes.txt", + size: "12.3MB", }, ], }, @@ -295,60 +266,54 @@ const releases = [ // 20.02 RELEASE { - version: '20.02', - date: '2020 February', + version: "20.02", + date: "2020 February", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.02/output/20.02_association_data.json.gz', - size: '765MB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.02/output/20.02_association_data.json.gz", + size: "765MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.02/output/20.02_evidence_data.json.gz', - size: '4.23GB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.02/output/20.02_evidence_data.json.gz", + size: "4.23GB", }, ], }, { - name: 'Target list', + name: "Target list", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.02/output/20.02_target_list.csv.gz', - size: '911KB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.02/output/20.02_target_list.csv.gz", + size: "911KB", }, { - name: 'GZipped JSON', - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.02/output/20.02_target_list.json.gz', - size: '1MB', + name: "GZipped JSON", + url: "https://storage.googleapis.com/open-targets-data-releases/20.02/output/20.02_target_list.json.gz", + size: "1MB", }, ], }, { - name: 'Disease list', + name: "Disease list", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.02/output/20.02_disease_list.csv.gz', - size: '276KB', + url: "https://storage.googleapis.com/open-targets-data-releases/20.02/output/20.02_disease_list.csv.gz", + size: "276KB", }, { - name: 'GZipped JSON', - url: - 'https://storage.googleapis.com/open-targets-data-releases/20.02/output/20.02_disease_list.json.gz', - size: '321KB', + name: "GZipped JSON", + url: "https://storage.googleapis.com/open-targets-data-releases/20.02/output/20.02_disease_list.json.gz", + size: "321KB", }, ], }, @@ -357,60 +322,54 @@ const releases = [ // 19.11 RELEASE { - version: '19.11', - date: '2019 November', + version: "19.11", + date: "2019 November", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/19.11/output/19.11_association_data.json.gz', - size: '661MB', + url: "https://storage.googleapis.com/open-targets-data-releases/19.11/output/19.11_association_data.json.gz", + size: "661MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/19.11/output/19.11_evidence_data.json.gz', - size: '3.75GB', + url: "https://storage.googleapis.com/open-targets-data-releases/19.11/output/19.11_evidence_data.json.gz", + size: "3.75GB", }, ], }, { - name: 'Target list', + name: "Target list", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/19.11/output/19.11_target_list.csv.gz', - size: '905KB', + url: "https://storage.googleapis.com/open-targets-data-releases/19.11/output/19.11_target_list.csv.gz", + size: "905KB", }, { - name: 'GZipped JSON', - url: - 'https://storage.googleapis.com/open-targets-data-releases/19.11/output/19.11_target_list.json.gz', - size: '1MB', + name: "GZipped JSON", + url: "https://storage.googleapis.com/open-targets-data-releases/19.11/output/19.11_target_list.json.gz", + size: "1MB", }, ], }, { - name: 'Disease list', + name: "Disease list", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/19.11/output/19.11_disease_list.csv.gz', - size: '271KB', + url: "https://storage.googleapis.com/open-targets-data-releases/19.11/output/19.11_disease_list.csv.gz", + size: "271KB", }, { - name: 'GZipped JSON', - url: - 'https://storage.googleapis.com/open-targets-data-releases/19.11/output/19.11_disease_list.json.gz', - size: '314KB', + name: "GZipped JSON", + url: "https://storage.googleapis.com/open-targets-data-releases/19.11/output/19.11_disease_list.json.gz", + size: "314KB", }, ], }, @@ -419,60 +378,54 @@ const releases = [ // 19.09 RELEASE { - version: '19.09', - date: '2019 November', + version: "19.09", + date: "2019 November", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/19.09/output/19.09_association_data.json.gz', - size: '271MB', + url: "https://storage.googleapis.com/open-targets-data-releases/19.09/output/19.09_association_data.json.gz", + size: "271MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/19.09/output/19.09_evidence_data.json.gz', - size: '2.76GB', + url: "https://storage.googleapis.com/open-targets-data-releases/19.09/output/19.09_evidence_data.json.gz", + size: "2.76GB", }, ], }, { - name: 'Target list', + name: "Target list", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/19.09/output/19.09_target_list.csv.gz', - size: '898KB', + url: "https://storage.googleapis.com/open-targets-data-releases/19.09/output/19.09_target_list.csv.gz", + size: "898KB", }, { - name: 'GZipped JSON', - url: - 'https://storage.googleapis.com/open-targets-data-releases/19.09/output/19.09_target_list.json.gz', - size: '1MB', + name: "GZipped JSON", + url: "https://storage.googleapis.com/open-targets-data-releases/19.09/output/19.09_target_list.json.gz", + size: "1MB", }, ], }, { - name: 'Disease list', + name: "Disease list", files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/19.09/output/19.09_disease_list.csv.gz', - size: '212KB', + url: "https://storage.googleapis.com/open-targets-data-releases/19.09/output/19.09_disease_list.csv.gz", + size: "212KB", }, { - name: 'GZipped JSON', - url: - 'https://storage.googleapis.com/open-targets-data-releases/19.09/output/19.09_disease_list.json.gz', - size: '252KB', + name: "GZipped JSON", + url: "https://storage.googleapis.com/open-targets-data-releases/19.09/output/19.09_disease_list.json.gz", + size: "252KB", }, ], }, @@ -481,28 +434,26 @@ const releases = [ // 19.06 RELEASE { - version: '19.06', - date: '2019 June', + version: "19.06", + date: "2019 June", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/19.06/output/19.06_association_data.json.gz', - size: '270MB', + url: "https://storage.googleapis.com/open-targets-data-releases/19.06/output/19.06_association_data.json.gz", + size: "270MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/19.06/output/19.06_evidence_data.json.gz', - size: '2.7GB', + url: "https://storage.googleapis.com/open-targets-data-releases/19.06/output/19.06_evidence_data.json.gz", + size: "2.7GB", }, ], }, @@ -511,28 +462,26 @@ const releases = [ // 19.04 RELEASE { - version: '19.04', - date: '2019 April', + version: "19.04", + date: "2019 April", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/19.04/output/19.04_association_data.json.gz', - size: '272MB', + url: "https://storage.googleapis.com/open-targets-data-releases/19.04/output/19.04_association_data.json.gz", + size: "272MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/19.04/output/19.04_evidence_data.json.gz', - size: '2.7GB', + url: "https://storage.googleapis.com/open-targets-data-releases/19.04/output/19.04_evidence_data.json.gz", + size: "2.7GB", }, ], }, @@ -541,28 +490,26 @@ const releases = [ // 19.02 RELEASE { - version: '19.02', - date: '2019 February', + version: "19.02", + date: "2019 February", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/19.02/output/19.02_association_data.json.gz', - size: '257MB', + url: "https://storage.googleapis.com/open-targets-data-releases/19.02/output/19.02_association_data.json.gz", + size: "257MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/19.02/output/19.02_evidence_data.json.gz', - size: '2.7GB', + url: "https://storage.googleapis.com/open-targets-data-releases/19.02/output/19.02_evidence_data.json.gz", + size: "2.7GB", }, ], }, @@ -571,28 +518,26 @@ const releases = [ // 18.12 RELEASE { - version: '18.12', - date: '2018 December', + version: "18.12", + date: "2018 December", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/18.12/output/18.12_association_data.json.gz', - size: '252MB', + url: "https://storage.googleapis.com/open-targets-data-releases/18.12/output/18.12_association_data.json.gz", + size: "252MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/18.12/output/18.12_evidence_data.json.gz', - size: '2.5GB', + url: "https://storage.googleapis.com/open-targets-data-releases/18.12/output/18.12_evidence_data.json.gz", + size: "2.5GB", }, ], }, @@ -601,28 +546,26 @@ const releases = [ // 18.10 RELEASE { - version: '18.10', - date: '2018 October', + version: "18.10", + date: "2018 October", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/18.10/18.10_association_data.json.gz', - size: '234MB', + url: "https://storage.googleapis.com/open-targets-data-releases/18.10/18.10_association_data.json.gz", + size: "234MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/18.10/18.10_evidence_data.json.gz', - size: '2.7GB', + url: "https://storage.googleapis.com/open-targets-data-releases/18.10/18.10_evidence_data.json.gz", + size: "2.7GB", }, ], }, @@ -631,28 +574,26 @@ const releases = [ // 18.08 RELEASE { - version: '18.08', - date: '2018 August', + version: "18.08", + date: "2018 August", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/18.08/18.08_association_data.json.gz', - size: '202MB', + url: "https://storage.googleapis.com/open-targets-data-releases/18.08/18.08_association_data.json.gz", + size: "202MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/18.08/18.08_evidence_data.json.gz', - size: '2.4GB', + url: "https://storage.googleapis.com/open-targets-data-releases/18.08/18.08_evidence_data.json.gz", + size: "2.4GB", }, ], }, @@ -661,28 +602,26 @@ const releases = [ // 18.06 RELEASE { - version: '18.06', - date: '2018 June', + version: "18.06", + date: "2018 June", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/18.06/18.06_association_data.json.gz', - size: '189MB', + url: "https://storage.googleapis.com/open-targets-data-releases/18.06/18.06_association_data.json.gz", + size: "189MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/18.06/18.06_evidence_data.json.gz', - size: '2.3GB', + url: "https://storage.googleapis.com/open-targets-data-releases/18.06/18.06_evidence_data.json.gz", + size: "2.3GB", }, ], }, @@ -691,28 +630,26 @@ const releases = [ // 18.04 RELEASE { - version: '18.04', - date: '2018 April', + version: "18.04", + date: "2018 April", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/18.04/18.04_association_data.json.gz', - size: '178MB', + url: "https://storage.googleapis.com/open-targets-data-releases/18.04/18.04_association_data.json.gz", + size: "178MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/18.04/18.04_evidence_data.json.gz', - size: '6GB', + url: "https://storage.googleapis.com/open-targets-data-releases/18.04/18.04_evidence_data.json.gz", + size: "6GB", }, ], }, @@ -721,28 +658,26 @@ const releases = [ // 18.02 RELEASE { - version: '18.02', - date: '2018 February', + version: "18.02", + date: "2018 February", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/18.02/18.02_association_data.json.gz', - size: '172MB', + url: "https://storage.googleapis.com/open-targets-data-releases/18.02/18.02_association_data.json.gz", + size: "172MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/18.02/18.02_evidence_data.json.gz', - size: '5.5GB', + url: "https://storage.googleapis.com/open-targets-data-releases/18.02/18.02_evidence_data.json.gz", + size: "5.5GB", }, ], }, @@ -751,28 +686,26 @@ const releases = [ // 17.12 RELEASE { - version: '17.12', - date: '2017 December', + version: "17.12", + date: "2017 December", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/17.12/17.12_association_data.json.gz', - size: '171MB', + url: "https://storage.googleapis.com/open-targets-data-releases/17.12/17.12_association_data.json.gz", + size: "171MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/17.12/17.12_evidence_data.json.gz', - size: '5.1GB', + url: "https://storage.googleapis.com/open-targets-data-releases/17.12/17.12_evidence_data.json.gz", + size: "5.1GB", }, ], }, @@ -781,28 +714,26 @@ const releases = [ // 17.09 RELEASE { - version: '17.09', - date: '2017 September', + version: "17.09", + date: "2017 September", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/17.09/17.09_association_data.json.gz', - size: '198MB', + url: "https://storage.googleapis.com/open-targets-data-releases/17.09/17.09_association_data.json.gz", + size: "198MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/17.09/17.09_evidence_data.json.gz', - size: '5.2GB', + url: "https://storage.googleapis.com/open-targets-data-releases/17.09/17.09_evidence_data.json.gz", + size: "5.2GB", }, ], }, @@ -811,28 +742,26 @@ const releases = [ // 17.06 RELEASE { - version: '17.06', - date: '2017 June', + version: "17.06", + date: "2017 June", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/17.06/17.06_association_data.json.gz', - size: '233MB', + url: "https://storage.googleapis.com/open-targets-data-releases/17.06/17.06_association_data.json.gz", + size: "233MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/17.06/17.06_evidence_data.json.gz', - size: '5.1GB', + url: "https://storage.googleapis.com/open-targets-data-releases/17.06/17.06_evidence_data.json.gz", + size: "5.1GB", }, ], }, @@ -841,28 +770,26 @@ const releases = [ // 17.04 RELEASE { - version: '17.04', - date: '2017 April', + version: "17.04", + date: "2017 April", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/17.04/17.04_association_data.json.gz', - size: '207MB', + url: "https://storage.googleapis.com/open-targets-data-releases/17.04/17.04_association_data.json.gz", + size: "207MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/17.04/17.04_evidence_data.json.gz', - size: '4.4GB', + url: "https://storage.googleapis.com/open-targets-data-releases/17.04/17.04_evidence_data.json.gz", + size: "4.4GB", }, ], }, @@ -871,28 +798,26 @@ const releases = [ // 17.02 RELEASE { - version: '17.02', - date: '2017 February', + version: "17.02", + date: "2017 February", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/17.02/17.02_association_data.json.gz', - size: '215MB', + url: "https://storage.googleapis.com/open-targets-data-releases/17.02/17.02_association_data.json.gz", + size: "215MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/17.02/17.02_evidence_data.json.gz', - size: '4.4GB', + url: "https://storage.googleapis.com/open-targets-data-releases/17.02/17.02_evidence_data.json.gz", + size: "4.4GB", }, ], }, @@ -901,17 +826,16 @@ const releases = [ // 16.12 RELEASE { - version: '16.12', - date: '2016 December', + version: "16.12", + date: "2016 December", artifacts: [ { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/16.12/16.12_evidence_data.json.gz', - size: '4.4GB', + url: "https://storage.googleapis.com/open-targets-data-releases/16.12/16.12_evidence_data.json.gz", + size: "4.4GB", }, ], }, @@ -920,28 +844,26 @@ const releases = [ // 16.09 RELEASE { - version: '16.09', - date: '2016 September', + version: "16.09", + date: "2016 September", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/16.04/16.08_association_data_fixed.json.gz', - size: '179MB', + url: "https://storage.googleapis.com/open-targets-data-releases/16.04/16.08_association_data_fixed.json.gz", + size: "179MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/16.08/16.08_evidence_data.json.gz', - size: '1.7GB', + url: "https://storage.googleapis.com/open-targets-data-releases/16.08/16.08_evidence_data.json.gz", + size: "1.7GB", }, ], }, @@ -950,28 +872,26 @@ const releases = [ // 16.08 RELEASE { - version: '16.08', - date: '2016 August', + version: "16.08", + date: "2016 August", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/16.08/16.08_association_data.json.gz', - size: '179MB', + url: "https://storage.googleapis.com/open-targets-data-releases/16.08/16.08_association_data.json.gz", + size: "179MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/16.08/16.08_evidence_data.json.gz', - size: '1.7GB', + url: "https://storage.googleapis.com/open-targets-data-releases/16.08/16.08_evidence_data.json.gz", + size: "1.7GB", }, ], }, @@ -980,28 +900,26 @@ const releases = [ // 16.04 RELEASE { - version: '16.04', - date: '2016 April', + version: "16.04", + date: "2016 April", artifacts: [ { - name: 'Associations', + name: "Associations", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/16.04/16.04_association_data.json.gz', - size: '148MB', + url: "https://storage.googleapis.com/open-targets-data-releases/16.04/16.04_association_data.json.gz", + size: "148MB", }, ], }, { - name: 'Evidences', + name: "Evidences", important: true, files: [ { - url: - 'https://storage.googleapis.com/open-targets-data-releases/16.04/16.04_evidence_data.json.gz', - size: '1.3GB', + url: "https://storage.googleapis.com/open-targets-data-releases/16.04/16.04_evidence_data.json.gz", + size: "1.3GB", }, ], }, diff --git a/apps/platform/src/pages/DownloadsPage/utils.js b/apps/platform/src/pages/DownloadsPage/utils.js index ba630a4b5..bf1137e79 100644 --- a/apps/platform/src/pages/DownloadsPage/utils.js +++ b/apps/platform/src/pages/DownloadsPage/utils.js @@ -1,28 +1,24 @@ -import { - faArchive, - faDna, - faStethoscope, -} from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faArchive, faDna, faStethoscope } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; export const mapFile = url => { - let format = ''; - const fileNameParts = url.split('.'); + let format = ""; + const fileNameParts = url.split("."); - if (fileNameParts[fileNameParts.length - 1].toLowerCase() === 'gz') { + if (fileNameParts[fileNameParts.length - 1].toLowerCase() === "gz") { fileNameParts.pop(); - format = 'GZipped'; + format = "GZipped"; } - return [format, fileNameParts.pop().toUpperCase()].join(' '); + return [format, fileNameParts.pop().toUpperCase()].join(" "); }; export const mapIcon = name => ( diff --git a/apps/platform/src/pages/DrugPage/Header.jsx b/apps/platform/src/pages/DrugPage/Header.jsx index 9d4049d2e..853c56e18 100644 --- a/apps/platform/src/pages/DrugPage/Header.jsx +++ b/apps/platform/src/pages/DrugPage/Header.jsx @@ -1,24 +1,16 @@ -import { faPrescriptionBottleAlt } from '@fortawesome/free-solid-svg-icons'; -import { Header as HeaderBase, ExternalLink } from 'ui'; +import { faPrescriptionBottleAlt } from "@fortawesome/free-solid-svg-icons"; +import { Header as HeaderBase, ExternalLink } from "ui"; function DrugHeader({ loading, chemblId, name, crossReferences }) { const chemblUrl = `https://www.ebi.ac.uk/chembl/compound_report_card/${chemblId}/`; - const drugBank = crossReferences - ? crossReferences.find(cr => cr.source === 'drugbank') - : null; - const chEBI = crossReferences - ? crossReferences.find(cr => cr.source === 'chEBI') - : null; - const dailyMed = crossReferences - ? crossReferences.find(cr => cr.source === 'DailyMed') - : null; + const drugBank = crossReferences ? crossReferences.find(cr => cr.source === "drugbank") : null; + const chEBI = crossReferences ? crossReferences.find(cr => cr.source === "chEBI") : null; + const dailyMed = crossReferences ? crossReferences.find(cr => cr.source === "DailyMed") : null; const drugCentral = crossReferences - ? crossReferences.find(cr => cr.source === 'DrugCentral') - : null; - const wikipedia = crossReferences - ? crossReferences.find(cr => cr.source === 'Wikipedia') + ? crossReferences.find(cr => cr.source === "DrugCentral") : null; + const wikipedia = crossReferences ? crossReferences.find(cr => cr.source === "Wikipedia") : null; return ( @@ -52,7 +52,7 @@ function ProfileHeader({ chemblId }) { {drugType} - {yearOfFirstApproval || 'N/A'} + {yearOfFirstApproval || "N/A"} {clinicalPhase} @@ -83,7 +83,7 @@ function ProfileHeader({ chemblId }) { {childMolecules.map(({ id, name }, i) => ( {name} - {i < childMolecules.length - 1 ? ', ' : null} + {i < childMolecules.length - 1 ? ", " : null} ))} diff --git a/apps/platform/src/pages/DrugPage/Smiles/Smiles.jsx b/apps/platform/src/pages/DrugPage/Smiles/Smiles.jsx index 1725757c2..da579b436 100644 --- a/apps/platform/src/pages/DrugPage/Smiles/Smiles.jsx +++ b/apps/platform/src/pages/DrugPage/Smiles/Smiles.jsx @@ -1,6 +1,6 @@ -import { Component } from 'react'; -import { Skeleton } from '@mui/material'; -import SmilesHelper from './SmilesHelper'; +import { Component } from "react"; +import { Skeleton } from "@mui/material"; +import SmilesHelper from "./SmilesHelper"; class Smiles extends Component { constructor(props) { @@ -14,15 +14,13 @@ class Smiles extends Component { this.mounted = true; const { chemblId } = this.props; - fetch( - `https://www.ebi.ac.uk/chembl/api/data/molecule/${chemblId}?format=json` - ) + fetch(`https://www.ebi.ac.uk/chembl/api/data/molecule/${chemblId}?format=json`) .then(res => res.json()) .then(data => { if (this.mounted) { this.setState({ smiles: - data.molecule_type === 'Small molecule' + data.molecule_type === "Small molecule" ? data.molecule_structures?.canonical_smiles : null, }); @@ -43,12 +41,7 @@ class Smiles extends Component { return smiles ? ( ) : ( - + ); } } diff --git a/apps/platform/src/pages/DrugPage/Smiles/SmilesHelper.jsx b/apps/platform/src/pages/DrugPage/Smiles/SmilesHelper.jsx index a3aee2608..21cea079e 100644 --- a/apps/platform/src/pages/DrugPage/Smiles/SmilesHelper.jsx +++ b/apps/platform/src/pages/DrugPage/Smiles/SmilesHelper.jsx @@ -1,35 +1,35 @@ -import { useState, useEffect } from 'react'; -import { faXmark, faSearchPlus } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Modal, Paper } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import SmilesDrawer from 'smiles-drawer'; +import { useState, useEffect } from "react"; +import { faXmark, faSearchPlus } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { Modal, Paper } from "@mui/material"; +import { makeStyles } from "@mui/styles"; +import SmilesDrawer from "smiles-drawer"; const useStyles = makeStyles(theme => ({ container: { - background: 'none !important', - cursor: 'pointer', - height: '240px', - marginLeft: 'auto', - width: 'fit-content', - '& .seeDetailsIcon': { - visibility: 'hidden', + background: "none !important", + cursor: "pointer", + height: "240px", + marginLeft: "auto", + width: "fit-content", + "& .seeDetailsIcon": { + visibility: "hidden", }, - '&:hover .seeDetailsIcon': { - visibility: 'visible', + "&:hover .seeDetailsIcon": { + visibility: "visible", }, }, modal: { - width: '800px', - margin: '130px auto 0 auto', + width: "800px", + margin: "130px auto 0 auto", }, modalCanvas: { - display: 'block', - margin: '0 auto', + display: "block", + margin: "0 auto", }, close: { - cursor: 'pointer', - float: 'right', + cursor: "pointer", + float: "right", fill: theme.palette.grey[800], }, })); @@ -42,7 +42,7 @@ const drawSmiles = (smiles, chemblId, config) => { smilesDrawer.draw(tree, chemblId); }, () => { - console.error('error parsing smiles'); + console.error("error parsing smiles"); } ); }; @@ -77,11 +77,7 @@ function SmilesHelper({ smiles, chemblId }) { - + diff --git a/apps/platform/src/pages/DrugPage/Smiles/index.jsx b/apps/platform/src/pages/DrugPage/Smiles/index.jsx index 50dacf3e9..793db2d34 100644 --- a/apps/platform/src/pages/DrugPage/Smiles/index.jsx +++ b/apps/platform/src/pages/DrugPage/Smiles/index.jsx @@ -1 +1 @@ -export { default } from './Smiles'; +export { default } from "./Smiles"; diff --git a/apps/platform/src/pages/DrugPage/index.js b/apps/platform/src/pages/DrugPage/index.js index 5913583b9..98742bc15 100644 --- a/apps/platform/src/pages/DrugPage/index.js +++ b/apps/platform/src/pages/DrugPage/index.js @@ -1 +1 @@ -export { default } from './DrugPage'; +export { default } from "./DrugPage"; diff --git a/apps/platform/src/pages/EvidencePage/EvidencePage.jsx b/apps/platform/src/pages/EvidencePage/EvidencePage.jsx index f79f25ce2..de1f537cb 100644 --- a/apps/platform/src/pages/EvidencePage/EvidencePage.jsx +++ b/apps/platform/src/pages/EvidencePage/EvidencePage.jsx @@ -1,15 +1,15 @@ -import { Suspense, lazy } from 'react'; -import { useQuery } from '@apollo/client'; -import { useLocation, useParams } from 'react-router-dom'; +import { Suspense, lazy } from "react"; +import { useQuery } from "@apollo/client"; +import { useLocation, useParams } from "react-router-dom"; -import { LoadingBackdrop, BasePage, ScrollToTop } from 'ui'; +import { LoadingBackdrop, BasePage, ScrollToTop } from "ui"; -import Header from './Header'; -import NotFoundPage from '../NotFoundPage'; +import Header from "./Header"; +import NotFoundPage from "../NotFoundPage"; -import EVIDENCE_PAGE_QUERY from './EvidencePageQuery.gql'; +import EVIDENCE_PAGE_QUERY from "./EvidencePageQuery.gql"; -const Profile = lazy(() => import('./Profile')); +const Profile = lazy(() => import("./Profile")); function EvidencePage() { const location = useLocation(); @@ -31,13 +31,7 @@ function EvidencePage() { description={`${symbol} is associated with ${name} through Open Targets Platform evidence that is aggregated from genetic evidence, somatic mutations, known drugs, differential expression experiments, pathways & systems biology, text mining, and animal model data sources`} location={location} > -
+
}> diff --git a/apps/platform/src/pages/EvidencePage/Header.jsx b/apps/platform/src/pages/EvidencePage/Header.jsx index 82f0033fc..43d3e504e 100644 --- a/apps/platform/src/pages/EvidencePage/Header.jsx +++ b/apps/platform/src/pages/EvidencePage/Header.jsx @@ -1,6 +1,6 @@ -import { faProjectDiagram } from '@fortawesome/free-solid-svg-icons'; +import { faProjectDiagram } from "@fortawesome/free-solid-svg-icons"; -import { Header as HeaderBase } from 'ui'; +import { Header as HeaderBase } from "ui"; function EvidenceHeader({ loading, symbol, name }) { return ( diff --git a/apps/platform/src/pages/EvidencePage/ProfileHeader.jsx b/apps/platform/src/pages/EvidencePage/ProfileHeader.jsx index fb1fd1bb7..a5be5b139 100644 --- a/apps/platform/src/pages/EvidencePage/ProfileHeader.jsx +++ b/apps/platform/src/pages/EvidencePage/ProfileHeader.jsx @@ -1,24 +1,18 @@ -import { faDna, faStethoscope } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { - Card, - CardContent, - CardHeader, - Skeleton, - Typography, -} from '@mui/material'; +import { faDna, faStethoscope } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { Card, CardContent, CardHeader, Skeleton, Typography } from "@mui/material"; import { Link, usePlatformApi, ProfileDescription, ProfileHeader as BaseProfileHeader, ProfileChipList, -} from 'ui'; +} from "ui"; -import { makeStyles } from '@mui/styles'; +import { makeStyles } from "@mui/styles"; const useStyles = makeStyles(theme => ({ - card: { height: '100%' }, + card: { height: "100%" }, cardContent: { borderTop: `1px solid ${theme.palette.grey[300]}`, }, @@ -46,7 +40,7 @@ const parseSynonyms = diseaseSynonyms => { // convert the tooltip array to a string for display in the Tooltip component t.map(tItem => { const syn = tItem; - syn.tooltip = tItem.tooltip.join(', '); + syn.tooltip = tItem.tooltip.join(", "); return syn; }); return t; @@ -59,30 +53,23 @@ function ProfileHeader() { // TODO: Errors! if (error) return null; - const { - id: efoId, - name, - description: diseaseDescription, - } = data?.disease || {}; + const { id: efoId, name, description: diseaseDescription } = data?.disease || {}; const targetDescription = data?.target.functionDescriptions?.[0]; const diseaseSynonyms = parseSynonyms(data?.disease.synonyms || []); const { id: ensgId, approvedSymbol } = data?.target || {}; - const targetSynonyms = data?.target?.synonyms?.reduce( - (accumulator, synonymous) => { - if (accumulator.find(x => x.label === synonymous.label)) { - return accumulator; - } - accumulator.push({ - ...synonymous, - tooltip: synonymous.label, - }); + const targetSynonyms = data?.target?.synonyms?.reduce((accumulator, synonymous) => { + if (accumulator.find(x => x.label === synonymous.label)) { return accumulator; - }, - [] - ); + } + accumulator.push({ + ...synonymous, + tooltip: synonymous.label, + }); + return accumulator; + }, []); return ( @@ -121,9 +108,7 @@ function ProfileHeader() { {diseaseDescription} {diseaseSynonyms.length > 0 ? ( - - {diseaseSynonyms} - + {diseaseSynonyms} ) : null} diff --git a/apps/platform/src/pages/EvidencePage/index.js b/apps/platform/src/pages/EvidencePage/index.js index 2602e0287..5fcbea45c 100644 --- a/apps/platform/src/pages/EvidencePage/index.js +++ b/apps/platform/src/pages/EvidencePage/index.js @@ -1 +1 @@ -export { default } from './EvidencePage'; +export { default } from "./EvidencePage"; diff --git a/apps/platform/src/pages/HomePage/HomeBox.jsx b/apps/platform/src/pages/HomePage/HomeBox.jsx index ab69a0408..5d6483b54 100644 --- a/apps/platform/src/pages/HomePage/HomeBox.jsx +++ b/apps/platform/src/pages/HomePage/HomeBox.jsx @@ -1,23 +1,23 @@ -import { Grid, Paper, Box } from '@mui/material'; -import config from '../../config'; +import { Grid, Paper, Box } from "@mui/material"; +import config from "../../config"; -import OTLogo from '../../assets/OTLogo'; -import PPOTLogo from '../../assets/PPPOTLogo'; +import OTLogo from "../../assets/OTLogo"; +import PPOTLogo from "../../assets/PPPOTLogo"; const styles = { homeboxContainer: { - overflow: 'visible', - padding: '30px 60px', - maxWidth: '800px', - margin: 'auto', + overflow: "visible", + padding: "30px 60px", + maxWidth: "800px", + margin: "auto", }, homeboxHeader: { - textAlign: 'center', - marginBottom: '20px', + textAlign: "center", + marginBottom: "20px", }, logo: { - maxWidth: '30rem', - width: '100%', + maxWidth: "30rem", + width: "100%", }, }; @@ -35,7 +35,7 @@ function HomeBox({ children }) { {children} - ) + ); } export default HomeBox; diff --git a/apps/platform/src/pages/HomePage/Splash.jsx b/apps/platform/src/pages/HomePage/Splash.jsx index 6069e644c..91f4c761f 100644 --- a/apps/platform/src/pages/HomePage/Splash.jsx +++ b/apps/platform/src/pages/HomePage/Splash.jsx @@ -1,21 +1,21 @@ -import { makeStyles } from '@mui/styles'; +import { makeStyles } from "@mui/styles"; -import Particles from 'react-tsparticles'; -import { loadFull } from 'tsparticles'; +import Particles from "react-tsparticles"; +import { loadFull } from "tsparticles"; -import { particlesConfig } from '../../constants'; +import { particlesConfig } from "../../constants"; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ splashContainer: { - height: '100vh', + height: "100vh", }, splash: { - position: 'absolute', + position: "absolute", left: 0, top: 0, backgroundColor: theme.palette.primary.main, - width: '100%', - height: '100%', + width: "100%", + height: "100%", zIndex: -1, }, })); diff --git a/apps/platform/src/pages/HomePage/Stats.jsx b/apps/platform/src/pages/HomePage/Stats.jsx index d23644ac4..209a153f9 100644 --- a/apps/platform/src/pages/HomePage/Stats.jsx +++ b/apps/platform/src/pages/HomePage/Stats.jsx @@ -1,19 +1,19 @@ -import { useState, useEffect } from 'react'; -import { Grid, Typography, withStyles } from '@mui/material'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faDna, faStethoscope } from '@fortawesome/free-solid-svg-icons'; +import { useState, useEffect } from "react"; +import { Grid, Typography, withStyles } from "@mui/material"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faDna, faStethoscope } from "@fortawesome/free-solid-svg-icons"; const styles = theme => ({ container: { backgroundColor: theme.palette.grey[300], - height: '205px', + height: "205px", }, title: { fontWeight: 600, }, icon: { fill: theme.palette.grey[700], - height: '56px', + height: "56px", }, }); @@ -24,13 +24,11 @@ function Stats({ classes }) { let isCurrent = true; // TODO: design GraphQL schema from stats and get this data from the // GraphQL API - fetch('https://platform-api.opentargets.io/v3/platform/public/utils/stats') + fetch("https://platform-api.opentargets.io/v3/platform/public/utils/stats") .then(res => res.json()) .then(data => { if (isCurrent) { - const numDataSources = Object.values( - data.associations.datatypes - ).reduce( + const numDataSources = Object.values(data.associations.datatypes).reduce( (acc, current) => acc + Object.keys(current.datasources).length, 0 ); @@ -51,13 +49,7 @@ function Stats({ classes }) { return ( - + Platform Stats @@ -68,28 +60,20 @@ function Stats({ classes }) { - - {stats.numTargets.toLocaleString()} - + {stats.numTargets.toLocaleString()} targets - - {stats.numDiseases.toLocaleString()} - + {stats.numDiseases.toLocaleString()} diseases - - {stats.numAssociations.toLocaleString()} - + {stats.numAssociations.toLocaleString()} associations - - {stats.numDataSources.toLocaleString()} - + {stats.numDataSources.toLocaleString()} data sources diff --git a/apps/platform/src/pages/NotFoundPage/NotFoundPage.jsx b/apps/platform/src/pages/NotFoundPage/NotFoundPage.jsx index 8a98d250f..052b14636 100644 --- a/apps/platform/src/pages/NotFoundPage/NotFoundPage.jsx +++ b/apps/platform/src/pages/NotFoundPage/NotFoundPage.jsx @@ -1,7 +1,7 @@ -import { Typography } from '@mui/material'; +import { Typography } from "@mui/material"; -import { EmptyPage, BasePage } from 'ui'; -import config from '../../config'; +import { EmptyPage, BasePage } from "ui"; +import config from "../../config"; function NotFoundPage() { return ( diff --git a/apps/platform/src/pages/NotFoundPage/index.js b/apps/platform/src/pages/NotFoundPage/index.js index 35f02dc1b..225a37766 100644 --- a/apps/platform/src/pages/NotFoundPage/index.js +++ b/apps/platform/src/pages/NotFoundPage/index.js @@ -1 +1 @@ -export { default } from './NotFoundPage'; +export { default } from "./NotFoundPage"; diff --git a/apps/platform/src/pages/ProjectsPage/ProjectsPage.jsx b/apps/platform/src/pages/ProjectsPage/ProjectsPage.jsx index 52d522808..12963de70 100644 --- a/apps/platform/src/pages/ProjectsPage/ProjectsPage.jsx +++ b/apps/platform/src/pages/ProjectsPage/ProjectsPage.jsx @@ -1,22 +1,19 @@ -import { Paper, Box, Typography, Chip } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { - faCircleCheck, - faCircleNotch, -} from '@fortawesome/free-solid-svg-icons'; -import { DataTable, Link } from 'ui'; -import projectsData from './projects-data.json'; +import { Paper, Box, Typography, Chip } from "@mui/material"; +import { makeStyles } from "@mui/styles"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faCircleCheck, faCircleNotch } from "@fortawesome/free-solid-svg-icons"; +import { DataTable, Link } from "ui"; +import projectsData from "./projects-data.json"; const useStyles = makeStyles(theme => ({ icon: { color: theme.palette.primary.main, }, diseaseContainer: { - display: 'flex', + display: "flex", }, disease: { - marginRight: '0.2rem', + marginRight: "0.2rem", }, })); @@ -24,8 +21,8 @@ function ProjectPage() { const classes = useStyles(); const columns = [ { - id: 'otar_code', - label: 'Project Code', + id: "otar_code", + label: "Project Code", renderCell: ({ otar_code: otarCode }) => otarCode ? ( @@ -33,36 +30,28 @@ function ProjectPage() { ) : null, }, - { id: 'project_name', label: 'Project Name' }, - { id: 'project_lead', label: 'Project Lead' }, - { id: 'generates_data', label: 'Generates Data' }, + { id: "project_name", label: "Project Name" }, + { id: "project_lead", label: "Project Lead" }, + { id: "generates_data", label: "Generates Data" }, { - id: 'currently_integrates_in_PPP', - label: 'Currently integrates into PPP', - renderCell: ({ - currently_integrates_in_PPP: currentlyIntegratesInPPP, - }) => { - const icon = - currentlyIntegratesInPPP === 'Y' ? faCircleCheck : faCircleNotch; - return ( - - ); + id: "currently_integrates_in_PPP", + label: "Currently integrates into PPP", + renderCell: ({ currently_integrates_in_PPP: currentlyIntegratesInPPP }) => { + const icon = currentlyIntegratesInPPP === "Y" ? faCircleCheck : faCircleNotch; + return ; }, }, - { id: 'project_status', label: 'Project Status' }, - { id: 'open_targets_therapeutic_area', label: 'Therapeutic Area' }, + { id: "project_status", label: "Project Status" }, + { id: "open_targets_therapeutic_area", label: "Therapeutic Area" }, { - id: 'disease_mapping', - label: 'Disease Mapped in the PPP', + id: "disease_mapping", + label: "Disease Mapped in the PPP", renderCell: ({ disease_mapping: diseaseMapping }) => { const ALL_AVATARS = []; diseaseMapping.forEach(disease => { if (disease && disease.disease_id) { ALL_AVATARS.push( - + - The table below contains key information on the OTAR projects, their - status and data availability into the PPP. + The table below contains key information on the OTAR projects, their status and data + availability into the PPP. - For further information, please see{' '} + For further information, please see{" "} here - {' '} - or contact us at{' '} + {" "} + or contact us at{" "} datarequests@opentargets.org . - PPP specific documentation can be found{' '} - + PPP specific documentation can be found{" "} + here diff --git a/apps/platform/src/pages/ProjectsPage/ProjectsPageWrapper.jsx b/apps/platform/src/pages/ProjectsPage/ProjectsPageWrapper.jsx index 6d657e34a..284803363 100644 --- a/apps/platform/src/pages/ProjectsPage/ProjectsPageWrapper.jsx +++ b/apps/platform/src/pages/ProjectsPage/ProjectsPageWrapper.jsx @@ -1,8 +1,8 @@ -import { Suspense, lazy } from 'react'; -import { useLocation } from 'react-router-dom'; -import { LoadingBackdrop, BasePage } from 'ui'; +import { Suspense, lazy } from "react"; +import { useLocation } from "react-router-dom"; +import { LoadingBackdrop, BasePage } from "ui"; -const ProjectPage = lazy(() => import('./ProjectsPage')); +const ProjectPage = lazy(() => import("./ProjectsPage")); function ProjectsPageWrapper() { const location = useLocation(); diff --git a/apps/platform/src/pages/ProjectsPage/index.js b/apps/platform/src/pages/ProjectsPage/index.js index 6a7cd41c6..e0344b441 100644 --- a/apps/platform/src/pages/ProjectsPage/index.js +++ b/apps/platform/src/pages/ProjectsPage/index.js @@ -1 +1 @@ -export { default } from './ProjectsPageWrapper'; +export { default } from "./ProjectsPageWrapper"; diff --git a/apps/platform/src/pages/SearchPage/DiseaseDetail.jsx b/apps/platform/src/pages/SearchPage/DiseaseDetail.jsx index db1993abd..3fb3b6d59 100644 --- a/apps/platform/src/pages/SearchPage/DiseaseDetail.jsx +++ b/apps/platform/src/pages/SearchPage/DiseaseDetail.jsx @@ -1,13 +1,13 @@ -import { CardContent, Typography } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faStethoscope } from '@fortawesome/free-solid-svg-icons'; +import { CardContent, Typography } from "@mui/material"; +import { makeStyles } from "@mui/styles"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faStethoscope } from "@fortawesome/free-solid-svg-icons"; -import { LongText, Link } from 'ui'; +import { LongText, Link } from "ui"; const useStyles = makeStyles({ link: { - display: 'block', + display: "block", }, subtitle: { fontWeight: 500, @@ -32,11 +32,7 @@ function DiseaseDetail({ data }) { Therapeutic areas {therapeuticAreas.map(area => ( - + {area.name} ))} diff --git a/apps/platform/src/pages/SearchPage/DiseaseResult.jsx b/apps/platform/src/pages/SearchPage/DiseaseResult.jsx index 3863eecb9..241633a91 100644 --- a/apps/platform/src/pages/SearchPage/DiseaseResult.jsx +++ b/apps/platform/src/pages/SearchPage/DiseaseResult.jsx @@ -1,16 +1,16 @@ -import { Typography } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faStethoscope } from '@fortawesome/free-solid-svg-icons'; +import { Typography } from "@mui/material"; +import { makeStyles } from "@mui/styles"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faStethoscope } from "@fortawesome/free-solid-svg-icons"; -import { LongText, Link, Highlights } from 'ui'; +import { LongText, Link, Highlights } from "ui"; const useStyles = makeStyles(theme => ({ container: { - marginBottom: '30px', + marginBottom: "30px", }, subtitle: { - fontSize: '20px', + fontSize: "20px", fontWeight: 500, }, icon: { @@ -22,12 +22,8 @@ function DiseaseResult({ data, highlights }) { const classes = useStyles(); return (
- - {' '} - {data.name} + + {data.name} {data.description && ( diff --git a/apps/platform/src/pages/SearchPage/DrugDetail.jsx b/apps/platform/src/pages/SearchPage/DrugDetail.jsx index 4ba18b973..9a6d6911c 100644 --- a/apps/platform/src/pages/SearchPage/DrugDetail.jsx +++ b/apps/platform/src/pages/SearchPage/DrugDetail.jsx @@ -1,23 +1,20 @@ -import { CardContent, Typography } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { - faPrescriptionBottleAlt, - faTriangleExclamation, -} from '@fortawesome/free-solid-svg-icons'; +import { CardContent, Typography } from "@mui/material"; +import { makeStyles } from "@mui/styles"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faPrescriptionBottleAlt, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons"; -import { LongText, Chip, Link, LongList } from 'ui'; +import { LongText, Chip, Link, LongList } from "ui"; const useStyles = makeStyles({ link: { - display: 'block', + display: "block", }, subtitle: { fontWeight: 500, }, warningIcon: { - position: 'relative', - top: '5px', + position: "relative", + top: "5px", }, }); @@ -34,11 +31,8 @@ function DrugDetail({ data }) { {data.description} {data.hasBeenWithdrawn ? ( - {' '} - Withdrawn Drug + Withdrawn + Drug ) : null} @@ -58,11 +52,7 @@ function DrugDetail({ data }) { terms={data.indications.rows} maxTerms={5} render={(indication, index) => ( - + {indication.disease.name} )} @@ -78,11 +68,7 @@ function DrugDetail({ data }) { terms={data.linkedTargets.rows} maxTerms={5} render={target => ( - + {target.approvedSymbol} )} @@ -97,9 +83,7 @@ function DrugDetail({ data }) { ( - - )} + render={synonym => } /> )} @@ -111,9 +95,7 @@ function DrugDetail({ data }) { ( - - )} + render={tradeName => } /> )} diff --git a/apps/platform/src/pages/SearchPage/DrugResult.jsx b/apps/platform/src/pages/SearchPage/DrugResult.jsx index 7e2ed692b..613cee609 100644 --- a/apps/platform/src/pages/SearchPage/DrugResult.jsx +++ b/apps/platform/src/pages/SearchPage/DrugResult.jsx @@ -1,16 +1,16 @@ -import { Typography } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faPrescriptionBottleAlt } from '@fortawesome/free-solid-svg-icons'; +import { Typography } from "@mui/material"; +import { makeStyles } from "@mui/styles"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faPrescriptionBottleAlt } from "@fortawesome/free-solid-svg-icons"; -import { LongText, Highlights, Link } from 'ui'; +import { LongText, Highlights, Link } from "ui"; const useStyles = makeStyles(theme => ({ container: { - marginBottom: '30px', + marginBottom: "30px", }, subtitle: { - fontSize: '20px', + fontSize: "20px", fontWeight: 500, }, icon: { @@ -23,11 +23,7 @@ function DrugResult({ data, highlights }) { return (
- {' '} - {data.name} + {data.name} {data.description && ( diff --git a/apps/platform/src/pages/SearchPage/SearchContainer.jsx b/apps/platform/src/pages/SearchPage/SearchContainer.jsx index c28958820..5889b6e72 100644 --- a/apps/platform/src/pages/SearchPage/SearchContainer.jsx +++ b/apps/platform/src/pages/SearchPage/SearchContainer.jsx @@ -6,22 +6,18 @@ import { FormGroup, FormControlLabel, TablePagination, -} from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { - faDna, - faPrescriptionBottleAlt, - faStethoscope, -} from '@fortawesome/free-solid-svg-icons'; -import { ErrorBoundary } from 'ui'; +} from "@mui/material"; +import { makeStyles } from "@mui/styles"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faDna, faPrescriptionBottleAlt, faStethoscope } from "@fortawesome/free-solid-svg-icons"; +import { ErrorBoundary } from "ui"; -import DiseaseDetail from './DiseaseDetail'; -import DiseaseResult from './DiseaseResult'; -import DrugDetail from './DrugDetail'; -import DrugResult from './DrugResult'; -import TargetDetail from './TargetDetail'; -import TargetResult from './TargetResult'; +import DiseaseDetail from "./DiseaseDetail"; +import DiseaseResult from "./DiseaseResult"; +import DrugDetail from "./DrugDetail"; +import DrugResult from "./DrugResult"; +import TargetDetail from "./TargetDetail"; +import TargetResult from "./TargetResult"; const getCounts = entities => { const counts = { @@ -39,11 +35,11 @@ const getCounts = entities => { const useStyles = makeStyles(theme => ({ label: { - marginLeft: '-6px', + marginLeft: "-6px", }, labelIcon: { color: theme.palette.primary.main, - marginRight: '2px', + marginRight: "2px", }, })); @@ -55,19 +51,10 @@ const SearchFilters = ({ entities, entitiesCount, setEntity }) => { <> - } + control={} label={ <> - + Target ({counts.target}) @@ -77,18 +64,11 @@ const SearchFilters = ({ entities, entitiesCount, setEntity }) => { + } label={ <> - + Disease or phenotype ({counts.disease}) @@ -97,12 +77,7 @@ const SearchFilters = ({ entities, entitiesCount, setEntity }) => { /> - } + control={} label={ <> { }; function SearchResults({ results, page, onPageChange }) { - const TYPE_NAME = '__typename'; + const TYPE_NAME = "__typename"; return ( <> {results.hits.map(({ highlights, object }) => { - if (object[TYPE_NAME] === 'Target') - return ( - - ); - if (object[TYPE_NAME] === 'Disease') - return ( - - ); - return ( - - ); + if (object[TYPE_NAME] === "Target") + return ; + if (object[TYPE_NAME] === "Disease") + return ; + return ; })} ; - else if (topHit[TYPE_NAME] === 'Disease') - COMPONENT = ; - else if (topHit[TYPE_NAME] === 'Drug') - COMPONENT = ; + const TYPE_NAME = "__typename"; + if (topHit[TYPE_NAME] === "Target") COMPONENT = ; + else if (topHit[TYPE_NAME] === "Disease") COMPONENT = ; + else if (topHit[TYPE_NAME] === "Drug") COMPONENT = ; return ( {COMPONENT} @@ -182,14 +140,7 @@ function TopHitDetail({ topHit }) { ); } -function SearchContainer({ - q, - page, - entities, - data, - onPageChange, - onSetEntity, -}) { +function SearchContainer({ q, page, entities, data, onPageChange, onSetEntity }) { const { entities: entitiesCount } = data.search.aggregations; const topHit = data.topHit.hits[0]?.object; @@ -211,11 +162,7 @@ function SearchContainer({ {data.search.hits.length > 0 ? ( - + ) : null} diff --git a/apps/platform/src/pages/SearchPage/SearchPage.jsx b/apps/platform/src/pages/SearchPage/SearchPage.jsx index b682ca8c7..f17c12888 100644 --- a/apps/platform/src/pages/SearchPage/SearchPage.jsx +++ b/apps/platform/src/pages/SearchPage/SearchPage.jsx @@ -1,18 +1,18 @@ -import { useState, useEffect, lazy, Suspense } from 'react'; -import queryString from 'query-string'; -import { Typography } from '@mui/material'; -import { useLocation, useHistory } from 'react-router-dom'; -import { LoadingBackdrop, EmptyPage, BasePage } from 'ui'; +import { useState, useEffect, lazy, Suspense } from "react"; +import queryString from "query-string"; +import { Typography } from "@mui/material"; +import { useLocation, useHistory } from "react-router-dom"; +import { LoadingBackdrop, EmptyPage, BasePage } from "ui"; -import client from '../../client'; -import SEARCH_PAGE_QUERY from './SearchPageQuery.gql'; -import config from '../../config'; +import client from "../../client"; +import SEARCH_PAGE_QUERY from "./SearchPageQuery.gql"; +import config from "../../config"; -const SearchContainer = lazy(() => import('./SearchContainer')); +const SearchContainer = lazy(() => import("./SearchContainer")); const QS_OPTIONS = { sort: false, - arrayFormat: 'comma', + arrayFormat: "comma", skipNull: true, }; @@ -20,7 +20,7 @@ const parseQueryString = qs => { const params = queryString.parse(qs, QS_OPTIONS); if (!params.entities) { params.entities = []; - } else if (typeof params.entities === 'string') { + } else if (typeof params.entities === "string") { params.entities = [params.entities]; } return params; @@ -64,9 +64,7 @@ function SearchPage() { const params = { q, page: 1, // reset to page 1 - entities: checked - ? [...entities, entity] - : entities.filter(e => e !== entity), + entities: checked ? [...entities, entity] : entities.filter(e => e !== entity), }; const qs = queryString.stringify(params, QS_OPTIONS); history.push(`/search?${qs}`); @@ -81,8 +79,7 @@ function SearchPage() { documentationLink={config.profile.documentationUrl} > - We could not find anything in the Platform database that matches - "{q}" + We could not find anything in the Platform database that matches "{q}" ); diff --git a/apps/platform/src/pages/SearchPage/TargetDetail.jsx b/apps/platform/src/pages/SearchPage/TargetDetail.jsx index 192d84310..79a6aac99 100644 --- a/apps/platform/src/pages/SearchPage/TargetDetail.jsx +++ b/apps/platform/src/pages/SearchPage/TargetDetail.jsx @@ -1,11 +1,11 @@ -import { CardContent, Typography } from '@mui/material'; -import { makeStyles, useTheme } from '@mui/styles'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faDna } from '@fortawesome/free-solid-svg-icons'; +import { CardContent, Typography } from "@mui/material"; +import { makeStyles, useTheme } from "@mui/styles"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faDna } from "@fortawesome/free-solid-svg-icons"; -import { Link } from 'ui'; -import TargetDescription from '../TargetPage/TargetDescription'; -import { getUniprotIds, clearDescriptionCodes } from '../../utils/global'; +import { Link } from "ui"; +import TargetDescription from "../TargetPage/TargetDescription"; +import { getUniprotIds, clearDescriptionCodes } from "../../utils/global"; const useStyles = makeStyles(() => ({ subtitle: { @@ -14,24 +14,14 @@ const useStyles = makeStyles(() => ({ })); function TargetDetail({ data }) { - const { - id, - approvedSymbol, - approvedName, - functionDescriptions, - biotype, - proteinIds, - } = data; + const { id, approvedSymbol, approvedName, functionDescriptions, biotype, proteinIds } = data; const classes = useStyles(); const theme = useTheme(); const uniprotIds = getUniprotIds(proteinIds); - const targetDescription = clearDescriptionCodes( - functionDescriptions, - theme.palette.primary.main - ); + const targetDescription = clearDescriptionCodes(functionDescriptions, theme.palette.primary.main); return ( @@ -55,7 +45,7 @@ function TargetDetail({ data }) { {biotype} - UniProt accession{uniprotIds.length > 1 ? 's' : ''} + UniProt accession{uniprotIds.length > 1 ? "s" : ""} {uniprotIds.map(uniprotId => ( diff --git a/apps/platform/src/pages/SearchPage/TargetResult.jsx b/apps/platform/src/pages/SearchPage/TargetResult.jsx index ed30a37d7..51cd60c59 100644 --- a/apps/platform/src/pages/SearchPage/TargetResult.jsx +++ b/apps/platform/src/pages/SearchPage/TargetResult.jsx @@ -1,17 +1,17 @@ -import { makeStyles, useTheme } from '@mui/styles'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faDna } from '@fortawesome/free-solid-svg-icons'; -import { Highlights, Link } from 'ui'; +import { makeStyles, useTheme } from "@mui/styles"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faDna } from "@fortawesome/free-solid-svg-icons"; +import { Highlights, Link } from "ui"; -import { clearDescriptionCodes } from '../../utils/global'; -import TargetDescription from '../TargetPage/TargetDescription'; +import { clearDescriptionCodes } from "../../utils/global"; +import TargetDescription from "../TargetPage/TargetDescription"; const useStyles = makeStyles(theme => ({ container: { - marginBottom: '30px', + marginBottom: "30px", }, subtitle: { - fontSize: '20px', + fontSize: "20px", fontWeight: 500, }, icon: { @@ -30,8 +30,7 @@ function TargetResult({ data, highlights }) { return (
- {' '} - {data.approvedSymbol} + {data.approvedSymbol} {data.functionDescriptions.length > 0 ? ( ({ tooltip: { - backgroundColor: 'white', + backgroundColor: "white", border: `1px solid ${theme.palette.grey[400]}`, }, })); diff --git a/apps/platform/src/pages/TargetPage/ClassicAssociations.jsx b/apps/platform/src/pages/TargetPage/ClassicAssociations.jsx index a562f578b..d4ca8ff33 100644 --- a/apps/platform/src/pages/TargetPage/ClassicAssociations.jsx +++ b/apps/platform/src/pages/TargetPage/ClassicAssociations.jsx @@ -1,28 +1,15 @@ -import { useState } from 'react'; -import { - Switch, - Route, - Link, - useRouteMatch, - useLocation, -} from 'react-router-dom'; -import { - Card, - CardContent, - Grid, - Typography, - Tabs, - Tab, -} from '@mui/material'; -import { useQuery } from '@apollo/client'; +import { useState } from "react"; +import { Switch, Route, Link, useRouteMatch, useLocation } from "react-router-dom"; +import { Card, CardContent, Grid, Typography, Tabs, Tab } from "@mui/material"; +import { useQuery } from "@apollo/client"; -import ClassicAssociationsDAG from './ClassicAssociationsDAG'; -import ClassicAssociationsBubbles from './ClassicAssociationsBubbles'; -import ClassicAssociationsTable from './ClassicAssociationsTable'; -import { Facets } from '../../components/Facets'; -import Wrapper from './Wrapper'; +import ClassicAssociationsDAG from "./ClassicAssociationsDAG"; +import ClassicAssociationsBubbles from "./ClassicAssociationsBubbles"; +import ClassicAssociationsTable from "./ClassicAssociationsTable"; +import { Facets } from "../../components/Facets"; +import Wrapper from "./Wrapper"; -import TARGET_FACETS_QUERY from './TargetFacets.gql'; +import TARGET_FACETS_QUERY from "./TargetFacets.gql"; function ClassicAssociations({ ensgId, symbol }) { const match = useRouteMatch(); @@ -39,21 +26,19 @@ function ClassicAssociations({ ensgId, symbol }) { const facetData = data?.target?.associatedDiseases.aggregations.aggs; return ( - + {data ? ( <> - - {data.target.associatedDiseases.count} diseases or phenotypes - {' '} + {data.target.associatedDiseases.count} diseases or phenotypes{" "} associated with {symbol} ) : ( Loading... )} - {' '} + {" "} @@ -68,12 +53,7 @@ function ClassicAssociations({ ensgId, symbol }) { - + - + @@ -107,10 +87,7 @@ function ClassicAssociations({ ensgId, symbol }) { /> - + diff --git a/apps/platform/src/pages/TargetPage/ClassicAssociationsBubbles.jsx b/apps/platform/src/pages/TargetPage/ClassicAssociationsBubbles.jsx index 5d8ba1a9f..26e0ae7cd 100644 --- a/apps/platform/src/pages/TargetPage/ClassicAssociationsBubbles.jsx +++ b/apps/platform/src/pages/TargetPage/ClassicAssociationsBubbles.jsx @@ -1,14 +1,14 @@ -import { useRef, useState } from 'react'; -import { Grid, Typography } from '@mui/material'; -import { useTheme } from '@mui/styles'; -import { withContentRect } from 'react-measure'; -import { scaleQuantize, pack, hierarchy } from 'd3'; -import { v1 } from 'uuid'; -import { Legend, DownloadSvgPlot } from 'ui'; +import { useRef, useState } from "react"; +import { Grid, Typography } from "@mui/material"; +import { useTheme } from "@mui/styles"; +import { withContentRect } from "react-measure"; +import { scaleQuantize, pack, hierarchy } from "d3"; +import { v1 } from "uuid"; +import { Legend, DownloadSvgPlot } from "ui"; -import AssociationTooltip from './AssociationTooltip'; -import { colorRange } from '../../constants'; -import Slider from './ClassicAssociationsSlider'; +import AssociationTooltip from "./AssociationTooltip"; +import { colorRange } from "../../constants"; +import Slider from "./ClassicAssociationsSlider"; function findTas(id, idToDisease) { const tas = new Set(); @@ -59,7 +59,7 @@ function buildHierarchicalData(associations, idToDisease) { }); return { - uniqueId: 'EFO_ROOT', + uniqueId: "EFO_ROOT", children: Object.entries(tasMap).map(([taId, descendants]) => ({ id: taId, uniqueId: taId, @@ -90,15 +90,15 @@ function ClassicAssociationsBubbles({ const root = hierarchy(hierarchicalData); const packLayout = pack() .size([size, size]) - .padding(node => (node.data.uniqueId === 'EFO_ROOT' ? 17 : 2)); + .padding(node => (node.data.uniqueId === "EFO_ROOT" ? 17 : 2)); root.sum(d => d.score); packLayout(root); let ASSOCIATION_COMPONENT = null; function getText({ node }) { - if (node.data.uniqueId === 'EFO_ROOT') return null; - if (node.parent && node.parent.data.uniqueId === 'EFO_ROOT') + if (node.data.uniqueId === "EFO_ROOT") return null; + if (node.parent && node.parent.data.uniqueId === "EFO_ROOT") return ( - {node.data.name.split(' ').map((word, i, words) => ( + {node.data.name.split(" ").map((word, i, words) => ( {word} @@ -144,10 +144,7 @@ function ClassicAssociationsBubbles({ width={size} > {root.descendants().map(node => ( - + {getText({ node })} @@ -182,18 +172,13 @@ function ClassicAssociationsBubbles({ ); } else if (size) { ASSOCIATION_COMPONENT = ( - - No associations with score greater than or equal to {minScore} - + No associations with score greater than or equal to {minScore} ); } return ( <> - + setMinScore(val)} /> {ASSOCIATION_COMPONENT} @@ -212,4 +197,4 @@ function ClassicAssociationsBubbles({ ); } -export default withContentRect('bounds')(ClassicAssociationsBubbles); +export default withContentRect("bounds")(ClassicAssociationsBubbles); diff --git a/apps/platform/src/pages/TargetPage/ClassicAssociationsDAG.jsx b/apps/platform/src/pages/TargetPage/ClassicAssociationsDAG.jsx index c37d044a9..e429b26a0 100644 --- a/apps/platform/src/pages/TargetPage/ClassicAssociationsDAG.jsx +++ b/apps/platform/src/pages/TargetPage/ClassicAssociationsDAG.jsx @@ -1,17 +1,11 @@ -import { useState, useMemo, useRef } from 'react'; -import { max } from 'd3'; -import { - layeringLongestPath, - decrossTwoLayer, - coordCenter, - sugiyama, - dagStratify, -} from 'd3-dag'; -import { withContentRect } from 'react-measure'; -import { Grid, Typography } from '@mui/material'; -import { Legend, DownloadSvgPlot } from 'ui'; -import Slider from './ClassicAssociationsSlider'; -import Dag from './Dag'; +import { useState, useMemo, useRef } from "react"; +import { max } from "d3"; +import { layeringLongestPath, decrossTwoLayer, coordCenter, sugiyama, dagStratify } from "d3-dag"; +import { withContentRect } from "react-measure"; +import { Grid, Typography } from "@mui/material"; +import { Legend, DownloadSvgPlot } from "ui"; +import Slider from "./ClassicAssociationsSlider"; +import Dag from "./Dag"; // find closest ancestors that are also associations function getParentIds(diseaseId, idToDisease, assocSet) { @@ -44,11 +38,7 @@ function buildDagData(idToDisease, associations, assocSet) { const dag = []; const tas = new Set(); associations.forEach(association => { - const parentIds = getParentIds( - association.disease.id, - idToDisease, - assocSet - ); + const parentIds = getParentIds(association.disease.id, idToDisease, assocSet); parentIds.forEach(parentId => { const node = idToDisease[parentId]; @@ -80,10 +70,7 @@ const layering = layeringLongestPath(); const decross = decrossTwoLayer(); const coord = coordCenter(); -const helperLayout = sugiyama() - .layering(layering) - .decross(decross) - .coord(coord); +const helperLayout = sugiyama().layering(layering).decross(decross).coord(coord); function getMaxLayerCount(dag) { helperLayout(dag); @@ -112,9 +99,7 @@ const diameter = 8; const radius = diameter / 2; function getDagValues({ associations, idToDisease, minCommittedScore, width }) { - const filteredAssociations = associations.filter( - assoc => assoc.score >= minCommittedScore - ); + const filteredAssociations = associations.filter(assoc => assoc.score >= minCommittedScore); const assocSet = filteredAssociations.reduce((acc, assoc) => { acc[assoc.disease.id] = assoc; return acc; @@ -134,11 +119,7 @@ function getDagValues({ associations, idToDisease, minCommittedScore, width }) { dag = dagStratify()(dagData); maxLayerCount = getMaxLayerCount(dag); height = maxLayerCount * 10; - layout = sugiyama() - .layering(layering) - .decross(decross) - .coord(coord) - .size([height, width]); + layout = sugiyama().layering(layering).decross(decross).coord(coord).size([height, width]); layout(dag); @@ -181,10 +162,7 @@ function ClassicAssociationsDAG({ return ( <> - + setMinScore(val)} @@ -196,7 +174,7 @@ function ClassicAssociationsDAG({ container justifyContent="center" alignItems="center" - style={{ margin: '0 auto', minHeight: '340px' }} + style={{ margin: "0 auto", minHeight: "340px" }} > {width && assocs.length > 0 && ( - No associations with score greater than or equal to{' '} - {minCommittedScore} + No associations with score greater than or equal to {minCommittedScore} )} @@ -223,4 +200,4 @@ function ClassicAssociationsDAG({ ); } -export default withContentRect('bounds')(ClassicAssociationsDAG); +export default withContentRect("bounds")(ClassicAssociationsDAG); diff --git a/apps/platform/src/pages/TargetPage/ClassicAssociationsSlider.jsx b/apps/platform/src/pages/TargetPage/ClassicAssociationsSlider.jsx index 31b85ea36..202d01ca4 100644 --- a/apps/platform/src/pages/TargetPage/ClassicAssociationsSlider.jsx +++ b/apps/platform/src/pages/TargetPage/ClassicAssociationsSlider.jsx @@ -1,27 +1,21 @@ -import { Slider, Typography } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { decimalPlaces } from '../../constants'; +import { Slider, Typography } from "@mui/material"; +import { makeStyles } from "@mui/styles"; +import { decimalPlaces } from "../../constants"; const useStyles = makeStyles(() => ({ root: { width: 300, }, container: { - padding: '10px 0', + padding: "10px 0", }, })); -function ClassicAssociationsSlider({ - value, - onChange, - onChangeCommitted, -}) { +function ClassicAssociationsSlider({ value, onChange, onChangeCommitted }) { const classes = useStyles(); return (
- - Minimum Score: {value.toFixed(decimalPlaces)} - + Minimum Score: {value.toFixed(decimalPlaces)} ({ root: { - overflow: 'visible', - padding: '2rem 3rem 0 0 !important', + overflow: "visible", + padding: "2rem 3rem 0 0 !important", }, table: { - tableLayout: 'fixed !important', + tableLayout: "fixed !important", }, sortLabel: { - top: '8px', + top: "8px", }, innerLabel: { - position: 'absolute', - display: 'inline-block', - transformOrigin: '0 0', + position: "absolute", + display: "inline-block", + transformOrigin: "0 0", bottom: 0, - transform: 'rotate(310deg)', - marginBottom: '5px', + transform: "rotate(310deg)", + marginBottom: "5px", }, nameHeaderCell: { - width: '20%', - borderBottom: '0 !important', - height: '140px !important', - verticalAlign: 'bottom !important', - textAlign: 'end', - paddingBottom: '.4rem', + width: "20%", + borderBottom: "0 !important", + height: "140px !important", + verticalAlign: "bottom !important", + textAlign: "end", + paddingBottom: ".4rem", }, headerCell: { - position: 'relative', - borderBottom: '0 !important', - height: '140px !important', - whiteSpace: 'nowrap', - textAlign: 'center !important', - verticalAlign: 'bottom !important', + position: "relative", + borderBottom: "0 !important", + height: "140px !important", + whiteSpace: "nowrap", + textAlign: "center !important", + verticalAlign: "bottom !important", }, overallCell: { - border: '0 !important', - textAlign: 'center !important', - paddingTop: '1px !important', - paddingBottom: '1px !important', - paddingLeft: '1px !important', - paddingRight: '10px !important', + border: "0 !important", + textAlign: "center !important", + paddingTop: "1px !important", + paddingBottom: "1px !important", + paddingLeft: "1px !important", + paddingRight: "10px !important", }, cell: { - border: '0 !important', - height: '20px !important', - textAlign: 'center !important', - padding: '1px 1px !important', - '&:last-child': { + border: "0 !important", + height: "20px !important", + textAlign: "center !important", + padding: "1px 1px !important", + "&:last-child": { paddingRight: 0, }, }, colorSpan: { - display: 'block', - height: '20px', - border: '1px solid #eeefef', + display: "block", + height: "20px", + border: "1px solid #eeefef", }, nameCell: { - border: '0 !important', - width: '20%', - padding: '0 0.5rem 0 0 !important', - '&:first-child': { + border: "0 !important", + width: "20%", + padding: "0 0.5rem 0 0 !important", + "&:first-child": { paddingLeft: 0, }, }, nameContainer: { - display: 'block', - textAlign: 'end', - textOverflow: 'ellipsis', - overflow: 'hidden', + display: "block", + textAlign: "end", + textOverflow: "ellipsis", + overflow: "hidden", color: theme.palette.text.primary, - '&:hover': { + "&:hover": { color: theme.palette.text.primary, }, }, @@ -96,25 +89,22 @@ const useStyles = makeStyles(theme => ({ function getColumns(ensemblId, classes, isPartnerPreview) { const columns = [ { - id: 'name', - label: 'Name', + id: "name", + label: "Name", classes: { headerCell: classes.nameHeaderCell, cell: classes.nameCell, }, exportValue: data => data.disease.name, renderCell: row => ( - + {row.name} ), }, { - id: 'score', - label: 'Overall association score', + id: "score", + label: "Overall association score", classes: { headerCell: classes.headerCell, cell: classes.overallCell, @@ -146,7 +136,7 @@ function getColumns(ensemblId, classes, isPartnerPreview) { {dt.label} {dt.isPrivate ? : null} ), - exportLabel: `${dt.label} ${dt.isPrivate ? 'Private' : ''}`, + exportLabel: `${dt.label} ${dt.isPrivate ? "Private" : ""}`, classes: { headerCell: classes.headerCell, innerLabel: classes.innerLabel, @@ -154,19 +144,11 @@ function getColumns(ensemblId, classes, isPartnerPreview) { cell: classes.cell, }, exportValue: data => { - const datatypeScore = data.datatypeScores.find( - DTScore => DTScore.componentId === dt.id - ); - return datatypeScore ? datatypeScore.score : 'No data'; + const datatypeScore = data.datatypeScores.find(DTScore => DTScore.componentId === dt.id); + return datatypeScore ? datatypeScore.score : "No data"; }, sortable: true, - renderCell: row => ( - - ), + renderCell: row => , }); }); @@ -181,9 +163,7 @@ function getRows(data) { score: d.score, }; dataTypes.forEach(dataType => { - const dataTypeScore = d.datatypeScores.find( - DTScore => DTScore.componentId === dataType.id - ); + const dataTypeScore = d.datatypeScores.find(DTScore => DTScore.componentId === dataType.id); if (dataTypeScore) { row[dataType.id] = dataTypeScore.score; @@ -199,8 +179,8 @@ function ClassicAssociationsTable({ ensgId, aggregationFilters }) { const [count, setCount] = useState(); const [initialLoading, setInitialLoading] = useState(true); const [loading, setLoading] = useState(false); - const [filter, setFilter] = useState(''); - const [sortBy, setSortBy] = useState('score'); + const [filter, setFilter] = useState(""); + const [sortBy, setSortBy] = useState("score"); const [page, setPage] = useState(0); const [pageSize, setPageSize] = useState(50); const { isPartnerPreview } = usePermissions(); @@ -238,11 +218,11 @@ function ClassicAssociationsTable({ ensgId, aggregationFilters }) { TARGET_ASSOCIATIONS_QUERY, { ensemblId: ensgId, - filter: filter === '' ? null : filter, + filter: filter === "" ? null : filter, sortBy, aggregationFilters, }, - 'data.target.associatedDiseases' + "data.target.associatedDiseases" ); const handlePageChange = pageChanged => { diff --git a/apps/platform/src/pages/TargetPage/Dag.jsx b/apps/platform/src/pages/TargetPage/Dag.jsx index 62bfdfdba..45ec992fd 100644 --- a/apps/platform/src/pages/TargetPage/Dag.jsx +++ b/apps/platform/src/pages/TargetPage/Dag.jsx @@ -1,7 +1,7 @@ -import { Fragment, memo } from 'react'; -import { line as d3Line, curveMonotoneX, scaleQuantize } from 'd3'; -import { colorRange } from '../../constants'; -import AssociationTooltip from './AssociationTooltip'; +import { Fragment, memo } from "react"; +import { line as d3Line, curveMonotoneX, scaleQuantize } from "d3"; +import { colorRange } from "../../constants"; +import AssociationTooltip from "./AssociationTooltip"; const color = scaleQuantize().domain([0, 1]).range(colorRange); @@ -12,20 +12,11 @@ const radius = diameter / 2; const yOffset = 100; function textWithEllipsis(text, threshold) { - if (!text) return ''; - return text.length <= threshold ? text : `${text.slice(0, threshold) }...`; + if (!text) return ""; + return text.length <= threshold ? text : `${text.slice(0, threshold)}...`; } -function Dag({ - ensemblId, - width, - height, - links, - nodes, - xOffset, - textLimit, - svgRef, -}) { +function Dag({ ensemblId, width, height, links, nodes, xOffset, textLimit, svgRef }) { line.x(d => d.y - xOffset).y(d => d.x); return ( @@ -37,14 +28,7 @@ function Dag({ height={height + yOffset} > - + @@ -57,50 +41,19 @@ function Dag({ stroke="#e0e0e0" strokeWidth="2" /> - + therapeutic area - - + + disease - + GENERAL - + SPECIFIC {links.map(({ points, source, target }) => ( - - ))} + + ))} {nodes.map(node => ( - - - {node.data.name} - {textWithEllipsis(node.data.name, textLimit)} - - - {node.data.parentIds.length === 0 ? ( - - ) : ( - - )} - - - ))} + + + {node.data.name} + {textWithEllipsis(node.data.name, textLimit)} + + + {node.data.parentIds.length === 0 ? ( + + ) : ( + + )} + + + ))} ); diff --git a/apps/platform/src/pages/TargetPage/Header.jsx b/apps/platform/src/pages/TargetPage/Header.jsx index ee780eed0..408f21e0c 100644 --- a/apps/platform/src/pages/TargetPage/Header.jsx +++ b/apps/platform/src/pages/TargetPage/Header.jsx @@ -1,15 +1,9 @@ -import { Button } from '@mui/material'; -import { faDna } from '@fortawesome/free-solid-svg-icons'; -import config from '../../config'; -import { styled } from '@mui/material/styles'; +import { Button } from "@mui/material"; +import { faDna } from "@fortawesome/free-solid-svg-icons"; +import config from "../../config"; +import { styled } from "@mui/material/styles"; -import { - CrisprDepmapLink, - ExternalLink, - TepLink, - XRefLinks, - Header as HeaderBase, -} from 'ui'; +import { CrisprDepmapLink, ExternalLink, TepLink, XRefLinks, Header as HeaderBase } from "ui"; const GeneticsButton = styled(Button)` color: #fff; diff --git a/apps/platform/src/pages/TargetPage/Profile.jsx b/apps/platform/src/pages/TargetPage/Profile.jsx index 29c02ca70..177da54a8 100644 --- a/apps/platform/src/pages/TargetPage/Profile.jsx +++ b/apps/platform/src/pages/TargetPage/Profile.jsx @@ -1,77 +1,57 @@ -import { gql } from '@apollo/client'; -import { lazy, Suspense } from 'react'; +import { gql } from "@apollo/client"; +import { lazy, Suspense } from "react"; import { PlatformApiProvider, SectionContainer, SummaryContainer, summaryUtils, SectionLoader, -} from 'ui'; +} from "ui"; -import KnownDrugsSummary from 'sections/src/target/KnownDrugs/Summary'; -import TractabilitySummary from 'sections/src/target/Tractability/Summary'; -import SafetySummary from 'sections/src/target/Safety/Summary'; -import PharmacogenomicsSummary from 'sections/src/target/Pharmacogenomics/Summary'; -import ChemicalProbesSummary from 'sections/src/target/ChemicalProbes/Summary'; -import BaselineExpressionSummary from 'sections/src/target/Expression/Summary'; -import DepMapSummary from 'sections/src/target/DepMap/Summary'; -import GeneOntologySummary from 'sections/src/target/GeneOntology/Summary'; -import GeneticConstraintSummary from 'sections/src/target/GeneticConstraint/Summary'; -import ProtVistaSummary from 'sections/src/target/ProtVista/Summary'; -import MolecularInteractionsSummary from 'sections/src/target/MolecularInteractions/Summary'; -import PathwaysSummary from 'sections/src/target/Pathways/Summary'; -import CancerHallmarksSummary from 'sections/src/target/CancerHallmarks/Summary'; -import MousePhenotypesSummary from 'sections/src/target/MousePhenotypes/Summary'; -import ComparativeGenomicsSummary from 'sections/src/target/ComparativeGenomics/Summary'; -import SubcellularLocationSummary from 'sections/src/target/SubcellularLocation/Summary'; -import BibliographySummary from 'sections/src/target/Bibliography/Summary'; +import KnownDrugsSummary from "sections/src/target/KnownDrugs/Summary"; +import TractabilitySummary from "sections/src/target/Tractability/Summary"; +import SafetySummary from "sections/src/target/Safety/Summary"; +import PharmacogenomicsSummary from "sections/src/target/Pharmacogenomics/Summary"; +import ChemicalProbesSummary from "sections/src/target/ChemicalProbes/Summary"; +import BaselineExpressionSummary from "sections/src/target/Expression/Summary"; +import DepMapSummary from "sections/src/target/DepMap/Summary"; +import GeneOntologySummary from "sections/src/target/GeneOntology/Summary"; +import GeneticConstraintSummary from "sections/src/target/GeneticConstraint/Summary"; +import ProtVistaSummary from "sections/src/target/ProtVista/Summary"; +import MolecularInteractionsSummary from "sections/src/target/MolecularInteractions/Summary"; +import PathwaysSummary from "sections/src/target/Pathways/Summary"; +import CancerHallmarksSummary from "sections/src/target/CancerHallmarks/Summary"; +import MousePhenotypesSummary from "sections/src/target/MousePhenotypes/Summary"; +import ComparativeGenomicsSummary from "sections/src/target/ComparativeGenomics/Summary"; +import SubcellularLocationSummary from "sections/src/target/SubcellularLocation/Summary"; +import BibliographySummary from "sections/src/target/Bibliography/Summary"; -import ProfileHeader from './ProfileHeader'; -import client from '../../client'; +import ProfileHeader from "./ProfileHeader"; +import client from "../../client"; -const KnownDrugsSection = lazy(() => - import('sections/src/target/KnownDrugs/Body') -); -const TractabilitySection = lazy(() => - import('sections/src/target/Tractability/Body') -); -const SafetySection = lazy(() => import('sections/src/target/Safety/Body')); -const PharmacogenomicsSection = lazy(() => import('sections/src/target/Pharmacogenomics/Body')); -const ChemicalProbesSection = lazy(() => - import('sections/src/target/ChemicalProbes/Body') -); -const BaselineExpressionSection = lazy(() => - import('sections/src/target/Expression/Body') -); -const DepMapSection = lazy(() => import('sections/src/target/DepMap/Body')); -const GeneOntologySection = lazy(() => - import('sections/src/target/GeneOntology/Body') -); -const GeneticConstraintSection = lazy(() => - import('sections/src/target/GeneticConstraint/Body') -); -const ProtVistaSection = lazy(() => - import('sections/src/target/ProtVista/Body') -); +const KnownDrugsSection = lazy(() => import("sections/src/target/KnownDrugs/Body")); +const TractabilitySection = lazy(() => import("sections/src/target/Tractability/Body")); +const SafetySection = lazy(() => import("sections/src/target/Safety/Body")); +const PharmacogenomicsSection = lazy(() => import("sections/src/target/Pharmacogenomics/Body")); +const ChemicalProbesSection = lazy(() => import("sections/src/target/ChemicalProbes/Body")); +const BaselineExpressionSection = lazy(() => import("sections/src/target/Expression/Body")); +const DepMapSection = lazy(() => import("sections/src/target/DepMap/Body")); +const GeneOntologySection = lazy(() => import("sections/src/target/GeneOntology/Body")); +const GeneticConstraintSection = lazy(() => import("sections/src/target/GeneticConstraint/Body")); +const ProtVistaSection = lazy(() => import("sections/src/target/ProtVista/Body")); const MolecularInteractionsSection = lazy(() => - import('sections/src/target/MolecularInteractions/Body') -); -const PathwaysSection = lazy(() => import('sections/src/target/Pathways/Body')); -const CancerHallmarksSection = lazy(() => - import('sections/src/target/CancerHallmarks/Body') -); -const MousePhenotypesSection = lazy(() => - import('sections/src/target/MousePhenotypes/Body') + import("sections/src/target/MolecularInteractions/Body") ); +const PathwaysSection = lazy(() => import("sections/src/target/Pathways/Body")); +const CancerHallmarksSection = lazy(() => import("sections/src/target/CancerHallmarks/Body")); +const MousePhenotypesSection = lazy(() => import("sections/src/target/MousePhenotypes/Body")); const ComparativeGenomicsSection = lazy(() => - import('sections/src/target/ComparativeGenomics/Body') + import("sections/src/target/ComparativeGenomics/Body") ); const SubcellularLocationSection = lazy(() => - import('sections/src/target/SubcellularLocation/Body') -); -const BibliographySection = lazy(() => - import('sections/src/target/Bibliography/Body') + import("sections/src/target/SubcellularLocation/Body") ); +const BibliographySection = lazy(() => import("sections/src/target/Bibliography/Body")); const summaries = [ KnownDrugsSummary, @@ -93,11 +73,8 @@ const summaries = [ BibliographySummary, ]; -const TARGET = 'target'; -const TARGET_PROFILE_SUMMARY_FRAGMENT = summaryUtils.createSummaryFragment( - summaries, - 'Target' -); +const TARGET = "target"; +const TARGET_PROFILE_SUMMARY_FRAGMENT = summaryUtils.createSummaryFragment(summaries, "Target"); const TARGET_PROFILE_QUERY = gql` query TargetProfileQuery($ensgId: String!) { target(ensemblId: $ensgId) { @@ -123,7 +100,7 @@ function Profile({ ensgId, symbol }) { - + @@ -150,47 +127,31 @@ function Profile({ ensgId, symbol }) { }> - + }> }> - + }> }> - + }> }> - + }> }> - + }> @@ -202,11 +163,7 @@ function Profile({ ensgId, symbol }) { }> - + }> diff --git a/apps/platform/src/pages/TargetPage/ProfileHeader.jsx b/apps/platform/src/pages/TargetPage/ProfileHeader.jsx index 58aae31a4..23ad18a65 100644 --- a/apps/platform/src/pages/TargetPage/ProfileHeader.jsx +++ b/apps/platform/src/pages/TargetPage/ProfileHeader.jsx @@ -1,14 +1,10 @@ -import { - usePlatformApi, - ProfileHeader as BaseProfileHeader, - ProfileChipList, -} from 'ui'; -import { useTheme } from '@mui/styles'; -import TargetDescription from './TargetDescription'; +import { usePlatformApi, ProfileHeader as BaseProfileHeader, ProfileChipList } from "ui"; +import { useTheme } from "@mui/styles"; +import TargetDescription from "./TargetDescription"; -import { clearDescriptionCodes } from '../../utils/global'; +import { clearDescriptionCodes } from "../../utils/global"; -import TARGET_PROFILE_HEADER_FRAGMENT from './TargetProfileHeader.gql'; +import TARGET_PROFILE_HEADER_FRAGMENT from "./TargetProfileHeader.gql"; /* * Target synonyms from the API have a "label" and a "source" @@ -18,13 +14,13 @@ import TARGET_PROFILE_HEADER_FRAGMENT from './TargetProfileHeader.gql'; */ const parseSynonyms = synonyms => { const sources = { - HGNC: 'HGNC', - uniprot: 'UniProt', - NCBI_entrez: 'Entrez', + HGNC: "HGNC", + uniprot: "UniProt", + NCBI_entrez: "Entrez", }; // Synonyms needs to be sorted by source in specific order // (order converted to a map for convenience when doing the sort) - const sortingOrder = ['HGNC', 'uniprot', 'NCBI_entrez'].reduce( + const sortingOrder = ["HGNC", "uniprot", "NCBI_entrez"].reduce( (acc, a, i) => ({ ...acc, [a]: i }), {} ); @@ -36,8 +32,7 @@ const parseSynonyms = synonyms => { sortedSynonyms.forEach(s => { const thisSyn = parsedSynonyms.find( - parsedSynonym => - parsedSynonym.label.toLowerCase() === s.label.toLowerCase() + parsedSynonym => parsedSynonym.label.toLowerCase() === s.label.toLowerCase() ); if (!thisSyn) { parsedSynonyms.push({ label: s.label, tooltip: [s.source] }); @@ -48,7 +43,7 @@ const parseSynonyms = synonyms => { }); parsedSynonyms.forEach(syn => { - syn.tooltip = `Source: ${syn.tooltip.map(s => sources[s]).join(', ')}`; + syn.tooltip = `Source: ${syn.tooltip.map(s => sources[s]).join(", ")}`; }); return parsedSynonyms; @@ -71,8 +66,8 @@ function ProfileHeader() { // however in the future it will hold information to display other chips const geneInfo = [ { - label: 'Core essential gene', - tooltip: 'Source: Cancer DepMap', + label: "Core essential gene", + tooltip: "Source: Cancer DepMap", isVisible: data?.target.isEssential, }, ]; diff --git a/apps/platform/src/pages/TargetPage/TargetAssociations/index.js b/apps/platform/src/pages/TargetPage/TargetAssociations/index.js index 30af6cda2..f8085891e 100644 --- a/apps/platform/src/pages/TargetPage/TargetAssociations/index.js +++ b/apps/platform/src/pages/TargetPage/TargetAssociations/index.js @@ -1 +1 @@ -export { default } from './TargetAssociations'; +export { default } from "./TargetAssociations"; diff --git a/apps/platform/src/pages/TargetPage/TargetDescription.jsx b/apps/platform/src/pages/TargetPage/TargetDescription.jsx index 096a104a1..59d6409ac 100644 --- a/apps/platform/src/pages/TargetPage/TargetDescription.jsx +++ b/apps/platform/src/pages/TargetPage/TargetDescription.jsx @@ -1,29 +1,24 @@ -import { useState, useLayoutEffect, useRef } from 'react'; -import { v1 } from 'uuid'; -import { Typography, Skeleton } from '@mui/material'; -import { withStyles } from '@mui/styles'; +import { useState, useLayoutEffect, useRef } from "react"; +import { v1 } from "uuid"; +import { Typography, Skeleton } from "@mui/material"; +import { withStyles } from "@mui/styles"; const styles = theme => ({ textContainer: { - display: 'flex', - flexDirection: 'column', - overflow: 'hidden', - '& span:not(:last-child)': { marginBottom: '12px' }, + display: "flex", + flexDirection: "column", + overflow: "hidden", + "& span:not(:last-child)": { marginBottom: "12px" }, }, showMore: { color: theme.palette.primary.main, - cursor: 'pointer', + cursor: "pointer", }, }); -const getStyleHeight = ({ - newNumberOfLines, - lineLimit, - showMore, - lineHeight, -}) => { - if (newNumberOfLines <= lineLimit) return 'auto'; - if (showMore) return 'auto'; +const getStyleHeight = ({ newNumberOfLines, lineLimit, showMore, lineHeight }) => { + if (newNumberOfLines <= lineLimit) return "auto"; + if (showMore) return "auto"; return `${lineLimit * lineHeight}px`; }; @@ -31,7 +26,7 @@ function LongText({ classes, lineLimit, children, - variant = 'body2', + variant = "body2", descriptions, targetId, hasGutterBottom = false, @@ -45,9 +40,7 @@ function LongText({ const el = containerRef.current; const height = el.offsetHeight; const lineHeight = Number.parseInt( - document.defaultView - .getComputedStyle(el, null) - .getPropertyValue('line-height'), + document.defaultView.getComputedStyle(el, null).getPropertyValue("line-height"), 10 ); const newNumberOfLines = Math.round(height / lineHeight); @@ -78,13 +71,10 @@ function LongText({ {numberOfLines >= lineLimit && ( - {showMore ? '' : '... '}[{' '} - setShowMore(!showMore)} - > - {showMore ? ' hide' : ' show more'} - {' '} + {showMore ? "" : "... "}[{" "} + setShowMore(!showMore)}> + {showMore ? " hide" : " show more"} + {" "} ] )} @@ -123,7 +113,7 @@ function TargetDescription({ return ( <> {showLabel && Description} - {loading ? : content} + {loading ? : content} ); } diff --git a/apps/platform/src/pages/TargetPage/Wrapper.jsx b/apps/platform/src/pages/TargetPage/Wrapper.jsx index 1ab82343a..3501dce2f 100644 --- a/apps/platform/src/pages/TargetPage/Wrapper.jsx +++ b/apps/platform/src/pages/TargetPage/Wrapper.jsx @@ -1,9 +1,9 @@ -import { useState, useEffect } from 'react'; -import { Skeleton } from '@mui/material'; -import { useBatchDownloader } from 'ui'; -import config from '../../config'; +import { useState, useEffect } from "react"; +import { Skeleton } from "@mui/material"; +import { useBatchDownloader } from "ui"; +import config from "../../config"; -import ASSOCIATIONS_VIZ_QUERY from './AssociationsViz.gql'; +import ASSOCIATIONS_VIZ_QUERY from "./AssociationsViz.gql"; function Wrapper({ ensemblId, symbol, Component, aggregationFilters }) { const [nodes, setNodes] = useState(); @@ -12,19 +12,16 @@ function Wrapper({ ensemblId, symbol, Component, aggregationFilters }) { const getAllAssociations = useBatchDownloader( ASSOCIATIONS_VIZ_QUERY, { ensemblId, aggregationFilters }, - 'data.target.associatedDiseases' + "data.target.associatedDiseases" ); useEffect( () => { let isCurrent = true; - const promises = [ - fetch(config.efoURL).then(res => res.text()), - getAllAssociations(), - ]; + const promises = [fetch(config.efoURL).then(res => res.text()), getAllAssociations()]; Promise.all(promises).then(data => { if (isCurrent) { - const currentNodes = data[0].trim().split('\n').map(JSON.parse); + const currentNodes = data[0].trim().split("\n").map(JSON.parse); setNodes(currentNodes); setAssociations(data[1]); } diff --git a/apps/platform/src/pages/TargetPage/index.js b/apps/platform/src/pages/TargetPage/index.js index fc95fdfa2..d8328cf60 100644 --- a/apps/platform/src/pages/TargetPage/index.js +++ b/apps/platform/src/pages/TargetPage/index.js @@ -1 +1 @@ -export { default } from './TargetPage'; +export { default } from "./TargetPage"; diff --git a/apps/platform/src/pages/VariantsPage/VariantsPage.jsx b/apps/platform/src/pages/VariantsPage/VariantsPage.jsx index e35dd45b8..4980c6e7d 100644 --- a/apps/platform/src/pages/VariantsPage/VariantsPage.jsx +++ b/apps/platform/src/pages/VariantsPage/VariantsPage.jsx @@ -1,304 +1,292 @@ -import { Typography } from '@mui/material'; -import { Link, DataTable } from 'ui'; -import { naLabel } from '../../constants'; +import { Typography } from "@mui/material"; +import { Link, DataTable } from "ui"; +import { naLabel } from "../../constants"; -const accessionUrl = - 'http://www.ontobee.org/ontology/SO?iri=http://purl.obolibrary.org/obo/'; +const accessionUrl = "http://www.ontobee.org/ontology/SO?iri=http://purl.obolibrary.org/obo/"; const variantData = [ { - term: 'transcript ablation', - definition: - 'A feature ablation whereby the deleted region includes a transcript feature.', - code: 'SO_0001893', + term: "transcript ablation", + definition: "A feature ablation whereby the deleted region includes a transcript feature.", + code: "SO_0001893", score: 1, }, { - term: 'curator inference', - definition: 'A sequence variant which is manually curated.', + term: "curator inference", + definition: "A sequence variant which is manually curated.", score: 1, }, { - term: 'trinucleotide repeat expansion', + term: "trinucleotide repeat expansion", definition: - 'A short tandem repeat expansion with an increase in a sequence of three nucleotide units repeated in tandem compared to a reference sequence.', - code: 'SO_0002165', + "A short tandem repeat expansion with an increase in a sequence of three nucleotide units repeated in tandem compared to a reference sequence.", + code: "SO_0002165", score: 1, }, { - term: 'short tandem repeat expansion', + term: "short tandem repeat expansion", definition: - 'A short tandem repeat variant containing more repeat units than the reference sequence.', - code: 'SO_0002162', + "A short tandem repeat variant containing more repeat units than the reference sequence.", + code: "SO_0002162", score: 1, }, { - term: 'frameshift variant', + term: "frameshift variant", definition: - 'A sequence variant which causes a disruption of the translational reading frame, because the number of nucleotides inserted or deleted is not a multiple of three.', - code: 'SO_0001589', + "A sequence variant which causes a disruption of the translational reading frame, because the number of nucleotides inserted or deleted is not a multiple of three.", + code: "SO_0001589", score: 0.95, }, { - term: 'stop gained', + term: "stop gained", definition: - 'A sequence variant whereby at least one base of a codon is changed, resulting in a premature stop codon, leading to a shortened transcript.', - code: 'SO_0001587', + "A sequence variant whereby at least one base of a codon is changed, resulting in a premature stop codon, leading to a shortened transcript.", + code: "SO_0001587", score: 0.95, }, { - term: 'splice region variant', + term: "splice region variant", definition: - 'A sequence variant in which a change has occurred within the region of the splice site, either within 1-3 bases of the exon or 3-8 bases of the intron.', - code: 'SO_0001630', + "A sequence variant in which a change has occurred within the region of the splice site, either within 1-3 bases of the exon or 3-8 bases of the intron.", + code: "SO_0001630", score: 0.95, }, { - term: 'splice acceptor variant', - definition: - "A splice variant that changes the 2 base region at the 3' end of an intron.", - code: 'SO_0001574', + term: "splice acceptor variant", + definition: "A splice variant that changes the 2 base region at the 3' end of an intron.", + code: "SO_0001574", score: 0.95, }, { - term: 'splice donor variant', - definition: - "A splice variant that changes the 2 base pair region at the 5' end of an intron.", - code: 'SO_0001575', + term: "splice donor variant", + definition: "A splice variant that changes the 2 base pair region at the 5' end of an intron.", + code: "SO_0001575", score: 0.95, }, { - term: 'coding sequence variant', - definition: 'A sequence variant that changes the coding sequence.', - code: 'SO_0001580', + term: "coding sequence variant", + definition: "A sequence variant that changes the coding sequence.", + code: "SO_0001580", score: 0.95, }, { - term: 'start lost', - definition: - 'A codon variant that changes at least one base of the canonical start codon..', - code: 'SO_0002012', + term: "start lost", + definition: "A codon variant that changes at least one base of the canonical start codon..", + code: "SO_0002012", score: 0.95, }, { - term: 'incomplete terminal codon variant', + term: "incomplete terminal codon variant", definition: - 'A sequence variant where at least one base of the final codon of an incompletely annotated transcript is changed..', - code: 'SO_0001626', + "A sequence variant where at least one base of the final codon of an incompletely annotated transcript is changed..", + code: "SO_0001626", score: 0.9, }, { - term: 'stop lost', + term: "stop lost", definition: - 'A sequence variant where at least one base of the terminator codon (stop) is changed, resulting in an elongated transcript.', - code: 'SO_0001578', + "A sequence variant where at least one base of the terminator codon (stop) is changed, resulting in an elongated transcript.", + code: "SO_0001578", score: 0.9, }, { - term: 'protein altering variant', + term: "protein altering variant", definition: - 'A sequence_variant which is predicted to change the protein encoded in the coding sequence.', - code: 'SO_0001818', + "A sequence_variant which is predicted to change the protein encoded in the coding sequence.", + code: "SO_0001818", score: 0.7, }, { - term: 'missense variant', + term: "missense variant", definition: - 'A sequence variant that changes one or more bases, resulting in a different amino acid sequence but where the length is preserved.', - code: 'SO_0001583', + "A sequence variant that changes one or more bases, resulting in a different amino acid sequence but where the length is preserved.", + code: "SO_0001583", score: 0.7, }, { - term: 'initiator codon variant', + term: "initiator codon variant", definition: - 'A codon variant that changes at least one base of the first codon of a transcript.', - code: 'SO_0001582', + "A codon variant that changes at least one base of the first codon of a transcript.", + code: "SO_0001582", score: 0.7, }, { - term: 'inframe deletion', - definition: - 'An inframe non synonymous variant that deletes bases from the coding sequence.', - code: 'SO_0001822', + term: "inframe deletion", + definition: "An inframe non synonymous variant that deletes bases from the coding sequence.", + code: "SO_0001822", score: 0.7, }, { - term: 'inframe insertion', - definition: - 'An inframe non synonymous variant that inserts bases into in the coding sequence.', - code: 'SO_0001821', + term: "inframe insertion", + definition: "An inframe non synonymous variant that inserts bases into in the coding sequence.", + code: "SO_0001821", score: 0.7, }, { - term: 'non coding transcript exon variant', + term: "non coding transcript exon variant", definition: - 'A sequence variant that changes non-coding exon sequence in a non-coding transcript.', - code: 'SO_0001619', + "A sequence variant that changes non-coding exon sequence in a non-coding transcript.", + code: "SO_0001619", score: 0.65, }, { - term: 'NMD transcript variant', - definition: 'A variant in a transcript that is the target of NMD.', - code: 'SO_0001621', + term: "NMD transcript variant", + definition: "A variant in a transcript that is the target of NMD.", + code: "SO_0001621", score: 0.65, }, { - term: 'intron variant', - definition: 'A transcript variant occurring within an intron.', - code: 'SO_0001627', + term: "intron variant", + definition: "A transcript variant occurring within an intron.", + code: "SO_0001627", score: 0.65, }, { - term: 'mature miRNA variant', - definition: - 'A transcript variant located with the sequence of the mature miRNA.', - code: 'SO_0001620', + term: "mature miRNA variant", + definition: "A transcript variant located with the sequence of the mature miRNA.", + code: "SO_0001620", score: 0.65, }, { - term: '3 prime UTR variant', + term: "3 prime UTR variant", definition: "A UTR variant of the 3' UTR.", - code: 'SO_0001624', + code: "SO_0001624", score: 0.65, }, { - term: '5 prime UTR variant', + term: "5 prime UTR variant", definition: "A UTR variant of the 5' UTR.", - code: 'SO_0001623', + code: "SO_0001623", score: 0.65, }, { - term: 'non_coding_transcript_exon_variant', + term: "non_coding_transcript_exon_variant", definition: "A UTR variant of the 5' UTR.", - code: 'SO_0001792', + code: "SO_0001792", score: 0.65, }, { - term: 'synonymous variant', - definition: - 'A sequence variant where there is no resulting change to the encoded amino acid.', - code: 'SO_0001819', + term: "synonymous variant", + definition: "A sequence variant where there is no resulting change to the encoded amino acid.", + code: "SO_0001819", score: 0.65, }, { - term: 'stop retained variant', + term: "stop retained variant", definition: - 'A sequence variant where at least one base in the terminator codon is changed, but the terminator remains.', - code: 'SO_0001567', + "A sequence variant where at least one base in the terminator codon is changed, but the terminator remains.", + code: "SO_0001567", score: 0.65, }, { - term: 'regulatory region variant', - definition: 'A sequence variant located within a regulatory region.', - code: 'SO_0001566', + term: "regulatory region variant", + definition: "A sequence variant located within a regulatory region.", + code: "SO_0001566", score: 0.6, }, { - term: 'upstream gene variant', + term: "upstream gene variant", definition: "A sequence variant located 5' of a gene.", - code: 'SO_0001631', + code: "SO_0001631", score: 0.6, }, { - term: 'downstream gene variant', + term: "downstream gene variant", definition: "A sequence variant located 3' of a gene.", - code: 'SO_0001632', + code: "SO_0001632", score: 0.6, }, { - term: 'TF binding site variant', - definition: - 'A sequence variant located within a transcription factor binding site.', - code: 'SO_0001782', + term: "TF binding site variant", + definition: "A sequence variant located within a transcription factor binding site.", + code: "SO_0001782", score: 0.6, }, { - term: 'transcript amplification', - definition: 'A feature amplification of a region containing a transcript.', - code: 'SO_0001889', + term: "transcript amplification", + definition: "A feature amplification of a region containing a transcript.", + code: "SO_0001889", score: 0.6, }, { - term: 'regulatory region amplification', - definition: - 'A feature amplification of a region containing a regulatory region.', - code: 'SO_0001891', + term: "regulatory region amplification", + definition: "A feature amplification of a region containing a regulatory region.", + code: "SO_0001891", score: 0.6, }, { - term: 'TFBS amplification', + term: "TFBS amplification", definition: - 'A feature amplification of a region containing a transcription factor binding site.', - code: 'SO_0001892', + "A feature amplification of a region containing a transcription factor binding site.", + code: "SO_0001892", score: 0.6, }, { - term: 'regulatory region ablation', - definition: - 'A feature ablation whereby the deleted region includes a regulatory region.', - code: 'SO_0001894', + term: "regulatory region ablation", + definition: "A feature ablation whereby the deleted region includes a regulatory region.", + code: "SO_0001894", score: 0.6, }, { - term: 'TFBS ablation', + term: "TFBS ablation", definition: - 'A feature ablation whereby the deleted region includes a transcription factor binding site.', - code: 'SO_0001895', + "A feature ablation whereby the deleted region includes a transcription factor binding site.", + code: "SO_0001895", score: 0.6, }, { - term: 'feature truncation', + term: "feature truncation", definition: - 'A sequence variant that causes the reduction of a genomic feature, with regard to the reference sequence.', - code: 'SO_0001906', + "A sequence variant that causes the reduction of a genomic feature, with regard to the reference sequence.", + code: "SO_0001906", score: 0.6, }, { - term: 'feature elongation', + term: "feature elongation", definition: - 'A sequence variant that causes the extension of a genomic feature, with regard to the reference sequence.', - code: 'SO_0001907', + "A sequence variant that causes the extension of a genomic feature, with regard to the reference sequence.", + code: "SO_0001907", score: 0.6, }, { - term: 'Regulatory nearest gene five prime end', + term: "Regulatory nearest gene five prime end", definition: "Regulatory nearest gene 5' end.", score: 0.5, }, { - term: 'Nearest gene five prime end', + term: "Nearest gene five prime end", definition: "Nearest gene counting from the 5' end.", score: 0.5, }, { - term: 'sequence variant', + term: "sequence variant", definition: - 'A sequence variant is a non exact copy of a sequence feature or genome exhibiting one or more sequence alteration.', - code: 'SO_0001060', + "A sequence variant is a non exact copy of a sequence feature or genome exhibiting one or more sequence alteration.", + code: "SO_0001060", score: 0.5, }, { - term: 'conservative inframe deletion', + term: "conservative inframe deletion", definition: - 'An inframe decrease in cds length that deletes one or more entire codons from the coding sequence but does not change any remaining codons.', - code: 'SO_0001825', + "An inframe decrease in cds length that deletes one or more entire codons from the coding sequence but does not change any remaining codons.", + code: "SO_0001825", score: 0.5, }, ]; const columns = [ { - id: 'term', - label: 'SO term', - width: '24%', + id: "term", + label: "SO term", + width: "24%", }, { - id: 'definition', - label: 'Definitions', - width: '50%', + id: "definition", + label: "Definitions", + width: "50%", }, { - id: 'code', - label: 'SO accession', + id: "code", + label: "SO accession", renderCell: row => row.code ? ( @@ -307,12 +295,12 @@ const columns = [ ) : ( naLabel ), - width: '13%', + width: "13%", }, { - id: 'score', + id: "score", label: <>Functional consequence score, - width: '13%', + width: "13%", }, ]; @@ -323,16 +311,14 @@ function VariantsPage() { Variant definitions - We predict the consequence of variants (germline or somatic) on genes - associated with diseases based on the evidence for the Genetic - associations and Somatic mutation data types. This effect is defined by - consequence terms from the Sequence Ontology (SO) project. + We predict the consequence of variants (germline or somatic) on genes associated with + diseases based on the evidence for the Genetic associations and Somatic mutation data types. + This effect is defined by consequence terms from the Sequence Ontology (SO) project. - The SO consequence terms, their descriptions and accession IDs are shown - in the table below. The terms are shown in decreasing order of severity - (from more severe to less severe) based on the functional score in - Koscielny et al (Supplementary Table 2). + The SO consequence terms, their descriptions and accession IDs are shown in the table below. + The terms are shown in decreasing order of severity (from more severe to less severe) based + on the functional score in Koscielny et al (Supplementary Table 2). import('./VariantsPage')); +const VariantsPage = lazy(() => import("./VariantsPage")); function VariantsWrapper() { const location = useLocation(); diff --git a/apps/platform/src/pages/VariantsPage/index.js b/apps/platform/src/pages/VariantsPage/index.js index 1dcbbb4ed..c78ebc0f2 100644 --- a/apps/platform/src/pages/VariantsPage/index.js +++ b/apps/platform/src/pages/VariantsPage/index.js @@ -1 +1 @@ -export { default } from './VariantsWrapper'; +export { default } from "./VariantsWrapper"; diff --git a/apps/platform/src/sections/diseaseSections.js b/apps/platform/src/sections/diseaseSections.js index 3d07754cf..a66294bda 100644 --- a/apps/platform/src/sections/diseaseSections.js +++ b/apps/platform/src/sections/diseaseSections.js @@ -1,14 +1,11 @@ -import { lazy } from 'react'; +import { lazy } from "react"; const diseaseSections = new Map([ - ['ontology', lazy(() => import('sections/src/disease/Ontology/Body'))], - ['knownDrugs', lazy(() => import('sections/src/disease/KnownDrugs/Body'))], - ['phenotypes', lazy(() => import('sections/src/disease/Phenotypes/Body'))], - ['otProjects', lazy(() => import('sections/src/disease/OTProjects/Body'))], - [ - 'bibliography', - lazy(() => import('sections/src/disease/Bibliography/Body')), - ], + ["ontology", lazy(() => import("sections/src/disease/Ontology/Body"))], + ["knownDrugs", lazy(() => import("sections/src/disease/KnownDrugs/Body"))], + ["phenotypes", lazy(() => import("sections/src/disease/Phenotypes/Body"))], + ["otProjects", lazy(() => import("sections/src/disease/OTProjects/Body"))], + ["bibliography", lazy(() => import("sections/src/disease/Bibliography/Body"))], ]); export default diseaseSections; diff --git a/apps/platform/src/sections/drugSections.js b/apps/platform/src/sections/drugSections.js index 329fd37f6..850df2adb 100644 --- a/apps/platform/src/sections/drugSections.js +++ b/apps/platform/src/sections/drugSections.js @@ -1,15 +1,12 @@ -import { lazy } from 'react'; +import { lazy } from "react"; const targetSections = new Map([ - ['indications', lazy(() => import('sections/src/drug/Indications/Body'))], - ['knownDrugs', lazy(() => import('sections/src/drug/KnownDrugs/Body'))], - ['drugWarnings', lazy(() => import('sections/src/drug/DrugWarnings/Body'))], - ['adverseEvents', lazy(() => import('sections/src/drug/AdverseEvents/Body'))], - ['bibliography', lazy(() => import('sections/src/drug/Bibliography/Body'))], - [ - 'mechanismsOfAction', - lazy(() => import('sections/src/drug/MechanismsOfAction/Body')), - ], + ["indications", lazy(() => import("sections/src/drug/Indications/Body"))], + ["knownDrugs", lazy(() => import("sections/src/drug/KnownDrugs/Body"))], + ["drugWarnings", lazy(() => import("sections/src/drug/DrugWarnings/Body"))], + ["adverseEvents", lazy(() => import("sections/src/drug/AdverseEvents/Body"))], + ["bibliography", lazy(() => import("sections/src/drug/Bibliography/Body"))], + ["mechanismsOfAction", lazy(() => import("sections/src/drug/MechanismsOfAction/Body"))], ]); export default targetSections; diff --git a/apps/platform/src/sections/evidenceSections.js b/apps/platform/src/sections/evidenceSections.js index 1fc935ade..73d218154 100644 --- a/apps/platform/src/sections/evidenceSections.js +++ b/apps/platform/src/sections/evidenceSections.js @@ -1,62 +1,32 @@ -import { lazy } from 'react'; +import { lazy } from "react"; const evidenceSections = new Map([ - ['chembl', lazy(() => import('sections/src/evidence/Chembl/Body'))], - ['clingen', lazy(() => import('sections/src/evidence/ClinGen/Body'))], - ['crispr', lazy(() => import('sections/src/evidence/CRISPR/Body'))], - ['impc', lazy(() => import('sections/src/evidence/Impc/Body'))], - ['intogen', lazy(() => import('sections/src/evidence/IntOgen/Body'))], - ['gene_burden', lazy(() => import('sections/src/evidence/GeneBurden/Body'))], - ['orphanet', lazy(() => import('sections/src/evidence/Orphanet/Body'))], - ['ot_crispr', lazy(() => import('sections/src/evidence/OTCRISPR/Body'))], - ['encore', lazy(() => import('sections/src/evidence/OTEncore/Body'))], - ['europepmc', lazy(() => import('sections/src/evidence/EuropePmc/Body'))], - ['eva', lazy(() => import('sections/src/evidence/EVA/Body'))], - ['eva_somatic', lazy(() => import('sections/src/evidence/EVASomatic/Body'))], - ['progeny', lazy(() => import('sections/src/evidence/Progeny/Body'))], - ['reactome', lazy(() => import('sections/src/evidence/Reactome/Body'))], - ['slapenrich', lazy(() => import('sections/src/evidence/SlapEnrich/Body'))], - ['sysbio', lazy(() => import('sections/src/evidence/SysBio/Body'))], - [ - 'cancer_biomarkers', - lazy(() => import('sections/src/evidence/CancerBiomarkers/Body')), - ], - [ - 'cancer_gene_census', - lazy(() => import('sections/src/evidence/CancerGeneCensus/Body')), - ], - [ - 'crispr_screen', - lazy(() => import('sections/src/evidence/CRISPRScreen/Body')), - ], - [ - 'expression_atlas', - lazy(() => import('sections/src/evidence/ExpressionAtlas/Body')), - ], - [ - 'gene2phenotype', - lazy(() => import('sections/src/evidence/Gene2Phenotype/Body')), - ], - [ - 'genomics_england', - lazy(() => import('sections/src/evidence/GenomicsEngland/Body')), - ], - [ - 'ot_genetics_portal', - lazy(() => import('sections/src/evidence/OTGenetics/Body')), - ], - [ - 'ot_crispr_validation', - lazy(() => import('sections/src/evidence/OTValidation/Body')), - ], - [ - 'uniprot_literature', - lazy(() => import('sections/src/evidence/UniProtLiterature/Body')), - ], - [ - 'uniprot_variants', - lazy(() => import('sections/src/evidence/UniProtVariants/Body')), - ], + ["chembl", lazy(() => import("sections/src/evidence/Chembl/Body"))], + ["clingen", lazy(() => import("sections/src/evidence/ClinGen/Body"))], + ["crispr", lazy(() => import("sections/src/evidence/CRISPR/Body"))], + ["impc", lazy(() => import("sections/src/evidence/Impc/Body"))], + ["intogen", lazy(() => import("sections/src/evidence/IntOgen/Body"))], + ["gene_burden", lazy(() => import("sections/src/evidence/GeneBurden/Body"))], + ["orphanet", lazy(() => import("sections/src/evidence/Orphanet/Body"))], + ["ot_crispr", lazy(() => import("sections/src/evidence/OTCRISPR/Body"))], + ["encore", lazy(() => import("sections/src/evidence/OTEncore/Body"))], + ["europepmc", lazy(() => import("sections/src/evidence/EuropePmc/Body"))], + ["eva", lazy(() => import("sections/src/evidence/EVA/Body"))], + ["eva_somatic", lazy(() => import("sections/src/evidence/EVASomatic/Body"))], + ["progeny", lazy(() => import("sections/src/evidence/Progeny/Body"))], + ["reactome", lazy(() => import("sections/src/evidence/Reactome/Body"))], + ["slapenrich", lazy(() => import("sections/src/evidence/SlapEnrich/Body"))], + ["sysbio", lazy(() => import("sections/src/evidence/SysBio/Body"))], + ["cancer_biomarkers", lazy(() => import("sections/src/evidence/CancerBiomarkers/Body"))], + ["cancer_gene_census", lazy(() => import("sections/src/evidence/CancerGeneCensus/Body"))], + ["crispr_screen", lazy(() => import("sections/src/evidence/CRISPRScreen/Body"))], + ["expression_atlas", lazy(() => import("sections/src/evidence/ExpressionAtlas/Body"))], + ["gene2phenotype", lazy(() => import("sections/src/evidence/Gene2Phenotype/Body"))], + ["genomics_england", lazy(() => import("sections/src/evidence/GenomicsEngland/Body"))], + ["ot_genetics_portal", lazy(() => import("sections/src/evidence/OTGenetics/Body"))], + ["ot_crispr_validation", lazy(() => import("sections/src/evidence/OTValidation/Body"))], + ["uniprot_literature", lazy(() => import("sections/src/evidence/UniProtLiterature/Body"))], + ["uniprot_variants", lazy(() => import("sections/src/evidence/UniProtVariants/Body"))], ]); export default evidenceSections; diff --git a/apps/platform/src/utils/comparators.js b/apps/platform/src/utils/comparators.js index f6bae8cf1..d0d9e2e44 100644 --- a/apps/platform/src/utils/comparators.js +++ b/apps/platform/src/utils/comparators.js @@ -5,7 +5,7 @@ const comparatorDiseaseName = generateComparatorFromAccessor(d => d.disease.name export const generateComparatorFromAccessor = accessor => (a, b) => { const aValue = accessor(a); const bValue = accessor(b); - if(aValue > bValue) return 1; + if (aValue > bValue) return 1; if (aValue === bValue) return 0; return -1; }; @@ -15,12 +15,11 @@ export const generateComparatorFromAccessor = accessor => (a, b) => { */ export const breakpointMatch = (breakpoint, breakpointHelper) => { const breakpointMap = { xs: 0, sm: 1, md: 2, lg: 3, xl: 4 }; - const isDownComparator = breakpointHelper.includes('Down'); - const isUpComparator = breakpointHelper.includes('Up'); + const isDownComparator = breakpointHelper.includes("Down"); + const isUpComparator = breakpointHelper.includes("Up"); const breakpointIndex = breakpointMap[breakpoint]; - const breakpointHelperIndex = - breakpointMap[breakpointHelper.replace(/Down|Up|Only/g, '')]; + const breakpointHelperIndex = breakpointMap[breakpointHelper.replace(/Down|Up|Only/g, "")]; if (breakpointIndex === breakpointHelperIndex) { return true; diff --git a/apps/platform/src/utils/initLocalStorage.js b/apps/platform/src/utils/initLocalStorage.js index e6515d818..8e802633e 100644 --- a/apps/platform/src/utils/initLocalStorage.js +++ b/apps/platform/src/utils/initLocalStorage.js @@ -1,4 +1,4 @@ -import ls from 'local-storage'; +import ls from "local-storage"; const initKey = (key, defaultValue) => { if (!ls.get(key)) { @@ -11,15 +11,15 @@ const initLocalStorage = () => { // to ensure any new defaults updated correctly, // or when in development mode if ( - import.meta.env.NODE_ENV === 'development' || - import.meta.env.REACT_APP_BUILD_ID !== ls.get('buildId') + import.meta.env.NODE_ENV === "development" || + import.meta.env.REACT_APP_BUILD_ID !== ls.get("buildId") ) { ls.clear(); } // set defaults (unless keys exist, // in which case values may have altered) - initKey('buildId', import.meta.env.REACT_APP_BUILD_ID); + initKey("buildId", import.meta.env.REACT_APP_BUILD_ID); }; export default initLocalStorage; diff --git a/apps/platform/src/utils/partnerPreviewUtils.js b/apps/platform/src/utils/partnerPreviewUtils.js index e04a943ce..7855341f9 100644 --- a/apps/platform/src/utils/partnerPreviewUtils.js +++ b/apps/platform/src/utils/partnerPreviewUtils.js @@ -1,17 +1,11 @@ -import config from '../config'; +import config from "../config"; // page sections -export const isPrivateTargetSection = id => - config.profile.partnerTargetSectionIds.includes(id); -export const isPrivateDiseaseSection = id => - config.profile.partnerDiseaseSectionIds.includes(id); -export const isPrivateDrugSection = id => - config.profile.partnerDrugSectionIds.includes(id); -export const isPrivateEvidenceSection = id => - config.profile.partnerEvidenceSectionIds.includes(id); +export const isPrivateTargetSection = id => config.profile.partnerTargetSectionIds.includes(id); +export const isPrivateDiseaseSection = id => config.profile.partnerDiseaseSectionIds.includes(id); +export const isPrivateDrugSection = id => config.profile.partnerDrugSectionIds.includes(id); +export const isPrivateEvidenceSection = id => config.profile.partnerEvidenceSectionIds.includes(id); // associations -export const isPrivateDataType = id => - config.profile.partnerDataTypes.includes(id); -export const isPrivateDataSource = id => - config.profile.partnerDataSources.includes(id); +export const isPrivateDataType = id => config.profile.partnerDataTypes.includes(id); +export const isPrivateDataSource = id => config.profile.partnerDataSources.includes(id); diff --git a/apps/platform/src/utils/urls.js b/apps/platform/src/utils/urls.js index e6e5eefdc..2615731f8 100644 --- a/apps/platform/src/utils/urls.js +++ b/apps/platform/src/utils/urls.js @@ -1,4 +1,4 @@ -import config from '../config'; +import config from "../config"; export function epmcUrl(id) { return `https://europepmc.org/article/MED/${id}`; @@ -15,7 +15,7 @@ export function otgVariantUrl(id) { export function europePmcLiteratureQuery(ids) { const baseUrl = `https://www.ebi.ac.uk/europepmc/webservices/rest/search?&format=json&resultType=core&pageSize=${ids.length}&query=ext_id:`; - return encodeURI(baseUrl + ids.join(' OR ext_id:')); + return encodeURI(baseUrl + ids.join(" OR ext_id:")); } export const encodeParams = params => { @@ -25,38 +25,38 @@ export const encodeParams = params => { const encodedValue = encodeURIComponent(params[key]); formBody.push(`${encodedKey}=${encodedValue}`); }); - const encodedParams = formBody.join('&'); + const encodedParams = formBody.join("&"); return encodedParams; }; export function europePmcSearchPOSTQuery(ids) { - const baseUrl = 'https://www.ebi.ac.uk/europepmc/webservices/rest/searchPOST'; - const query = ids.join(' OR ext_id:'); + const baseUrl = "https://www.ebi.ac.uk/europepmc/webservices/rest/searchPOST"; + const query = ids.join(" OR ext_id:"); const bodyOptions = { - resultType: 'core', - format: 'json', - pageSize: '1000', + resultType: "core", + format: "json", + pageSize: "1000", query: `ext_id:${query}`, - sort: 'P_PDATE_D desc', + sort: "P_PDATE_D desc", }; const formBody = encodeParams(bodyOptions); return { baseUrl, formBody }; } export function europePmcBiblioSearchPOSTQuery(ids, size = 25) { - const baseUrl = 'https://www.ebi.ac.uk/europepmc/webservices/rest/searchPOST'; - const query = ids.join(' OR ext_id:'); + const baseUrl = "https://www.ebi.ac.uk/europepmc/webservices/rest/searchPOST"; + const query = ids.join(" OR ext_id:"); const bodyOptions = { - resultType: 'core', - format: 'json', + resultType: "core", + format: "json", pageSize: size, query: `ext_id:${query}`, }; const formBody = encodeParams(bodyOptions); const requestOptions = { - method: 'POST', + method: "POST", headers: { - 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8', + "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8", }, body: formBody, }; @@ -88,7 +88,7 @@ export const referenceUrls = { // Associations and URL PPP export const getClassicAssociationsURL = ({ baseURL }) => { - const path = 'classic-associations'; + const path = "classic-associations"; const fullURL = `${baseURL}/${path}`; return { fullURL, path }; }; diff --git a/package.json b/package.json index 633e3c79c..44338cb10 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "build:platform:ppp": "turbo run build-ppp --filter=platform", "lint": "turbo run lint", "lint:platform": "turbo run lint --filter=platform", - "format": "prettier --write \"**/*.{ts,tsx,js,jsx,md}\"", + "format": "turbo run prettier:all", "prepare": "husky install" }, "devDependencies": { diff --git a/packages/sections/package.json b/packages/sections/package.json index a218d6f5b..1f523d228 100644 --- a/packages/sections/package.json +++ b/packages/sections/package.json @@ -7,7 +7,8 @@ ], "license": "MIT", "scripts": { - "lint": "eslint \"src/**/*.{js,jsx,mjs,cjs,ts,tsx}\"" + "lint": "eslint \"src/**/*.{js,jsx,mjs,cjs,ts,tsx}\"", + "prettier:all": "prettier --write \"src/**/*.{js,jsx,mjs,cjs,ts,tsx}\"" }, "dependencies": { "@apollo/client": "^3.3.4", diff --git a/packages/sections/src/common/Bibliography/Api.jsx b/packages/sections/src/common/Bibliography/Api.jsx index e6d32972c..62e564fa5 100644 --- a/packages/sections/src/common/Bibliography/Api.jsx +++ b/packages/sections/src/common/Bibliography/Api.jsx @@ -1,30 +1,22 @@ -const linkUrl = 'https://link.opentargets.io/'; +const linkUrl = "https://link.opentargets.io/"; -const getQuery = queryItems => queryItems - .map((s) => `'${ s.key }'`) - .join(' AND '); +const getQuery = queryItems => queryItems.map(s => `'${s.key}'`).join(" AND "); -export const getAggregationsData = queryItems => fetch( - `${linkUrl }search?query=${ getQuery(queryItems) }&aggs=true&size=0` - ).then(res => res.json()); +export const getAggregationsData = queryItems => + fetch(`${linkUrl}search?query=${getQuery(queryItems)}&aggs=true&size=0`).then(res => res.json()); export const getPublicationsData = (queryItems, after, afterId) => { - const query = - `${linkUrl - }search?query=${ - getQuery(queryItems) - }${after && afterId - ? `&search_after=${ after }&search_after_id=${ afterId}` - : ''}`; + const query = `${linkUrl}search?query=${getQuery(queryItems)}${ + after && afterId ? `&search_after=${after}&search_after_id=${afterId}` : "" + }`; return fetch(query).then(res => res.json()); }; -export const getStats = queryItems => fetch( - `${linkUrl }search?query=${ getQuery(queryItems) }&size=0` - ).then(res => res.json()); +export const getStats = queryItems => + fetch(`${linkUrl}search?query=${getQuery(queryItems)}&size=0`).then(res => res.json()); -export const getPublicationAbstract = pmId => fetch(`${linkUrl }entity/markedtext/${ pmId}`).then(res => res.json()); +export const getPublicationAbstract = pmId => + fetch(`${linkUrl}entity/markedtext/${pmId}`).then(res => res.json()); -export const getSimilarPublications = pmId => fetch(`${linkUrl }document-more-like-this/${ pmId}`).then(res => - res.json() - ); +export const getSimilarPublications = pmId => + fetch(`${linkUrl}document-more-like-this/${pmId}`).then(res => res.json()); diff --git a/packages/sections/src/common/Bibliography/BibliographyDetailPanel.jsx b/packages/sections/src/common/Bibliography/BibliographyDetailPanel.jsx index 88cf2dbcf..9e7e6e9db 100644 --- a/packages/sections/src/common/Bibliography/BibliographyDetailPanel.jsx +++ b/packages/sections/src/common/Bibliography/BibliographyDetailPanel.jsx @@ -1,6 +1,6 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ detailPanel: { background: `${theme.palette.grey[100]}`, marginTop: "10px", diff --git a/packages/sections/src/common/Bibliography/BibliographyHtmlText.jsx b/packages/sections/src/common/Bibliography/BibliographyHtmlText.jsx index f8805f370..4e6e39559 100644 --- a/packages/sections/src/common/Bibliography/BibliographyHtmlText.jsx +++ b/packages/sections/src/common/Bibliography/BibliographyHtmlText.jsx @@ -1,9 +1,7 @@ import { Typography } from "@mui/material"; function BibliographyHtmlText({ text }) { - return ( - - ); + return ; } export default BibliographyHtmlText; diff --git a/packages/sections/src/common/Bibliography/Body.jsx b/packages/sections/src/common/Bibliography/Body.jsx index 7494e2b77..9c3bd062f 100644 --- a/packages/sections/src/common/Bibliography/Body.jsx +++ b/packages/sections/src/common/Bibliography/Body.jsx @@ -1,14 +1,6 @@ import { Component } from "react"; import { v1 } from "uuid"; -import { - Autocomplete, - Box, - Button, - Chip, - Grid, - TextField, - Typography, -} from "@mui/material"; +import { Autocomplete, Box, Button, Chip, Grid, TextField, Typography } from "@mui/material"; import { withStyles } from "@mui/styles"; // TODO: note this component is not actually used. // Only SimplePublication is used in evidence bibliography @@ -30,7 +22,7 @@ const aggtype = [ // {value: 'pub_date_histogram', label: 'publication date'} ]; -const styles = (theme) => ({ +const styles = theme => ({ aggtypeAutocomplete: { width: "15rem", "& .MuiFormControl-root": { marginTop: 0 }, @@ -101,14 +93,14 @@ class Section extends Component { // Parse the aggregation data based on defined aggtypes // and filter out all entries that are already selected - filterAggregations = (aggs) => { + filterAggregations = aggs => { const { selected } = this.state; return aggtype.reduce((newaggs, agg) => { const newAggregationObject = { ...newaggs }; newAggregationObject[agg.value] = { buckets: aggs[agg.value].buckets.filter( - (b) => - selected.filter((a) => { + b => + selected.filter(a => { const selectedNewAggregationObject = a; selectedNewAggregationObject.label = a.label || a.key; return ( @@ -128,7 +120,7 @@ class Section extends Component { getAggregations = () => { const { selected } = this.state; getAggregationsData(selected).then( - (resp) => { + resp => { if (this.mounted) { this.setState({ bibliographyCount: resp.hits.total, @@ -149,7 +141,7 @@ class Section extends Component { }; // Get the data for the publications - getPublications = (append) => { + getPublications = append => { this.setState({ isLoading: true }); const { hits } = this.state; const last = hits[hits.length - 1]; @@ -158,11 +150,10 @@ class Section extends Component { const { selected } = this.state; getPublicationsData(selected, after, afterId).then( - (resp) => { + resp => { const { state: stateHits } = this.state; // if loading more data (after & afterId) append that, if not just reset hits - const newHits = - after && afterId ? stateHits.concat(resp.hits.hits) : resp.hits.hits; + const newHits = after && afterId ? stateHits.concat(resp.hits.hits) : resp.hits.hits; if (this.mounted) { this.setState({ hits: newHits, isLoading: false }); } @@ -176,7 +167,7 @@ class Section extends Component { }; // Handler for when a chip is deselected - deselectChip = (index) => { + deselectChip = index => { const { selected } = this.state; if (index < selected.length) { this.setState({ selected: selected.filter((sel, i) => i !== index) }); @@ -184,7 +175,7 @@ class Section extends Component { }; // Handler for when a chip is selected - selectChip = (chip) => { + selectChip = chip => { const { selected } = this.state; const newSelected = selected.concat([chip]); this.setState({ selected: newSelected }); @@ -233,11 +224,11 @@ class Section extends Component { option.label} - getOptionSelected={(option) => option.value} + getOptionLabel={option => option.label} + getOptionSelected={option => option.value} onChange={this.aggtypeFilterHandler} options={aggtype} - renderInput={(params) => ( + renderInput={params => ( // eslint-disable-next-line )} @@ -266,17 +257,15 @@ class Section extends Component { {aggregations[selectedAggregation.value] - ? aggregations[selectedAggregation.value].buckets.map( - (agg, i) => ( - this.selectChip(agg)} - className={classes.chip} - /> - ) - ) + ? aggregations[selectedAggregation.value].buckets.map((agg, i) => ( + this.selectChip(agg)} + className={classes.chip} + /> + )) : null} @@ -284,8 +273,7 @@ class Section extends Component { {/* Total result */} - Showing {Math.min(hits.length, bibliographyCount)} of{" "} - {bibliographyCount} results + Showing {Math.min(hits.length, bibliographyCount)} of {bibliographyCount} results {/* Publications */} @@ -302,7 +290,7 @@ class Section extends Component { pmId={hitItem._source.pub_id} title={hitItem._source.title} authors={ - (hitItem._source.authors || []).map((a) => ({ + (hitItem._source.authors || []).map(a => ({ lastName: a.LastName, initials: a.Initials, })) || [] diff --git a/packages/sections/src/common/Bibliography/Description.jsx b/packages/sections/src/common/Bibliography/Description.jsx index e181e37f7..a0cddc47b 100644 --- a/packages/sections/src/common/Bibliography/Description.jsx +++ b/packages/sections/src/common/Bibliography/Description.jsx @@ -3,8 +3,8 @@ import { Link } from "ui"; function Description({ label }) { return ( <> - Scientific literature related to {label} based on text - mining PubMed abstracts. Source:{" "} + Scientific literature related to {label} based on text mining PubMed + abstracts. Source:{" "} Open Targets diff --git a/packages/sections/src/common/Bibliography/Publication.jsx b/packages/sections/src/common/Bibliography/Publication.jsx index 27ee0e07e..b7d2d9750 100644 --- a/packages/sections/src/common/Bibliography/Publication.jsx +++ b/packages/sections/src/common/Bibliography/Publication.jsx @@ -64,14 +64,14 @@ class Publication extends Component { alignItems="stretch" spacing={2} > - {similar.map((hit) => ( + {similar.map(hit => ( ({ + (hit._source.authors || []).map(a => ({ lastName: a.LastName, initials: a.Initials, })) || [] @@ -93,7 +93,7 @@ class Publication extends Component { getAbstract = () => { const { pmId } = this.props; getPublicationAbstract(pmId).then( - (resp) => { + resp => { this.setState({ abstract: resp.abstract, }); @@ -110,7 +110,7 @@ class Publication extends Component { getSimilar = () => { const { pmId } = this.props; getSimilarPublications(pmId).then( - (resp) => { + resp => { this.setState({ similar: resp.hits.hits, }); @@ -130,12 +130,7 @@ class Publication extends Component { return ( <> {/* Publication basic details */} - + {/* Show more details */}
@@ -155,12 +150,7 @@ class Publication extends Component { ) : ( <> - {" "} diff --git a/packages/sections/src/common/Bibliography/SimplePublication.jsx b/packages/sections/src/common/Bibliography/SimplePublication.jsx index d37c78f9d..72f4cae78 100644 --- a/packages/sections/src/common/Bibliography/SimplePublication.jsx +++ b/packages/sections/src/common/Bibliography/SimplePublication.jsx @@ -55,15 +55,9 @@ function SimplePublication({ {/* paper data */} {/* authors */} - + {authors - .map( - (author) => - author.lastName + (author.initials ? ` ${author.initials}` : "") - ) + .map(author => author.lastName + (author.initials ? ` ${author.initials}` : "")) .join(", ")} diff --git a/packages/sections/src/common/Bibliography/Summary.jsx b/packages/sections/src/common/Bibliography/Summary.jsx index f87b32086..f012e08f9 100644 --- a/packages/sections/src/common/Bibliography/Summary.jsx +++ b/packages/sections/src/common/Bibliography/Summary.jsx @@ -10,12 +10,12 @@ function Summary({ definition, id }) { let isCurrent = true; getStats([{ key: id }]).then( - (res) => { + res => { if (isCurrent) { setRequest({ loading: false, data: { count: res.hits.total } }); } }, - (err) => { + err => { if (isCurrent) { setRequest({ loading: false, error: err }); } @@ -31,7 +31,7 @@ function Summary({ definition, id }) { ( + renderSummary={data => ( <> {data.count.toLocaleString()} publication {data.count === 1 ? "" : "s"} diff --git a/packages/sections/src/common/Bibliography/index.js b/packages/sections/src/common/Bibliography/index.js index 83f1728a0..61ef27e2f 100644 --- a/packages/sections/src/common/Bibliography/index.js +++ b/packages/sections/src/common/Bibliography/index.js @@ -1,10 +1,10 @@ export const definition = { - id: 'bibliography', - name: 'Bibliography', - shortName: 'B', + id: "bibliography", + name: "Bibliography", + shortName: "B", hasData: data => data.count > 0, external: true, }; -export { default as Summary } from './Summary'; -export { default as Body } from './Body'; +export { default as Summary } from "./Summary"; +export { default as Body } from "./Body"; diff --git a/packages/sections/src/common/KnownDrugs/Body.jsx b/packages/sections/src/common/KnownDrugs/Body.jsx index 1e16f7e50..67f066b8a 100644 --- a/packages/sections/src/common/KnownDrugs/Body.jsx +++ b/packages/sections/src/common/KnownDrugs/Body.jsx @@ -1,12 +1,6 @@ import { useState, useEffect } from "react"; -import { - Link, - Table, - getPage, - getComparator, - useCursorBatchDownloader, -} from "ui"; +import { Link, Table, getPage, getComparator, useCursorBatchDownloader } from "ui"; import { naLabel, phaseMap } from "../../constants"; import { sentenceCase } from "../../utils/global"; import SourceDrawer from "./SourceDrawer"; @@ -26,13 +20,13 @@ function getColumnPool(id, entity) { }, { id: "status", - renderCell: (d) => (d.status ? d.status : naLabel), + renderCell: d => (d.status ? d.status : naLabel), }, { id: "sources", label: "Source", - exportValue: (d) => d.urls.map((reference) => reference.url), - renderCell: (d) => , + exportValue: d => d.urls.map(reference => reference.url), + renderCell: d => , }, ], }, @@ -42,9 +36,7 @@ function getColumnPool(id, entity) { { id: "disease", propertyPath: "disease.id", - renderCell: (d) => ( - {d.disease.name} - ), + renderCell: d => {d.disease.name}, }, ], }, @@ -54,17 +46,13 @@ function getColumnPool(id, entity) { { id: "drug", propertyPath: "drug.id", - renderCell: (d) => - d.drug ? ( - {d.drug.name} - ) : ( - naLabel - ), + renderCell: d => + d.drug ? {d.drug.name} : naLabel, }, { id: "type", propertyPath: "drugType", - renderCell: (d) => d.drugType, + renderCell: d => d.drugType, }, { id: "mechanismOfAction", @@ -77,8 +65,8 @@ function getColumnPool(id, entity) { const targetId = entity === "target" ? id : target.id; - mechanismsOfAction.rows.forEach((row) => { - row.targets.forEach((t) => { + mechanismsOfAction.rows.forEach(row => { + row.targets.forEach(t => { if (t.id === targetId) { at.add(row.actionType); } @@ -95,7 +83,7 @@ function getColumnPool(id, entity) { listStyle: "none", }} > - {actionTypes.map((actionType) => ( + {actionTypes.map(actionType => (
  • {sentenceCase(actionType)}
    • ))} @@ -113,16 +101,14 @@ function getColumnPool(id, entity) { id: "targetSymbol", label: "Symbol", propertyPath: "target.approvedSymbol", - renderCell: (d) => ( - {d.target.approvedSymbol} - ), + renderCell: d => {d.target.approvedSymbol}, }, { id: "targetName", label: "Name", propertyPath: "target.approvedName", hidden: ["lgDown"], - renderCell: (d) => d.target.approvedName, + renderCell: d => d.target.approvedName, }, ], }, @@ -157,16 +143,16 @@ function Body({ const columnPool = getColumnPool(id, entity); const columns = []; - columnsToShow.forEach((columnGroupName) => { + columnsToShow.forEach(columnGroupName => { columns.push( - ...columnPool[columnGroupName].columns.map((column) => + ...columnPool[columnGroupName].columns.map(column => column.id === stickyColumn ? { ...column, sticky: true } : column ) ); }); const headerGroups = [ - ...columnsToShow.map((columnGroupName) => ({ + ...columnsToShow.map(columnGroupName => ({ colspan: columnPool[columnGroupName].columns.length, label: columnPool[columnGroupName].label, })), @@ -187,14 +173,10 @@ function Body({ () => { let isCurrent = true; - fetchDrugs(variables, null, pageSize).then((res) => { + fetchDrugs(variables, null, pageSize).then(res => { setInitialLoading(false); if (res.data[entity].knownDrugs && isCurrent) { - const { - cursor: newCursor, - count: newCount, - rows: newRows, - } = res.data[entity].knownDrugs; + const { cursor: newCursor, count: newCount, rows: newRows } = res.data[entity].knownDrugs; setCursor(newCursor); setCount(newCount); setRows(newRows); @@ -215,13 +197,12 @@ function Body({ `data[${entity}].knownDrugs` ); - const handlePageChange = (newPage) => { + const handlePageChange = newPage => { const numNewPageSize = parseInt(newPage, 10); if (pageSize * numNewPageSize + pageSize > rows.length && cursor !== null) { setLoading(true); - fetchDrugs(variables, cursor, pageSize, globalFilter).then((res) => { - const { cursor: newCursor, rows: newRows } = - res.data[entity].knownDrugs; + fetchDrugs(variables, cursor, pageSize, globalFilter).then(res => { + const { cursor: newCursor, rows: newRows } = res.data[entity].knownDrugs; setCursor(newCursor); setPage(numNewPageSize); setRows([...rows, ...newRows]); @@ -232,30 +213,27 @@ function Body({ } }; - const handleRowsPerPageChange = (newPageSize) => { + const handleRowsPerPageChange = newPageSize => { const numNewPageSize = parseInt(newPageSize, 10); if (numNewPageSize > rows.length && cursor !== null) { setLoading(true); - fetchDrugs(variables, cursor, numNewPageSize, globalFilter).then( - (res) => { - const { cursor: newCursor, rows: newRows } = - res.data[entity].knownDrugs; - setCursor(newCursor); - setPage(0); - setPageSize(numNewPageSize); - setRows([...rows, ...newRows]); - setLoading(false); - } - ); + fetchDrugs(variables, cursor, numNewPageSize, globalFilter).then(res => { + const { cursor: newCursor, rows: newRows } = res.data[entity].knownDrugs; + setCursor(newCursor); + setPage(0); + setPageSize(numNewPageSize); + setRows([...rows, ...newRows]); + setLoading(false); + }); } else { setPage(0); setPageSize(numNewPageSize); } }; - const handleGlobalFilterChange = (newGlobalFilter) => { + const handleGlobalFilterChange = newGlobalFilter => { setLoading(true); - fetchDrugs(variables, null, pageSize, newGlobalFilter).then((res) => { + fetchDrugs(variables, null, pageSize, newGlobalFilter).then(res => { const { cursor: newCursor, count: newCount, @@ -270,7 +248,7 @@ function Body({ }); }; - const handleSortBy = (sortBy) => { + const handleSortBy = sortBy => { setSortColumn(sortBy); setSortOrder( // eslint-disable-next-line diff --git a/packages/sections/src/common/KnownDrugs/SourceDrawer.jsx b/packages/sections/src/common/KnownDrugs/SourceDrawer.jsx index 39fa8ee0b..40dde7186 100644 --- a/packages/sections/src/common/KnownDrugs/SourceDrawer.jsx +++ b/packages/sections/src/common/KnownDrugs/SourceDrawer.jsx @@ -19,7 +19,7 @@ import _ from "lodash"; import { Link } from "ui"; -const sourceDrawerStyles = makeStyles((theme) => ({ +const sourceDrawerStyles = makeStyles(theme => ({ drawerLink: { cursor: "pointer", }, @@ -69,7 +69,7 @@ const sourceDrawerStyles = makeStyles((theme) => ({ }, })); -const tableSourceLabel = (name) => +const tableSourceLabel = name => ({ ATC: "ATC", ClinicalTrials: "ClinicalTrials.gov", @@ -111,11 +111,8 @@ function SourceDrawer({ references }) { const groupedReferences = _.groupBy(references, "name"); - const toggleDrawer = (event) => { - if ( - event.type === "keydown" && - (event.key === "Tab" || event.key === "Shift") - ) { + const toggleDrawer = event => { + if (event.type === "keydown" && (event.key === "Tab" || event.key === "Shift")) { return; } @@ -130,9 +127,7 @@ function SourceDrawer({ references }) { <> - - Records - + Records @@ -140,7 +135,7 @@ function SourceDrawer({ references }) { - {Object.keys(groupedReferences).map((group) => ( + {Object.keys(groupedReferences).map(group => ( - } - > + }> {tableSourceLabel(group)} @@ -167,7 +159,7 @@ function SourceDrawer({ references }) { - {groupedReferences[group].map((item) => ( + {groupedReferences[group].map(item => ( {drawerSourceLabel(item.name, item.url)} @@ -184,11 +176,7 @@ function SourceDrawer({ references }) { return ( <> - + {references.length} references diff --git a/packages/sections/src/common/KnownDrugs/index.js b/packages/sections/src/common/KnownDrugs/index.js index c9cdd2af6..15b1fb2bb 100644 --- a/packages/sections/src/common/KnownDrugs/index.js +++ b/packages/sections/src/common/KnownDrugs/index.js @@ -1 +1 @@ -export { default as Body } from './Body'; +export { default as Body } from "./Body"; diff --git a/packages/sections/src/common/Literature/Description.jsx b/packages/sections/src/common/Literature/Description.jsx index 27ae6c450..afd67b955 100644 --- a/packages/sections/src/common/Literature/Description.jsx +++ b/packages/sections/src/common/Literature/Description.jsx @@ -5,8 +5,8 @@ const url = "http://platform-docs.opentargets.org/bibliography"; function Description({ name }) { return ( <> - Scientific literature mentioning NLP-recognised entity{" "} - {name} and other selected co-occurring entities. Source:{" "} + Scientific literature mentioning NLP-recognised entity {name} and other + selected co-occurring entities. Source:{" "} Open Targets diff --git a/packages/sections/src/common/Literature/Entities.jsx b/packages/sections/src/common/Literature/Entities.jsx index 5f8e0e836..b0bec3b96 100644 --- a/packages/sections/src/common/Literature/Entities.jsx +++ b/packages/sections/src/common/Literature/Entities.jsx @@ -10,7 +10,7 @@ import { updateLiteratureState, } from "./atoms"; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ root: { display: "flex", flexWrap: "wrap", @@ -28,19 +28,11 @@ function EntitiesToSelect({ id }) { const entities = useRecoilValue(entitiesState); const bibliographyState = useRecoilValue(literatureState); const setLiteratureUpdate = useSetRecoilState(updateLiteratureState); - const [selectedChips, setSelectedChips] = useRecoilState( - selectedEntitiesState - ); - const [loadingEntities, setLoadingEntities] = - useRecoilState(loadingEntitiesState); + const [selectedChips, setSelectedChips] = useRecoilState(selectedEntitiesState); + const [loadingEntities, setLoadingEntities] = useRecoilState(loadingEntitiesState); - const handleSelectChip = async (e) => { - const { - query, - id: bibliographyId, - category, - globalEntity, - } = bibliographyState; + const handleSelectChip = async e => { + const { query, id: bibliographyId, category, globalEntity } = bibliographyState; const newChips = [ ...selectedChips, { @@ -75,14 +67,13 @@ function EntitiesToSelect({ id }) { setLiteratureUpdate(update); }; - const validateEntity = (entity) => { + const validateEntity = entity => { if (id === entity.object?.id) return null; - if (selectedChips.find((s) => s.object.id === entity.object.id)) - return null; + if (selectedChips.find(s => s.object.id === entity.object.id)) return null; return entity; }; - return entities.map((e) => { + return entities.map(e => { if (!e.object) return ( @@ -120,23 +111,12 @@ export default function Entities({ name, id }) { const setLiteratureUpdate = useSetRecoilState(updateLiteratureState); const bibliographyState = useRecoilValue(literatureState); - const [loadingEntities, setLoadingEntities] = - useRecoilState(loadingEntitiesState); - const [selectedChips, setSelectedChips] = useRecoilState( - selectedEntitiesState - ); + const [loadingEntities, setLoadingEntities] = useRecoilState(loadingEntitiesState); + const [selectedChips, setSelectedChips] = useRecoilState(selectedEntitiesState); - const handleDeleteChip = async (index) => { - const { - query, - id: bibliographyId, - category, - globalEntity, - } = bibliographyState; - const newChips = [ - ...selectedChips.slice(0, index), - ...selectedChips.slice(index + 1), - ]; + const handleDeleteChip = async index => { + const { query, id: bibliographyId, category, globalEntity } = bibliographyState; + const newChips = [...selectedChips.slice(0, index), ...selectedChips.slice(index + 1)]; setSelectedChips(newChips); setLoadingEntities(true); const request = await fetchSimilarEntities({ diff --git a/packages/sections/src/common/Literature/Loader.jsx b/packages/sections/src/common/Literature/Loader.jsx index 15797171c..435a04263 100644 --- a/packages/sections/src/common/Literature/Loader.jsx +++ b/packages/sections/src/common/Literature/Loader.jsx @@ -29,9 +29,7 @@ function Loader({ message = "", pageSize = 5 }) { > - - {message} - + {message} ); diff --git a/packages/sections/src/common/Literature/PublicationsList.jsx b/packages/sections/src/common/Literature/PublicationsList.jsx index 20653e5a2..fd2b24102 100644 --- a/packages/sections/src/common/Literature/PublicationsList.jsx +++ b/packages/sections/src/common/Literature/PublicationsList.jsx @@ -1,10 +1,5 @@ import { useEffect } from "react"; -import { - useRecoilState, - useRecoilValue, - useSetRecoilState, - useRecoilCallback, -} from "recoil"; +import { useRecoilState, useRecoilValue, useSetRecoilState, useRecoilCallback } from "recoil"; import { Box, Grid, Fade, Skeleton } from "@mui/material"; import { makeStyles } from "@mui/styles"; import { PublicationWrapper, Table } from "ui"; @@ -55,8 +50,7 @@ function SkeletonRow() { function PublicationsList({ hideSearch = false }) { const classes = useStyles(); const lits = useRecoilValue(litsIdsState); - const [loadingEntities, setLoadingEntities] = - useRecoilState(loadingEntitiesState); + const [loadingEntities, setLoadingEntities] = useRecoilState(loadingEntitiesState); const count = useRecoilValue(litsCountState); const cursor = useRecoilValue(litsCursorState); const displayedPubs = useRecoilValue(displayedPublications); @@ -66,36 +60,29 @@ function PublicationsList({ hideSearch = false }) { const pageSize = useRecoilValue(tablePageSizeState); // function to request 'ready' literatures ids - const syncLiteraturesState = useRecoilCallback( - ({ snapshot, set }) => - async () => { - const AllLits = await snapshot.getPromise(litsIdsState); - const readyForRequest = AllLits.filter((x) => x.status === "ready").map( - (x) => x.id - ); + const syncLiteraturesState = useRecoilCallback(({ snapshot, set }) => async () => { + const AllLits = await snapshot.getPromise(litsIdsState); + const readyForRequest = AllLits.filter(x => x.status === "ready").map(x => x.id); + + if (readyForRequest.length === 0) return; + const queryResult = await snapshot.getPromise( + literaturesEuropePMCQuery({ + literaturesIds: readyForRequest, + }) + ); - if (readyForRequest.length === 0) return; - const queryResult = await snapshot.getPromise( - literaturesEuropePMCQuery({ - literaturesIds: readyForRequest, - }) - ); + const parsedPublications = parsePublications(queryResult); - const parsedPublications = parsePublications(queryResult); + const mapedResults = new Map(parsedPublications.map(key => [key.europePmcId, key])); - const mapedResults = new Map( - parsedPublications.map((key) => [key.europePmcId, key]) - ); - - const updatedPublications = AllLits.map((x) => { - const publication = mapedResults.get(x.id); - if (x.status === "loaded") return x; - const status = publication ? "loaded" : "missing"; - return { ...x, status, publication }; - }); - set(litsIdsState, updatedPublications); - } - ); + const updatedPublications = AllLits.map(x => { + const publication = mapedResults.get(x.id); + if (x.status === "loaded") return x; + const status = publication ? "loaded" : "missing"; + return { ...x, status, publication }; + }); + set(litsIdsState, updatedPublications); + }); useEffect( () => { @@ -105,89 +92,83 @@ function PublicationsList({ hideSearch = false }) { [lits] ); - const handleRowsPerPageChange = useRecoilCallback( - ({ snapshot }) => - async (newPageSize) => { - const pageSizeInt = Number(newPageSize); - const expected = pageSizeInt * page + pageSizeInt; - if (expected > lits.length && cursor !== null) { - const { - query, - id, - category, - selectedEntities, - cursor: newCursor, - globalEntity, - } = bibliographyState; - setLoadingEntities(true); - const request = await fetchSimilarEntities({ - query, - id, - category, - entities: selectedEntities, - cursor: newCursor, - }); - setLoadingEntities(false); - const data = request.data[globalEntity]; - const loadedPublications = await snapshot.getPromise(litsIdsState); - const newLits = data.literatureOcurrences?.rows?.map(({ pmid }) => ({ - id: pmid, - status: "ready", - publication: null, - })); - const update = { - litsIds: [...loadedPublications, ...newLits], - cursor: data.literatureOcurrences?.cursor, - page: 0, - pageSize: pageSizeInt, - }; - setLiteratureUpdate(update); - } else { - setLiteratureUpdate({ pageSize: pageSizeInt }); - } - } - ); - - const handlePageChange = useRecoilCallback( - ({ snapshot }) => - async (newPage) => { - const newPageInt = Number(newPage); - if (pageSize * newPageInt + pageSize > lits.length && cursor !== null) { - const { - query, - id, - category, - selectedEntities, - cursor: newCursor, - globalEntity, - } = bibliographyState; - setLoadingEntities(true); - const request = await fetchSimilarEntities({ - query, - id, - category, - entities: selectedEntities, - cursor: newCursor, - }); - setLoadingEntities(false); - const data = request.data[globalEntity]; - const loadedPublications = await snapshot.getPromise(litsIdsState); - const newLits = data.literatureOcurrences?.rows?.map(({ pmid }) => ({ - id: pmid, - status: "ready", - publication: null, - })); - const update = { - litsIds: [...loadedPublications, ...newLits], - cursor: data.literatureOcurrences?.cursor, - page: newPageInt, - }; - setLiteratureUpdate(update); - } else { - setLiteratureUpdate({ page: newPageInt }); - } - } - ); + const handleRowsPerPageChange = useRecoilCallback(({ snapshot }) => async newPageSize => { + const pageSizeInt = Number(newPageSize); + const expected = pageSizeInt * page + pageSizeInt; + if (expected > lits.length && cursor !== null) { + const { + query, + id, + category, + selectedEntities, + cursor: newCursor, + globalEntity, + } = bibliographyState; + setLoadingEntities(true); + const request = await fetchSimilarEntities({ + query, + id, + category, + entities: selectedEntities, + cursor: newCursor, + }); + setLoadingEntities(false); + const data = request.data[globalEntity]; + const loadedPublications = await snapshot.getPromise(litsIdsState); + const newLits = data.literatureOcurrences?.rows?.map(({ pmid }) => ({ + id: pmid, + status: "ready", + publication: null, + })); + const update = { + litsIds: [...loadedPublications, ...newLits], + cursor: data.literatureOcurrences?.cursor, + page: 0, + pageSize: pageSizeInt, + }; + setLiteratureUpdate(update); + } else { + setLiteratureUpdate({ pageSize: pageSizeInt }); + } + }); + + const handlePageChange = useRecoilCallback(({ snapshot }) => async newPage => { + const newPageInt = Number(newPage); + if (pageSize * newPageInt + pageSize > lits.length && cursor !== null) { + const { + query, + id, + category, + selectedEntities, + cursor: newCursor, + globalEntity, + } = bibliographyState; + setLoadingEntities(true); + const request = await fetchSimilarEntities({ + query, + id, + category, + entities: selectedEntities, + cursor: newCursor, + }); + setLoadingEntities(false); + const data = request.data[globalEntity]; + const loadedPublications = await snapshot.getPromise(litsIdsState); + const newLits = data.literatureOcurrences?.rows?.map(({ pmid }) => ({ + id: pmid, + status: "ready", + publication: null, + })); + const update = { + litsIds: [...loadedPublications, ...newLits], + cursor: data.literatureOcurrences?.cursor, + page: newPageInt, + }; + setLiteratureUpdate(update); + } else { + setLiteratureUpdate({ page: newPageInt }); + } + }); const columns = [ { @@ -212,9 +193,7 @@ function PublicationsList({ hideSearch = false }) { ); }, filterValue: ({ row: publication }) => - `${publication.journal.journal?.title} ${publication?.title} ${ - publication?.year - } + `${publication.journal.journal?.title} ${publication?.title} ${publication?.year} ${publication.authors .reduce((acc, author) => { if (author.fullName) acc.push(author.fullName); @@ -225,12 +204,7 @@ function PublicationsList({ hideSearch = false }) { ]; if (loadingEntities) - return ( - - ); + return ; return ( + renderSummary={data => data.similarEntities?.length > 0 ? <>Data available : <>no data } /> diff --git a/packages/sections/src/common/Literature/TimeTravelObserver.jsx b/packages/sections/src/common/Literature/TimeTravelObserver.jsx index b4f439daf..00843e92e 100644 --- a/packages/sections/src/common/Literature/TimeTravelObserver.jsx +++ b/packages/sections/src/common/Literature/TimeTravelObserver.jsx @@ -1,12 +1,5 @@ import { useState, useEffect } from "react"; -import { - List, - ListItem, - Drawer, - Box, - Link as MUILink, - Button, -} from "@mui/material"; +import { List, ListItem, Drawer, Box, Link as MUILink, Button } from "@mui/material"; import { useRecoilSnapshot, useGotoRecoilSnapshot } from "recoil"; export default function TimeTravelObserver() { @@ -15,11 +8,8 @@ export default function TimeTravelObserver() { const snapshot = useRecoilSnapshot(); - const toggleDrawer = (event) => { - if ( - event.type === "keydown" && - (event.key === "Tab" || event.key === "Shift") - ) { + const toggleDrawer = event => { + if (event.type === "keydown" && (event.key === "Tab" || event.key === "Shift")) { return; } @@ -32,7 +22,7 @@ export default function TimeTravelObserver() { useEffect( () => { - if (snapshots.every((s) => s.getID() !== snapshot.getID())) { + if (snapshots.every(s => s.getID() !== snapshot.getID())) { setSnapshots([...snapshots, snapshot]); } }, @@ -51,9 +41,7 @@ export default function TimeTravelObserver() { {snapshots.map((snapshotItem, i) => ( Snapshot {i} - + ))} diff --git a/packages/sections/src/common/Literature/index.js b/packages/sections/src/common/Literature/index.js index 109df5f36..fa2dac1d5 100644 --- a/packages/sections/src/common/Literature/index.js +++ b/packages/sections/src/common/Literature/index.js @@ -1,9 +1,9 @@ export const definition = { - id: 'bibliography1', - name: 'Bibliography', - shortName: 'B', + id: "bibliography1", + name: "Bibliography", + shortName: "B", hasData: data => (data.similarEntities?.length || 0) > 0, }; -export { default as Summary } from './Summary'; -export { default as Body } from './Body'; +export { default as Summary } from "./Summary"; +export { default as Body } from "./Body"; diff --git a/packages/sections/src/config.js b/packages/sections/src/config.js index 678d426c3..2848d3c7b 100644 --- a/packages/sections/src/config.js +++ b/packages/sections/src/config.js @@ -9,8 +9,7 @@ const config = { googleTagManagerID: window.configGoogleTagManagerID ?? null, efoURL: window.configEFOURL ?? "/data/ontology/efo_json/diseases_efo.jsonl", downloadsURL: window.configDownloadsURL ?? "/data/downloads.json", - geneticsPortalUrl: - window.configGeneticsPortalUrl ?? "https://genetics.opentargets.org", + geneticsPortalUrl: window.configGeneticsPortalUrl ?? "https://genetics.opentargets.org", }; export default config; diff --git a/packages/sections/src/dataTypes.js b/packages/sections/src/dataTypes.js index 722768214..52353697e 100644 --- a/packages/sections/src/dataTypes.js +++ b/packages/sections/src/dataTypes.js @@ -1,50 +1,50 @@ -import { isPrivateDataType } from './utils/partnerPreviewUtils'; +import { isPrivateDataType } from "./utils/partnerPreviewUtils"; const dataTypes = [ { - id: 'genetic_association', - label: 'Genetic associations', - isPrivate: isPrivateDataType('genetic_association'), + id: "genetic_association", + label: "Genetic associations", + isPrivate: isPrivateDataType("genetic_association"), }, { - id: 'somatic_mutation', - label: 'Somatic mutations', - isPrivate: isPrivateDataType('somatic_mutation'), + id: "somatic_mutation", + label: "Somatic mutations", + isPrivate: isPrivateDataType("somatic_mutation"), }, { - id: 'known_drug', - label: 'Drugs', - isPrivate: isPrivateDataType('known_drug'), + id: "known_drug", + label: "Drugs", + isPrivate: isPrivateDataType("known_drug"), }, { - id: 'affected_pathway', - label: 'Pathways & systems biology', - isPrivate: isPrivateDataType('affected_pathway'), + id: "affected_pathway", + label: "Pathways & systems biology", + isPrivate: isPrivateDataType("affected_pathway"), }, { - id: 'literature', - label: 'Text mining', - isPrivate: isPrivateDataType('literature'), + id: "literature", + label: "Text mining", + isPrivate: isPrivateDataType("literature"), }, { - id: 'rna_expression', - label: 'RNA expression', - isPrivate: isPrivateDataType('rna_expression'), + id: "rna_expression", + label: "RNA expression", + isPrivate: isPrivateDataType("rna_expression"), }, { - id: 'animal_model', - label: 'Animal models', - isPrivate: isPrivateDataType('animal_model'), + id: "animal_model", + label: "Animal models", + isPrivate: isPrivateDataType("animal_model"), }, { - id: 'ot_partner', - label: 'OTAR Projects', - isPrivate: isPrivateDataType('ot_partner'), + id: "ot_partner", + label: "OTAR Projects", + isPrivate: isPrivateDataType("ot_partner"), }, { - id: 'ot_validation_lab', - label: 'OTAR Validation Lab', - isPrivate: isPrivateDataType('ot_validation_lab'), + id: "ot_validation_lab", + label: "OTAR Validation Lab", + isPrivate: isPrivateDataType("ot_validation_lab"), }, ]; diff --git a/packages/sections/src/disease/Bibliography/Description.jsx b/packages/sections/src/disease/Bibliography/Description.jsx index 27ae6c450..afd67b955 100644 --- a/packages/sections/src/disease/Bibliography/Description.jsx +++ b/packages/sections/src/disease/Bibliography/Description.jsx @@ -5,8 +5,8 @@ const url = "http://platform-docs.opentargets.org/bibliography"; function Description({ name }) { return ( <> - Scientific literature mentioning NLP-recognised entity{" "} - {name} and other selected co-occurring entities. Source:{" "} + Scientific literature mentioning NLP-recognised entity {name} and other + selected co-occurring entities. Source:{" "} Open Targets diff --git a/packages/sections/src/disease/Bibliography/Summary.jsx b/packages/sections/src/disease/Bibliography/Summary.jsx index ab06efba9..f9b3a8d09 100644 --- a/packages/sections/src/disease/Bibliography/Summary.jsx +++ b/packages/sections/src/disease/Bibliography/Summary.jsx @@ -10,7 +10,7 @@ function Summary() { + renderSummary={data => data.literatureOcurrences?.count > 0 ? ( <> {data.literatureOcurrences.count.toLocaleString()} publication diff --git a/packages/sections/src/disease/Bibliography/index.js b/packages/sections/src/disease/Bibliography/index.js index f0f63fd06..e5c845502 100644 --- a/packages/sections/src/disease/Bibliography/index.js +++ b/packages/sections/src/disease/Bibliography/index.js @@ -1,9 +1,9 @@ export const definition = { - id: 'bibliography', - name: 'Bibliography', - shortName: 'B', + id: "bibliography", + name: "Bibliography", + shortName: "B", hasData: data => data.literatureOcurrences?.count > 0, }; -export { default as Summary } from './Summary'; -export { default as Body } from './Body'; +export { default as Summary } from "./Summary"; +export { default as Body } from "./Body"; diff --git a/packages/sections/src/disease/KnownDrugs/Body.jsx b/packages/sections/src/disease/KnownDrugs/Body.jsx index 4f70235fe..b491bf981 100644 --- a/packages/sections/src/disease/KnownDrugs/Body.jsx +++ b/packages/sections/src/disease/KnownDrugs/Body.jsx @@ -9,63 +9,63 @@ import KNOWN_DRUGS_BODY_QUERY from "./KnownDrugsQuery.gql"; const exportColumns = [ { label: "diseaseId", - exportValue: (row) => row.disease.id, + exportValue: row => row.disease.id, }, { label: "diseaseName", - exportValue: (row) => row.disease.name, + exportValue: row => row.disease.name, }, { label: "drugId", - exportValue: (row) => row.drug.id, + exportValue: row => row.drug.id, }, { label: "drugName", - exportValue: (row) => row.drug.name, + exportValue: row => row.drug.name, }, { label: "type", - exportValue: (row) => row.drugType, + exportValue: row => row.drugType, }, { label: "mechanismOfAction", - exportValue: (row) => row.mechanismOfAction, + exportValue: row => row.mechanismOfAction, }, { label: "actionType", exportValue: ({ drug: { mechanismsOfAction }, target }) => { if (!mechanismsOfAction) return ""; const at = new Set(); - mechanismsOfAction.rows.forEach((row) => { - row.targets.forEach((t) => { + mechanismsOfAction.rows.forEach(row => { + row.targets.forEach(t => { if (t.id === target.id) { at.add(row.actionType); } }); }); const actionTypes = Array.from(at); - return actionTypes.map((actionType) => sentenceCase(actionType)); + return actionTypes.map(actionType => sentenceCase(actionType)); }, }, { label: "symbol", - exportValue: (row) => row.target.approvedSymbol, + exportValue: row => row.target.approvedSymbol, }, { label: "name", - exportValue: (row) => row.target.approvedName, + exportValue: row => row.target.approvedName, }, { label: "phase", - exportValue: (row) => row.phase, + exportValue: row => row.phase, }, { label: "status", - exportValue: (row) => row.status, + exportValue: row => row.status, }, { label: "source", - exportValue: (row) => row.urls.map((reference) => reference.url), + exportValue: row => row.urls.map(reference => reference.url), }, ]; diff --git a/packages/sections/src/disease/KnownDrugs/Summary.jsx b/packages/sections/src/disease/KnownDrugs/Summary.jsx index 918c36f7a..a69b2e53b 100644 --- a/packages/sections/src/disease/KnownDrugs/Summary.jsx +++ b/packages/sections/src/disease/KnownDrugs/Summary.jsx @@ -10,7 +10,7 @@ function Summary() { ( + renderSummary={data => ( <> {(data.knownDrugs.uniqueDrugs || 0).toLocaleString()} drugs with{" "} {(data.knownDrugs.uniqueTargets || 0).toLocaleString()} targets diff --git a/packages/sections/src/disease/KnownDrugs/index.js b/packages/sections/src/disease/KnownDrugs/index.js index f6f6bb49a..eeb8570b5 100644 --- a/packages/sections/src/disease/KnownDrugs/index.js +++ b/packages/sections/src/disease/KnownDrugs/index.js @@ -2,8 +2,7 @@ export const definition = { id: "knownDrugs", name: "Known Drugs", shortName: "KD", - hasData: (data) => - data.knownDrugs?.count > 0 || data.knownDrugs.freeTextQuery || false, + hasData: data => data.knownDrugs?.count > 0 || data.knownDrugs.freeTextQuery || false, }; // export { default as Summary } from './Summary'; diff --git a/packages/sections/src/disease/OTProjects/Body.jsx b/packages/sections/src/disease/OTProjects/Body.jsx index 409131dcf..c62b2bbe3 100644 --- a/packages/sections/src/disease/OTProjects/Body.jsx +++ b/packages/sections/src/disease/OTProjects/Body.jsx @@ -10,13 +10,13 @@ import { defaultRowsPerPageOptions } from "../../constants"; import { definition } from "."; import OT_PROJECTS_QUERY from "./OTProjectsQuery.gql"; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ primaryColor: { color: theme.palette.primary.main, }, })); -const getColumns = (classes) => [ +const getColumns = classes => [ { id: "projectName", label: "Project name", @@ -35,11 +35,7 @@ const getColumns = (classes) => [ label: "Integrates in PPP", renderCell: ({ integratesInPPP }) => integratesInPPP ? ( - + ) : null, exportValue: ({ integratesInPPP }) => (integratesInPPP ? "yes" : "no"), }, diff --git a/packages/sections/src/disease/OTProjects/index.js b/packages/sections/src/disease/OTProjects/index.js index 9a9d597e3..e12f29c0a 100644 --- a/packages/sections/src/disease/OTProjects/index.js +++ b/packages/sections/src/disease/OTProjects/index.js @@ -5,6 +5,6 @@ export const definition = { id, name: "Open Targets Projects", shortName: "OP", - hasData: (data) => data.otarProjects?.length > 0, + hasData: data => data.otarProjects?.length > 0, isPrivate: isPrivateDiseaseSection(id), }; diff --git a/packages/sections/src/disease/Ontology/Body.jsx b/packages/sections/src/disease/Ontology/Body.jsx index e37a1ef36..762a9fc90 100644 --- a/packages/sections/src/disease/Ontology/Body.jsx +++ b/packages/sections/src/disease/Ontology/Body.jsx @@ -12,8 +12,8 @@ function Body({ id: efoId, label: name, entity }) { useEffect(() => { let isCurrent = true; fetch(config.efoURL) - .then((res) => res.text()) - .then((lines) => { + .then(res => res.text()) + .then(lines => { if (isCurrent) { const nodes = lines.trim().split("\n").map(JSON.parse); setEfoNodes(nodes); @@ -36,7 +36,7 @@ function Body({ id: efoId, label: name, entity }) { }, }} renderDescription={() => } - renderBody={(data) => { + renderBody={data => { const idToDisease = data[entity].efoNodes.reduce((acc, disease) => { acc[disease.id] = disease; return acc; diff --git a/packages/sections/src/disease/Ontology/Summary.jsx b/packages/sections/src/disease/Ontology/Summary.jsx index d8dbdaeb1..4a275da97 100644 --- a/packages/sections/src/disease/Ontology/Summary.jsx +++ b/packages/sections/src/disease/Ontology/Summary.jsx @@ -10,7 +10,7 @@ function Summary() { + renderSummary={data => data.isTherapeuticArea ? "Therapeutic area" : `Belongs to ${data.therapeuticAreas.length} therapeutic areas` diff --git a/packages/sections/src/disease/Phenotypes/Body.jsx b/packages/sections/src/disease/Phenotypes/Body.jsx index 620839ab1..a92c70aee 100644 --- a/packages/sections/src/disease/Phenotypes/Body.jsx +++ b/packages/sections/src/disease/Phenotypes/Body.jsx @@ -37,25 +37,20 @@ const columns = [ renderCell: ({ phenotypeEFO, phenotypeHPO }) => { let content; if (phenotypeEFO && phenotypeEFO.id) { - content = ( - {phenotypeHPO.name} - ); + content = {phenotypeHPO.name}; } else if (phenotypeHPO && phenotypeHPO.name) content = phenotypeHPO.name; else content = naLabel; return phenotypeHPO.description ? ( - + {content} ) : ( content ); }, - filterValue: (row) => row.phenotypeHPO.name, - exportValue: (row) => row.phenotypeHPO.name, + filterValue: row => row.phenotypeHPO.name, + exportValue: row => row.phenotypeHPO.name, // width: '9%', }, { @@ -69,8 +64,8 @@ const columns = [ ); }, - filterValue: (row) => row.phenotypeHPO.id.replace("_", ":"), - exportValue: (row) => row.phenotypeHPO.id.replace("_", ":"), + filterValue: row => row.phenotypeHPO.id.replace("_", ":"), + exportValue: row => row.phenotypeHPO.id.replace("_", ":"), // width: '9%', }, { @@ -79,9 +74,7 @@ const columns = [ renderCell: ({ evidence }) => evidence.aspect ? ( {evidence.aspect} @@ -89,36 +82,28 @@ const columns = [ ) : ( naLabel ), - filterValue: (row) => row.evidence.aspect, - exportValue: (row) => row.evidence.aspect, + filterValue: row => row.evidence.aspect, + exportValue: row => row.evidence.aspect, // width: '7%', }, { id: "frequency", label: "Frequency", renderCell: ({ evidence }) => { - if ( - evidence.frequencyHPO && - evidence.frequencyHPO.id && - evidence.frequencyHPO.name - ) + if (evidence.frequencyHPO && evidence.frequencyHPO.id && evidence.frequencyHPO.name) return ( {evidence.frequencyHPO.name} ); - if (evidence.frequencyHPO && evidence.frequencyHPO.name) - return evidence.frequencyHPO.name; + if (evidence.frequencyHPO && evidence.frequencyHPO.name) return evidence.frequencyHPO.name; return naLabel; }, - filterValue: (row) => row.evidence.frequencyHPO?.name || naLabel, - exportValue: (row) => row.evidence.frequencyHPO?.name || naLabel, + filterValue: row => row.evidence.frequencyHPO?.name || naLabel, + exportValue: row => row.evidence.frequencyHPO?.name || naLabel, // width: '9%', }, { @@ -126,22 +111,17 @@ const columns = [ label: "Onset", renderCell: ({ evidence }) => evidence.onset?.length > 0 - ? evidence.onset.map((o) => ( + ? evidence.onset.map(o => ( - + {o.name}
    )) : naLabel, - filterValue: (row) => - row.evidence.onset?.map((o) => o.name).join() || naLabel, - exportValue: (row) => - row.evidence.onset?.map((o) => o.name).join() || naLabel, + filterValue: row => row.evidence.onset?.map(o => o.name).join() || naLabel, + exportValue: row => row.evidence.onset?.map(o => o.name).join() || naLabel, // width: '9%', }, { @@ -149,29 +129,24 @@ const columns = [ label: "Modifier", renderCell: ({ evidence }) => evidence.modifiers?.length > 0 - ? evidence.modifiers.map((m) => ( + ? evidence.modifiers.map(m => ( - + {m.name}
    )) : naLabel, - filterValue: (row) => - row.evidence.modifiers?.map((m) => m.name).join() || naLabel, - exportValue: (row) => - row.evidence.modifiers?.map((m) => m.name).join() || naLabel, + filterValue: row => row.evidence.modifiers?.map(m => m.name).join() || naLabel, + exportValue: row => row.evidence.modifiers?.map(m => m.name).join() || naLabel, // width: '9%', }, { id: "sex", label: "Sex", renderCell: ({ evidence }) => _.capitalize(evidence.sex) || naLabel, - filterValue: (row) => row.evidence.sex || naLabel, + filterValue: row => row.evidence.sex || naLabel, // width: '9%', }, { @@ -179,25 +154,22 @@ const columns = [ label: "Evidence", renderCell: ({ evidence }) => evidence.evidenceType ? ( - + {evidence.evidenceType} ) : ( naLabel ), - filterValue: (row) => row.evidence.evidenceType || naLabel, - exportValue: (row) => row.evidence.evidenceType || naLabel, + filterValue: row => row.evidence.evidenceType || naLabel, + exportValue: row => row.evidence.evidenceType || naLabel, // width: '7%', }, { id: "source", label: "Source", renderCell: ({ evidence }) => evidence.resource || naLabel, - filterValue: (row) => row.evidence.resource || naLabel, - exportValue: (row) => row.evidence.resource || naLabel, + filterValue: row => row.evidence.resource || naLabel, + exportValue: row => row.evidence.resource || naLabel, // width: '9%', }, { @@ -209,7 +181,7 @@ const columns = [ return naLabel; } // parse references - const refs = evidence.references.map((r) => ({ + const refs = evidence.references.map(r => ({ url: r.toUpperCase().startsWith("PMID:") ? `https://europepmc.org/search?query=EXT_ID:${r.split(":").pop()}` : `https://hpo.jax.org/app/browse/disease/${r}`, @@ -218,10 +190,8 @@ const columns = [ })); return ; }, - filterValue: (row) => - row.evidence.references?.map((r) => r).join() || naLabel, - exportValue: (row) => - row.evidence.references?.map((r) => r).join() || naLabel, + filterValue: row => row.evidence.references?.map(r => r).join() || naLabel, + exportValue: row => row.evidence.references?.map(r => r).join() || naLabel, // width: '9%', }, ]; @@ -246,8 +216,8 @@ function Body({ label: name, id: efoId, entity }) { renderBody={({ disease }) => { // process the data const rows = []; - disease.phenotypes.rows.forEach((p) => - p.evidence.forEach((e) => { + disease.phenotypes.rows.forEach(p => + p.evidence.forEach(e => { const p1 = { ...p }; p1.evidence = e; rows.push(p1); diff --git a/packages/sections/src/disease/Phenotypes/Summary.jsx b/packages/sections/src/disease/Phenotypes/Summary.jsx index a524f7747..880ca86f5 100644 --- a/packages/sections/src/disease/Phenotypes/Summary.jsx +++ b/packages/sections/src/disease/Phenotypes/Summary.jsx @@ -10,7 +10,7 @@ function Summary() { <>{data.phenotypes?.count || 0} phenotypes} + renderSummary={data => <>{data.phenotypes?.count || 0} phenotypes} /> ); } diff --git a/packages/sections/src/disease/Phenotypes/index.js b/packages/sections/src/disease/Phenotypes/index.js index 0197b46c6..53837d423 100644 --- a/packages/sections/src/disease/Phenotypes/index.js +++ b/packages/sections/src/disease/Phenotypes/index.js @@ -1,6 +1,6 @@ export const definition = { - id: 'phenotypes', - name: 'Clinical signs and symptoms', - shortName: 'CS', + id: "phenotypes", + name: "Clinical signs and symptoms", + shortName: "CS", hasData: data => (data.phenotypes?.count || 0) > 0, }; diff --git a/packages/sections/src/drug/AdverseEvents/Body.jsx b/packages/sections/src/drug/AdverseEvents/Body.jsx index d320f3e5c..be417240b 100644 --- a/packages/sections/src/drug/AdverseEvents/Body.jsx +++ b/packages/sections/src/drug/AdverseEvents/Body.jsx @@ -3,20 +3,14 @@ import { useQuery } from "@apollo/client"; import { Typography } from "@mui/material"; import { makeStyles } from "@mui/styles"; import _ from "lodash"; -import { - Link, - SectionItem, - PaginationActionsComplete, - Table, - useBatchDownloader, -} from "ui"; +import { Link, SectionItem, PaginationActionsComplete, Table, useBatchDownloader } from "ui"; import { definition } from "."; import Description from "./Description"; import ADVERSE_EVENTS_QUERY from "./AdverseEventsQuery.gql"; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ levelBarContainer: { display: "flex", alignItems: "center", @@ -33,15 +27,10 @@ const getColumns = (critVal, maxLlr, classes) => [ { id: "name", label: "Adverse event (MedDRA)", - renderCell: (d) => + renderCell: d => d.meddraCode ? ( - + {_.upperFirst(d.name)} @@ -59,7 +48,7 @@ const getColumns = (critVal, maxLlr, classes) => [ { id: "llr", label: `Log likelihood ratio (CV = ${critVal.toFixed(2)})`, - renderCell: (d) => { + renderCell: d => { const w = ((d.logLR / maxLlr) * 85).toFixed(2); // scale to max 85% of the width to allows space for label return (
    @@ -73,7 +62,7 @@ const getColumns = (critVal, maxLlr, classes) => [
    ); }, - exportValue: (d) => d.logLR.toFixed(2), + exportValue: d => d.logLR.toFixed(2), width: "45%", }, ]; @@ -99,7 +88,7 @@ function Body({ id: chemblId, label: name, entity }) { }); } - const handlePageChange = (newPage) => { + const handlePageChange = newPage => { setPage(newPage); getData(newPage, pageSize); }; @@ -122,7 +111,7 @@ function Body({ id: chemblId, label: name, entity }) { request={{ loading, error, data }} entity={entity} renderDescription={() => } - renderBody={(res) => { + renderBody={res => { // TODO: Change GraphQL schema to have a maxLlr field instead of having // to get the first item of adverse events to get the largest llr since // items are sorted in decreasing llr order. @@ -144,7 +133,7 @@ function Body({ id: chemblId, label: name, entity }) { fixed pageSize={pageSize} rowsPerPageOptions={[10, 25, 50, 100]} - onRowsPerPageChange={(newSize) => handleRowsPerPageChange(newSize)} + onRowsPerPageChange={newSize => handleRowsPerPageChange(newSize)} query={ADVERSE_EVENTS_QUERY.loc.source.body} variables={variables} /> diff --git a/packages/sections/src/drug/AdverseEvents/Description.jsx b/packages/sections/src/drug/AdverseEvents/Description.jsx index 2f3e75c63..698daacfd 100644 --- a/packages/sections/src/drug/AdverseEvents/Description.jsx +++ b/packages/sections/src/drug/AdverseEvents/Description.jsx @@ -1,16 +1,11 @@ import { Link } from "ui"; - function Description({ name }) { return ( <> - Significant post-marketing adverse events for {name}{' '} - estimated from reports submitted to the FDA Adverse Event Reporting - database by healthcare professionals. Source:{' '} - + Significant post-marketing adverse events for {name} estimated from reports + submitted to the FDA Adverse Event Reporting database by healthcare professionals. Source:{" "} + Open Targets . diff --git a/packages/sections/src/drug/AdverseEvents/Summary.jsx b/packages/sections/src/drug/AdverseEvents/Summary.jsx index 0dcf71e78..c3daaa39f 100644 --- a/packages/sections/src/drug/AdverseEvents/Summary.jsx +++ b/packages/sections/src/drug/AdverseEvents/Summary.jsx @@ -1,8 +1,7 @@ +import { SummaryItem, usePlatformApi } from "ui"; -import { SummaryItem, usePlatformApi } from 'ui'; - -import { definition } from '.'; -import ADVERSE_EVENTS_SUMMARY_FRAGMENT from './AdverseEventsSummaryFragment.gql'; +import { definition } from "."; +import ADVERSE_EVENTS_SUMMARY_FRAGMENT from "./AdverseEventsSummaryFragment.gql"; function Summary() { const request = usePlatformApi(ADVERSE_EVENTS_SUMMARY_FRAGMENT); @@ -12,9 +11,7 @@ function Summary() { definition={definition} request={request} renderSummary={data => - `${data.adverseEvents.count} adverse event${ - data.adverseEvents.count !== 1 ? 's' : '' - }` + `${data.adverseEvents.count} adverse event${data.adverseEvents.count !== 1 ? "s" : ""}` } /> ); diff --git a/packages/sections/src/drug/AdverseEvents/index.js b/packages/sections/src/drug/AdverseEvents/index.js index 2d8b7e72f..d8c96979c 100644 --- a/packages/sections/src/drug/AdverseEvents/index.js +++ b/packages/sections/src/drug/AdverseEvents/index.js @@ -1,6 +1,6 @@ export const definition = { - id: 'adverseEvents', - name: 'Pharmacovigilance', - shortName: 'PV', + id: "adverseEvents", + name: "Pharmacovigilance", + shortName: "PV", hasData: data => data.adverseEvents?.count > 0 || false, }; diff --git a/packages/sections/src/drug/Bibliography/Body.jsx b/packages/sections/src/drug/Bibliography/Body.jsx index d34f04eec..fceed8f04 100644 --- a/packages/sections/src/drug/Bibliography/Body.jsx +++ b/packages/sections/src/drug/Bibliography/Body.jsx @@ -1,7 +1,7 @@ -import { definition } from '.'; -import { Body as Bibliography } from '../../common/Literature'; +import { definition } from "."; +import { Body as Bibliography } from "../../common/Literature"; -import DRUGS_LITERATURE_OCURRENCES from './BibliographyQuery.gql'; +import DRUGS_LITERATURE_OCURRENCES from "./BibliographyQuery.gql"; function Body({ id, label: name }) { return ( diff --git a/packages/sections/src/drug/Bibliography/Description.jsx b/packages/sections/src/drug/Bibliography/Description.jsx index 722645b28..afd67b955 100644 --- a/packages/sections/src/drug/Bibliography/Description.jsx +++ b/packages/sections/src/drug/Bibliography/Description.jsx @@ -1,12 +1,12 @@ import { Link } from "ui"; -const url = 'http://platform-docs.opentargets.org/bibliography'; +const url = "http://platform-docs.opentargets.org/bibliography"; function Description({ name }) { return ( <> - Scientific literature mentioning NLP-recognised entity{' '} - {name} and other selected co-occurring entities. Source:{' '} + Scientific literature mentioning NLP-recognised entity {name} and other + selected co-occurring entities. Source:{" "} Open Targets diff --git a/packages/sections/src/drug/Bibliography/Summary.jsx b/packages/sections/src/drug/Bibliography/Summary.jsx index 0cd34ff89..a71f59fcd 100644 --- a/packages/sections/src/drug/Bibliography/Summary.jsx +++ b/packages/sections/src/drug/Bibliography/Summary.jsx @@ -10,7 +10,7 @@ function Summary() { + renderSummary={data => data.literatureOcurrences?.count > 0 ? ( <> {data.literatureOcurrences.count.toLocaleString()} publication diff --git a/packages/sections/src/drug/Bibliography/index.js b/packages/sections/src/drug/Bibliography/index.js index 6f1bc729f..d3eabcab8 100644 --- a/packages/sections/src/drug/Bibliography/index.js +++ b/packages/sections/src/drug/Bibliography/index.js @@ -1,7 +1,6 @@ export const definition = { - id: 'bibliography', - name: 'Bibliography', - shortName: 'B', + id: "bibliography", + name: "Bibliography", + shortName: "B", hasData: data => data.literatureOcurrences?.count > 0, }; - diff --git a/packages/sections/src/drug/DrugWarnings/Body.jsx b/packages/sections/src/drug/DrugWarnings/Body.jsx index d4e8e8ccf..7456e8f6f 100644 --- a/packages/sections/src/drug/DrugWarnings/Body.jsx +++ b/packages/sections/src/drug/DrugWarnings/Body.jsx @@ -6,7 +6,7 @@ import Description from "./Description"; import DRUG_WARNINGS_QUERY from "./DrugWarningsQuery.gql"; import { naLabel, defaultRowsPerPageOptions } from "../../constants"; -const replaceSemicolonWithUnderscore = (id) => id.replace(":", "_"); +const replaceSemicolonWithUnderscore = id => id.replace(":", "_"); const columns = [ { @@ -20,9 +20,7 @@ const columns = [ if (efoId) return ( - - {efoTerm || efoId} - + {efoTerm || efoId} ); return efoTerm || description || naLabel; @@ -34,12 +32,7 @@ const columns = [ renderCell: ({ toxicityClass, efoIdForWarningClass, description }) => { if (efoIdForWarningClass) return ( - + {toxicityClass || efoIdForWarningClass} ); @@ -59,7 +52,7 @@ const columns = [ const sources = new Set(); // used to collect unique sources const refs = []; - references.forEach((ref) => { + references.forEach(ref => { sources.add(ref.source); // add source to set refs.push({ // create new entry object @@ -71,9 +64,7 @@ const columns = [ const message = Array.from(sources).join(", "); - return ( - - ); + return ; }, }, ]; diff --git a/packages/sections/src/drug/DrugWarnings/Description.jsx b/packages/sections/src/drug/DrugWarnings/Description.jsx index 05202d68d..ac9870b87 100644 --- a/packages/sections/src/drug/DrugWarnings/Description.jsx +++ b/packages/sections/src/drug/DrugWarnings/Description.jsx @@ -1,11 +1,9 @@ import { Link } from "ui"; - function Description({ name }) { return ( <> - Manually curated withdrawn and black box warnings for{' '} - {name}. Source:{' '} + Manually curated withdrawn and black box warnings for {name}. Source:{" "} ChEMBL diff --git a/packages/sections/src/drug/DrugWarnings/Summary.jsx b/packages/sections/src/drug/DrugWarnings/Summary.jsx index 457bca3d7..5325b0353 100644 --- a/packages/sections/src/drug/DrugWarnings/Summary.jsx +++ b/packages/sections/src/drug/DrugWarnings/Summary.jsx @@ -1,7 +1,7 @@ -import { SummaryItem, usePlatformApi } from 'ui'; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import DRUG_WARNINGS_SUMMARY_FRAGMENT from './DrugWarningsSummaryFragment.gql'; +import { definition } from "."; +import DRUG_WARNINGS_SUMMARY_FRAGMENT from "./DrugWarningsSummaryFragment.gql"; function Summary() { const request = usePlatformApi(DRUG_WARNINGS_SUMMARY_FRAGMENT); @@ -12,12 +12,12 @@ function Summary() { request={request} renderSummary={({ hasBeenWithdrawn, blackBoxWarning }) => { if (hasBeenWithdrawn && blackBoxWarning) { - return 'Withdrawn • Black Box'; + return "Withdrawn • Black Box"; } - if (hasBeenWithdrawn) return 'Withdrawn'; + if (hasBeenWithdrawn) return "Withdrawn"; - if (blackBoxWarning) return 'Black Box'; + if (blackBoxWarning) return "Black Box"; return null; }} diff --git a/packages/sections/src/drug/DrugWarnings/index.js b/packages/sections/src/drug/DrugWarnings/index.js index d7e18b1d4..32384d062 100644 --- a/packages/sections/src/drug/DrugWarnings/index.js +++ b/packages/sections/src/drug/DrugWarnings/index.js @@ -1,7 +1,6 @@ export const definition = { - id: 'drugWarnings', - name: 'Drug Warnings', - shortName: 'DW', - hasData: ({ hasBeenWithdrawn, blackBoxWarning }) => - hasBeenWithdrawn || blackBoxWarning, + id: "drugWarnings", + name: "Drug Warnings", + shortName: "DW", + hasData: ({ hasBeenWithdrawn, blackBoxWarning }) => hasBeenWithdrawn || blackBoxWarning, }; diff --git a/packages/sections/src/drug/Indications/Body.jsx b/packages/sections/src/drug/Indications/Body.jsx index 19f04879c..a9b4a26c4 100644 --- a/packages/sections/src/drug/Indications/Body.jsx +++ b/packages/sections/src/drug/Indications/Body.jsx @@ -1,12 +1,6 @@ import { useQuery } from "@apollo/client"; -import { - Link, - SectionItem, - DataTable, - PaginationActionsComplete, - TableDrawer, -} from "ui"; +import { Link, SectionItem, DataTable, PaginationActionsComplete, TableDrawer } from "ui"; import { sourceMap, phaseMap } from "../../constants"; import { referenceUrls } from "../../utils/urls"; @@ -20,18 +14,13 @@ const columns = [ { id: "indication", propertyPath: "disease.name", - renderCell: (d) => ( - {d.disease.name} - ), + renderCell: d => {d.disease.name}, width: "38%", }, { id: "therapeuticAreas", - renderCell: (d) => ( - - ), - exportValue: (d) => - d.disease.therapeuticAreas.map((therapeuticArea) => therapeuticArea.id), + renderCell: d => , + exportValue: d => d.disease.therapeuticAreas.map(therapeuticArea => therapeuticArea.id), width: "38%", }, { @@ -50,8 +39,8 @@ const columns = [ const referenceList = []; - references.forEach((reference) => { - reference.ids.forEach((id) => { + references.forEach(reference => { + reference.ids.forEach(id => { referenceList.push({ name: id, url: referenceUrls[reference.source](id), @@ -83,7 +72,7 @@ function Body({ id: chemblId, label: name, entity }) { request={request} entity={entity} renderDescription={() => } - renderBody={(data) => { + renderBody={data => { const { rows } = data.drug.indications; return ( diff --git a/packages/sections/src/drug/Indications/Description.jsx b/packages/sections/src/drug/Indications/Description.jsx index 86a76fc09..41c959870 100644 --- a/packages/sections/src/drug/Indications/Description.jsx +++ b/packages/sections/src/drug/Indications/Description.jsx @@ -3,9 +3,8 @@ import { Link } from "ui"; function Description({ name }) { return ( <> - Investigational and approved indications for {name}{' '} - curated from clinical trial records and post-marketing package inserts. - Source:{' '} + Investigational and approved indications for {name} curated from clinical + trial records and post-marketing package inserts. Source:{" "} ChEMBL diff --git a/packages/sections/src/drug/Indications/Summary.jsx b/packages/sections/src/drug/Indications/Summary.jsx index 76dd4f938..b73037401 100644 --- a/packages/sections/src/drug/Indications/Summary.jsx +++ b/packages/sections/src/drug/Indications/Summary.jsx @@ -10,10 +10,8 @@ function Summary() { - `${data.indications.count} indication${ - data.indications.count !== 1 ? "s" : "" - }` + renderSummary={data => + `${data.indications.count} indication${data.indications.count !== 1 ? "s" : ""}` } /> ); diff --git a/packages/sections/src/drug/Indications/TherapeuticAreasDrawer.jsx b/packages/sections/src/drug/Indications/TherapeuticAreasDrawer.jsx index c1eb7b2f0..bc6df4f1b 100644 --- a/packages/sections/src/drug/Indications/TherapeuticAreasDrawer.jsx +++ b/packages/sections/src/drug/Indications/TherapeuticAreasDrawer.jsx @@ -14,7 +14,7 @@ import { makeStyles } from "@mui/styles"; import { faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -const therapeuticAreasDrawerStyles = makeStyles((theme) => ({ +const therapeuticAreasDrawerStyles = makeStyles(theme => ({ drawerBody: { overflowY: "overlay", }, @@ -62,18 +62,11 @@ function TherapeuticAreasDrawer({ therapeuticAreas }) { } if (therapeuticAreas.length === 1) { - return ( - - {therapeuticAreas[0].name} - - ); + return {therapeuticAreas[0].name}; } - const toggleDrawer = (event) => { - if ( - event.type === "keydown" && - (event.key === "Tab" || event.key === "Shift") - ) { + const toggleDrawer = event => { + if (event.type === "keydown" && (event.key === "Tab" || event.key === "Shift")) { return; } @@ -89,9 +82,7 @@ function TherapeuticAreasDrawer({ therapeuticAreas }) { - - Therapeutic Areas - + Therapeutic Areas {therapeuticAreas.length} entries @@ -110,7 +101,7 @@ function TherapeuticAreasDrawer({ therapeuticAreas }) { }} > - {therapeuticAreas.map((item) => ( + {therapeuticAreas.map(item => ( {item.name} diff --git a/packages/sections/src/drug/Indications/index.js b/packages/sections/src/drug/Indications/index.js index 60202e913..4a1f64820 100644 --- a/packages/sections/src/drug/Indications/index.js +++ b/packages/sections/src/drug/Indications/index.js @@ -1,6 +1,6 @@ export const definition = { - id: 'indications', - name: 'Indications', - shortName: 'I', + id: "indications", + name: "Indications", + shortName: "I", hasData: data => data.indications?.count > 0 || false, -}; \ No newline at end of file +}; diff --git a/packages/sections/src/drug/KnownDrugs/Body.jsx b/packages/sections/src/drug/KnownDrugs/Body.jsx index 62304f0a3..da45d345c 100644 --- a/packages/sections/src/drug/KnownDrugs/Body.jsx +++ b/packages/sections/src/drug/KnownDrugs/Body.jsx @@ -8,31 +8,31 @@ import KNOWN_DRUGS_BODY_QUERY from "./KnownDrugsQuery.gql"; const exportColumns = [ { label: "diseaseId", - exportValue: (row) => row.disease.id, + exportValue: row => row.disease.id, }, { label: "diseaseName", - exportValue: (row) => row.disease.name, + exportValue: row => row.disease.name, }, { label: "symbol", - exportValue: (row) => row.target.approvedSymbol, + exportValue: row => row.target.approvedSymbol, }, { label: "name", - exportValue: (row) => row.target.approvedName, + exportValue: row => row.target.approvedName, }, { label: "phase", - exportValue: (row) => row.phase, + exportValue: row => row.phase, }, { label: "status", - exportValue: (row) => row.status, + exportValue: row => row.status, }, { label: "source", - exportValue: (row) => row.urls.map((reference) => reference.url), + exportValue: row => row.urls.map(reference => reference.url), }, ]; diff --git a/packages/sections/src/drug/KnownDrugs/Description.jsx b/packages/sections/src/drug/KnownDrugs/Description.jsx index 3b6ed6657..5f4ae1651 100644 --- a/packages/sections/src/drug/KnownDrugs/Description.jsx +++ b/packages/sections/src/drug/KnownDrugs/Description.jsx @@ -3,8 +3,8 @@ import { Link } from "ui"; function Description({ name }) { return ( <> - Clinical trial records, including curated indication and mechanism of - action for {name}. Source:{' '} + Clinical trial records, including curated indication and mechanism of action for{" "} + {name}. Source:{" "} ChEMBL diff --git a/packages/sections/src/drug/KnownDrugs/Summary.jsx b/packages/sections/src/drug/KnownDrugs/Summary.jsx index c1741cefd..b7dcae434 100644 --- a/packages/sections/src/drug/KnownDrugs/Summary.jsx +++ b/packages/sections/src/drug/KnownDrugs/Summary.jsx @@ -1,9 +1,7 @@ +import { SummaryItem, usePlatformApi } from "ui"; +import KNOWN_DRUGS_SUMMARY_FRAGMENT from "./KnownDrugsSummaryFragment.gql"; - -import { SummaryItem, usePlatformApi } from 'ui'; -import KNOWN_DRUGS_SUMMARY_FRAGMENT from './KnownDrugsSummaryFragment.gql'; - -import { definition } from '.'; +import { definition } from "."; function Summary() { const request = usePlatformApi(KNOWN_DRUGS_SUMMARY_FRAGMENT); @@ -15,9 +13,9 @@ function Summary() { renderSummary={data => ( <> {(data.knownDrugs.uniqueTargets || 0).toLocaleString()} target - {data.knownDrugs.uniqueTargets === 1 ? '' : 's'} and{' '} + {data.knownDrugs.uniqueTargets === 1 ? "" : "s"} and{" "} {(data.knownDrugs.uniqueDiseases || 0).toLocaleString()} indication - {data.knownDrugs.uniqueDiseases === 1 ? '' : 's'} + {data.knownDrugs.uniqueDiseases === 1 ? "" : "s"} )} /> diff --git a/packages/sections/src/drug/KnownDrugs/index.js b/packages/sections/src/drug/KnownDrugs/index.js index 260470892..a592caf2d 100644 --- a/packages/sections/src/drug/KnownDrugs/index.js +++ b/packages/sections/src/drug/KnownDrugs/index.js @@ -2,6 +2,5 @@ export const definition = { id: "knownDrugs", name: "Clinical Precedence", shortName: "CP", - hasData: (data) => - data.knownDrugs?.count > 0 || data.knownDrugs.freeTextQuery || false, + hasData: data => data.knownDrugs?.count > 0 || data.knownDrugs.freeTextQuery || false, }; diff --git a/packages/sections/src/drug/MechanismsOfAction/Body.jsx b/packages/sections/src/drug/MechanismsOfAction/Body.jsx index d90cba6ed..1c5c47cd1 100644 --- a/packages/sections/src/drug/MechanismsOfAction/Body.jsx +++ b/packages/sections/src/drug/MechanismsOfAction/Body.jsx @@ -20,14 +20,12 @@ const columns = [ { id: "targets", label: "Human targets", - filterValue: (row) => - row.targets.map((target) => target.approvedSymbol).join(" "), - exportValue: (row) => - row.targets.map((target) => target.approvedSymbol).join(), + filterValue: row => row.targets.map(target => target.approvedSymbol).join(" "), + exportValue: row => row.targets.map(target => target.approvedSymbol).join(), renderCell: ({ targets }) => { if (!targets) return "non-human"; - const targetList = targets.map((target) => ({ + const targetList = targets.map(target => ({ name: target.approvedSymbol, url: `/target/${target.id}`, group: "Human targets", @@ -39,11 +37,9 @@ const columns = [ { id: "references", label: "References", - filterValue: (row) => - row.references.map((reference) => reference.source).join(" "), - exportValue: (row) => - row.references.map((reference) => reference.source).join(), - renderCell: (row) => + filterValue: row => row.references.map(reference => reference.source).join(" "), + exportValue: row => row.references.map(reference => reference.source).join(), + renderCell: row => !row.references ? "n/a" : row.references.map((r, i) => ( @@ -79,7 +75,7 @@ function Body({ id: chemblId, label: name, entity }) { childMolecules={request.childMolecules || []} /> )} - renderBody={(data) => { + renderBody={data => { const { rows } = data.drug.mechanismsOfAction; return ( diff --git a/packages/sections/src/drug/MechanismsOfAction/Description.jsx b/packages/sections/src/drug/MechanismsOfAction/Description.jsx index 2f2d94bd4..ca9e4b29c 100644 --- a/packages/sections/src/drug/MechanismsOfAction/Description.jsx +++ b/packages/sections/src/drug/MechanismsOfAction/Description.jsx @@ -1,7 +1,6 @@ -import { Link } from 'ui'; -import { Fragment } from 'react'; -import { v1 } from 'uuid'; - +import { Link } from "ui"; +import { Fragment } from "react"; +import { v1 } from "uuid"; function Description({ name, parentMolecule, childMolecules }) { const molecules = [...childMolecules]; @@ -13,18 +12,17 @@ function Description({ name, parentMolecule, childMolecules }) { {name} {molecules.length > 0 ? ( <> - , and related molecules{' '} + , and related molecules{" "} {molecules.map(molecule => ( {molecule.name} - {', '} + {", "} ))} - ) : null}{' '} - biochemical interactions to produce intended pharmacological effects. - Curated from scientific literature and post-marketing package inserts. - Source:{' '} + ) : null}{" "} + biochemical interactions to produce intended pharmacological effects. Curated from scientific + literature and post-marketing package inserts. Source:{" "} ChEMBL diff --git a/packages/sections/src/drug/MechanismsOfAction/Summary.jsx b/packages/sections/src/drug/MechanismsOfAction/Summary.jsx index 7a6c0de9f..2c530b5f0 100644 --- a/packages/sections/src/drug/MechanismsOfAction/Summary.jsx +++ b/packages/sections/src/drug/MechanismsOfAction/Summary.jsx @@ -1,7 +1,7 @@ -import { SummaryItem, usePlatformApi } from 'ui'; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import MECHANISM_OF_ACTION_SUMMARY_FRAGMENT from './MechanismsOfActionSummaryFragment.gql'; +import { definition } from "."; +import MECHANISM_OF_ACTION_SUMMARY_FRAGMENT from "./MechanismsOfActionSummaryFragment.gql"; function Summary() { const request = usePlatformApi(MECHANISM_OF_ACTION_SUMMARY_FRAGMENT); @@ -13,11 +13,11 @@ function Summary() { renderSummary={data => ( <> {data.mechanismsOfAction.uniqueActionTypes.length > 0 - ? data.mechanismsOfAction.uniqueActionTypes.join(' • ') + ? data.mechanismsOfAction.uniqueActionTypes.join(" • ") : null}
    {data.mechanismsOfAction.uniqueTargetTypes.length > 0 - ? data.mechanismsOfAction.uniqueTargetTypes.join(' • ') + ? data.mechanismsOfAction.uniqueTargetTypes.join(" • ") : null} )} diff --git a/packages/sections/src/drug/MechanismsOfAction/index.js b/packages/sections/src/drug/MechanismsOfAction/index.js index 99fc72be2..16e40a769 100644 --- a/packages/sections/src/drug/MechanismsOfAction/index.js +++ b/packages/sections/src/drug/MechanismsOfAction/index.js @@ -1,7 +1,7 @@ export const definition = { - id: 'mechanismsOfAction', - name: 'Mechanisms of Action', - shortName: 'MA', + id: "mechanismsOfAction", + name: "Mechanisms of Action", + shortName: "MA", hasData: data => (data.mechanismsOfAction?.uniqueActionTypes.length > 0 && data.mechanismsOfAction?.uniqueTargetTypes.length > 0) || diff --git a/packages/sections/src/drug/Pharmacogenomics/index.js b/packages/sections/src/drug/Pharmacogenomics/index.js index e112959f6..d602175a5 100644 --- a/packages/sections/src/drug/Pharmacogenomics/index.js +++ b/packages/sections/src/drug/Pharmacogenomics/index.js @@ -1,7 +1,6 @@ export const definition = { - id: 'pharmacogenetics', - name: 'Pharmacogenetics', - shortName: 'PGx', + id: "pharmacogenetics", + name: "Pharmacogenetics", + shortName: "PGx", hasData: data => data.pharmacogenomics.length > 0, }; - diff --git a/packages/sections/src/evidence/CRISPR/Description.jsx b/packages/sections/src/evidence/CRISPR/Description.jsx index 85f8ad8be..dcc7508a1 100644 --- a/packages/sections/src/evidence/CRISPR/Description.jsx +++ b/packages/sections/src/evidence/CRISPR/Description.jsx @@ -3,9 +3,8 @@ import { Link } from "ui"; function Description({ symbol, name }) { return ( <> - Cancer cell line dependencies identified using CRISPR-Cas9 whole genome - screenings pinpointing a {symbol} dependency in{" "} - {name}. Source:{" "} + Cancer cell line dependencies identified using CRISPR-Cas9 whole genome screenings pinpointing + a {symbol} dependency in {name}. Source:{" "} Project Score diff --git a/packages/sections/src/evidence/CRISPRScreen/Description.jsx b/packages/sections/src/evidence/CRISPRScreen/Description.jsx index e5c50227f..67f016b3d 100644 --- a/packages/sections/src/evidence/CRISPRScreen/Description.jsx +++ b/packages/sections/src/evidence/CRISPRScreen/Description.jsx @@ -2,8 +2,8 @@ import { Link } from "ui"; const Description = ({ symbol, name }) => ( <> - CRISPR knockout screens from public CRISPR datasources, associating{" "} - {symbol} and CRISPR results. Sources:{" "} + CRISPR knockout screens from public CRISPR datasources, associating {symbol}{" "} + and CRISPR results. Sources:{" "} CRISPRBrain diff --git a/packages/sections/src/evidence/CancerBiomarkers/BiomarkersDrawer.jsx b/packages/sections/src/evidence/CancerBiomarkers/BiomarkersDrawer.jsx index ae73cf039..d923f2016 100644 --- a/packages/sections/src/evidence/CancerBiomarkers/BiomarkersDrawer.jsx +++ b/packages/sections/src/evidence/CancerBiomarkers/BiomarkersDrawer.jsx @@ -1,11 +1,5 @@ import { useState } from "react"; -import { - Drawer, - Link as MuiLink, - IconButton, - Paper, - Typography, -} from "@mui/material"; +import { Drawer, Link as MuiLink, IconButton, Paper, Typography } from "@mui/material"; import { makeStyles } from "@mui/styles"; import { faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -13,7 +7,7 @@ import { Tooltip, Link } from "ui"; import { sentenceCase } from "../../utils/global"; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ drawerLink: { cursor: "pointer", display: "inline-block", @@ -66,11 +60,7 @@ function BiomarkersDrawer({ biomarkerName, biomarkers }) { return ( <> - toggleOpen()} - underline="none" - > + toggleOpen()} underline="none"> {biomarkerName} @@ -91,11 +81,10 @@ function BiomarkersDrawer({ biomarkerName, biomarkers }) { Variant: - {biomarkers.variant.map((variant) => ( + {biomarkers.variant.map(variant => (
    - {variant.name}{" "} - {variant.variantId ? `(ID: ${variant.variantId})` : null} + {variant.name} {variant.variantId ? `(ID: ${variant.variantId})` : null}
    {variant.functionalConsequenceId ? ( Gene expression: - {biomarkers.geneExpression.map((expression) => ( + {biomarkers.geneExpression.map(expression => (
    {expression.name}
    - + {expression.id.name}
    diff --git a/packages/sections/src/evidence/CancerBiomarkers/Description.jsx b/packages/sections/src/evidence/CancerBiomarkers/Description.jsx index 99da17de3..674466bd5 100644 --- a/packages/sections/src/evidence/CancerBiomarkers/Description.jsx +++ b/packages/sections/src/evidence/CancerBiomarkers/Description.jsx @@ -3,14 +3,10 @@ import { Link } from "ui"; function Description({ symbol, diseaseName }) { return ( <> - Expert-curated genomic biomarkers of drug sensitivity, resistance, and - toxicity for drugs targeting {symbol} with an - experimental or approved indication of {diseaseName}. - Source:{" "} - + Expert-curated genomic biomarkers of drug sensitivity, resistance, and toxicity for drugs + targeting {symbol} with an experimental or approved indication of{" "} + {diseaseName}. Source:{" "} + Cancer Genome Interpreter . diff --git a/packages/sections/src/evidence/CancerBiomarkers/index.js b/packages/sections/src/evidence/CancerBiomarkers/index.js index 3407e0303..40bb18909 100644 --- a/packages/sections/src/evidence/CancerBiomarkers/index.js +++ b/packages/sections/src/evidence/CancerBiomarkers/index.js @@ -7,7 +7,7 @@ export const definition = { id, name: "Cancer Biomarkers", shortName: "CB", - hasData: (data) => data.cancerBiomarkersSummary.count > 0, + hasData: data => data.cancerBiomarkersSummary.count > 0, isPrivate: isPrivateEvidenceSection(id), dataType: dataTypesMap.affected_pathway, // dataType: dataSourcesMap.affected_pathway, diff --git a/packages/sections/src/evidence/CancerGeneCensus/Description.jsx b/packages/sections/src/evidence/CancerGeneCensus/Description.jsx index 06eb11438..21c20ae19 100644 --- a/packages/sections/src/evidence/CancerGeneCensus/Description.jsx +++ b/packages/sections/src/evidence/CancerGeneCensus/Description.jsx @@ -3,8 +3,8 @@ import { Link } from "ui"; function Description({ symbol, diseaseName }) { return ( <> - Catalogue of somatic mutations that causally implicate{" "} - {symbol} in {diseaseName}. Source:{" "} + Catalogue of somatic mutations that causally implicate {symbol} in{" "} + {diseaseName}. Source:{" "} COSMIC diff --git a/packages/sections/src/evidence/Chembl/Description.jsx b/packages/sections/src/evidence/Chembl/Description.jsx index 06c07cab9..931fffff7 100644 --- a/packages/sections/src/evidence/Chembl/Description.jsx +++ b/packages/sections/src/evidence/Chembl/Description.jsx @@ -4,8 +4,7 @@ function Description({ symbol, name }) { return ( <> Clinical candidates and/or approved drugs pharmacologically targeting{" "} - {symbol} and indicated for {name}. - Source:{" "} + {symbol} and indicated for {name}. Source:{" "} ChEMBL diff --git a/packages/sections/src/evidence/ClinGen/Description.jsx b/packages/sections/src/evidence/ClinGen/Description.jsx index c1dda5341..c6546bac5 100644 --- a/packages/sections/src/evidence/ClinGen/Description.jsx +++ b/packages/sections/src/evidence/ClinGen/Description.jsx @@ -3,13 +3,10 @@ import { Link } from "ui"; function Description({ symbol, diseaseName }) { return ( <> - Gene-Disease Validity curation assesing the strength of the evidence - supporting or refuting a claim that variation in {symbol}{" "} - causes {diseaseName}. Source:{" "} - + Gene-Disease Validity curation assesing the strength of the evidence supporting or refuting a + claim that variation in {symbol} causes {diseaseName}. + Source:{" "} + Gene-Disease Validity curation diff --git a/packages/sections/src/evidence/ClinGen/index.js b/packages/sections/src/evidence/ClinGen/index.js index 99b6384d3..795d88800 100644 --- a/packages/sections/src/evidence/ClinGen/index.js +++ b/packages/sections/src/evidence/ClinGen/index.js @@ -5,7 +5,7 @@ export const definition = { id, name: "ClinGen", shortName: "CG", - hasData: (data) => data.clingenSummary.count > 0, + hasData: data => data.clingenSummary.count > 0, isPrivate: isPrivateEvidenceSection(id), }; diff --git a/packages/sections/src/evidence/EVA/Description.jsx b/packages/sections/src/evidence/EVA/Description.jsx index 61051e4cf..f9204beaf 100644 --- a/packages/sections/src/evidence/EVA/Description.jsx +++ b/packages/sections/src/evidence/EVA/Description.jsx @@ -3,8 +3,8 @@ import { Link } from "ui"; function Description({ symbol, name }) { return ( <> - Germline variation associated with {symbol} on patients - affected by {name}. Source:{" "} + Germline variation associated with {symbol} on patients affected by{" "} + {name}. Source:{" "} EVA diff --git a/packages/sections/src/evidence/EVASomatic/Description.jsx b/packages/sections/src/evidence/EVASomatic/Description.jsx index aa2ba7c50..9e888d358 100644 --- a/packages/sections/src/evidence/EVASomatic/Description.jsx +++ b/packages/sections/src/evidence/EVASomatic/Description.jsx @@ -3,8 +3,8 @@ import { Link } from "ui"; function Description({ symbol, name }) { return ( <> - Somatic variation associated with {symbol} on patients - affected by {name}. Source:{" "} + Somatic variation associated with {symbol} on patients affected by{" "} + {name}. Source:{" "} EVA diff --git a/packages/sections/src/evidence/EuropePmc/Body.jsx b/packages/sections/src/evidence/EuropePmc/Body.jsx index 0197d0b57..06bffeea0 100644 --- a/packages/sections/src/evidence/EuropePmc/Body.jsx +++ b/packages/sections/src/evidence/EuropePmc/Body.jsx @@ -10,13 +10,11 @@ import Publication from "./Publication"; import EUROPE_PMC_QUERY from "./sectionQuery.gql"; import { definition } from "."; -const getColumns = (label) => [ +const getColumns = label => [ { id: "disease", label: "Disease/phenotype", - renderCell: ({ disease }) => ( - {disease.name} - ), + renderCell: ({ disease }) => {disease.name}, filterValue: ({ disease }) => disease.name, }, { @@ -67,10 +65,8 @@ const getColumns = (label) => [ // Merges data from platform-API and EuropePMC API. function mergeData(rows, literatureData) { - const mergedRows = rows.map((row) => { - const relevantEntry = literatureData.find( - (entry) => entry.id === row.literature[0] - ); + const mergedRows = rows.map(row => { + const relevantEntry = literatureData.find(entry => entry.id === row.literature[0]); if (relevantEntry) { return { @@ -84,9 +80,7 @@ function mergeData(rows, literatureData) { abstract: relevantEntry.abstractText, authors: relevantEntry.authorList?.author || [], isOpenAccess: relevantEntry.isOpenAccess === "Y", - fullTextOpen: !!( - relevantEntry.inEPMC === "Y" || relevantEntry.inPMC === "Y" - ), + fullTextOpen: !!(relevantEntry.inEPMC === "Y" || relevantEntry.inPMC === "Y"), journal: { ...relevantEntry.journalInfo, page: relevantEntry.pageInfo, @@ -118,23 +112,23 @@ function Body({ id, label, entity }) { refetch, } = useQuery(EUROPE_PMC_QUERY, { variables, - onCompleted: (res) => { - setNewIds(res.disease.europePmc.rows.map((entry) => entry.literature[0])); + onCompleted: res => { + setNewIds(res.disease.europePmc.rows.map(entry => entry.literature[0])); }, }); const [fetchDownloadData] = useLazyQuery(EUROPE_PMC_QUERY, { - variables: {ensemblId: ensgId, efoId, size: data?.disease.europePmc.count}, + variables: { ensemblId: ensgId, efoId, size: data?.disease.europePmc.count }, }); - async function getDownloadData(){ + async function getDownloadData() { // Get Elasticsearch europPmc data - const res = await fetchDownloadData() - const litIds = res.data.disease.europePmc.rows.map(entry => entry.literature[0]) + const res = await fetchDownloadData(); + const litIds = res.data.disease.europePmc.rows.map(entry => entry.literature[0]); // Get literature data from europePmc // in chucnks of 200 to prevent query to europepmc from getting too large - let downloadLiteratureData = [] - let chunkSize = 200 + let downloadLiteratureData = []; + let chunkSize = 200; for (let i = 0; i < litIds.length; i += chunkSize) { const litIdsChunk = litIds.slice(i, i + chunkSize); const queryUrl = europePmcLiteratureQuery(litIdsChunk); @@ -145,22 +139,19 @@ function Body({ id, label, entity }) { } // Merge data - const rows = mergeData( - res.data.disease.europePmc.rows, - downloadLiteratureData - ); + const rows = mergeData(res.data.disease.europePmc.rows, downloadLiteratureData); return rows.map(row => { return { ...row, disease: row.disease.name, - } - }) + }; + }); } const [loading, setLoading] = useState(isLoading); - const handlePageChange = (pageChange) => { + const handlePageChange = pageChange => { if ( pageChange * pageSize >= data.disease.europePmc.rows.length - pageSize && (pageChange + 1) * pageSize < data.disease.europePmc.count @@ -174,11 +165,7 @@ function Body({ id, label, entity }) { updateQuery: (prev, { fetchMoreResult }) => { if (!fetchMoreResult) return prev; - setNewIds( - fetchMoreResult.disease.europePmc.rows.map( - (entry) => entry.literature[0] - ) - ); + setNewIds(fetchMoreResult.disease.europePmc.rows.map(entry => entry.literature[0])); return { ...prev, @@ -187,10 +174,7 @@ function Body({ id, label, entity }) { europePmc: { ...prev.disease.europePmc, cursor: fetchMoreResult.disease.europePmc.cursor, - rows: [ - ...prev.disease.europePmc.rows, - ...fetchMoreResult.disease.europePmc.rows, - ], + rows: [...prev.disease.europePmc.rows, ...fetchMoreResult.disease.europePmc.rows], }, }, }; @@ -201,12 +185,9 @@ function Body({ id, label, entity }) { setPage(pageChange); }; - const handleRowsPerPageChange = (newPageSize) => { + const handleRowsPerPageChange = newPageSize => { setLoading(true); - if ( - page * newPageSize >= - data.disease.europePmc.rows.length - newPageSize - ) { + if (page * newPageSize >= data.disease.europePmc.rows.length - newPageSize) { refetch(variables); } @@ -226,7 +207,7 @@ function Body({ id, label, entity }) { const resJson = await res.json(); const newLiteratureData = resJson.resultList.result; - setLiteratureData((litData) => [...litData, ...newLiteratureData]); + setLiteratureData(litData => [...litData, ...newLiteratureData]); } setLoading(false); } @@ -241,25 +222,25 @@ function Body({ id, label, entity }) { const columns = getColumns(label); const downloadColumns = [ { - id: 'disease', - label: 'Disease/phenotype', + id: "disease", + label: "Disease/phenotype", }, { - id: 'title', - label: 'Publication', + id: "title", + label: "Publication", }, { - id: 'europePmcId', + id: "europePmcId", }, { - id: 'pmcId', + id: "pmcId", }, { - id: 'year', + id: "year", }, { - id: 'resourceScore', - label: 'Score', + id: "resourceScore", + label: "Score", numeric: true, }, ]; @@ -270,14 +251,9 @@ function Body({ id, label, entity }) { entity={entity} chipText={dataTypesMap.literature} request={{ loading, error, data }} - renderDescription={() => ( - - )} - renderBody={(res) => { - const rows = mergeData( - getPage(res.disease.europePmc.rows, page, pageSize), - literatureData - ); + renderDescription={() => } + renderBody={res => { + const rows = mergeData(getPage(res.disease.europePmc.rows, page, pageSize), literatureData); return (
    Text-mining method evaluating the strength of the association between{" "} - {symbol} and {name} when they co-occur - in the literature. Source:{" "} + {symbol} and {name} when they co-occur in the literature. + Source:{" "} Europe PMC diff --git a/packages/sections/src/evidence/EuropePmc/Publication.jsx b/packages/sections/src/evidence/EuropePmc/Publication.jsx index ac979cc08..e9bc5a58a 100644 --- a/packages/sections/src/evidence/EuropePmc/Publication.jsx +++ b/packages/sections/src/evidence/EuropePmc/Publication.jsx @@ -4,11 +4,7 @@ import { Box, Button, Typography } from "@mui/material"; import { makeStyles } from "@mui/styles"; import { PublicationSummaryLabel, SummaryLoader } from "ui"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faCircleNodes, - faCircleMinus, - faCirclePlus, -} from "@fortawesome/free-solid-svg-icons"; +import { faCircleNodes, faCircleMinus, faCirclePlus } from "@fortawesome/free-solid-svg-icons"; import { publicationSummaryQuery } from "../../utils/urls"; import config from "../../config"; @@ -17,7 +13,7 @@ import { naLabel } from "../../constants"; import SentenceMatch from "./SentenceMatch"; import SimplePublication from "../../common/Bibliography/SimplePublication"; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ abstractSpan: { whiteSpace: "normal", }, @@ -70,31 +66,31 @@ function Publication({ const { urlAiApi } = config; const handleShowAbstractClick = () => { - setShowAbstract((current) => !current); + setShowAbstract(current => !current); }; const handleShowMatchesClick = () => { - setShowMatches((current) => !current); + setShowMatches(current => !current); }; const handleShowSummaryClick = () => { - setShowSummary((current) => !current); + setShowSummary(current => !current); }; function requestSummary({ baseUrl, requestOptions }) { fetch(baseUrl, requestOptions) - .then((response) => { + .then(response => { if (response.ok) return response.json(); - return response.json().then((err) => { + return response.json().then(err => { throw new Error(err.error); }); }) - .then((data) => { + .then(data => { setSummaryText(data.text); setError(null); setLoading(false); }) - .catch((err) => { + .catch(err => { setError(err.message); setLoading(false); }); @@ -254,7 +250,7 @@ function Publication({ Matches
    - {textMiningSentences.map((match) => ( + {textMiningSentences.map(match => ( ))} diff --git a/packages/sections/src/evidence/EuropePmc/SentenceMatch.jsx b/packages/sections/src/evidence/EuropePmc/SentenceMatch.jsx index b9ed5dbdf..3b6d8f0ca 100644 --- a/packages/sections/src/evidence/EuropePmc/SentenceMatch.jsx +++ b/packages/sections/src/evidence/EuropePmc/SentenceMatch.jsx @@ -1,7 +1,7 @@ import { Box, Typography } from "@mui/material"; import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ matchInnerContainer: { background: `${theme.palette.grey[200]}`, marginLeft: ".5rem", @@ -22,14 +22,9 @@ const useStyles = makeStyles((theme) => ({ function SentenceMatch({ match }) { const classes = useStyles(); - const breaks = [ - match.dStart, - match.dEnd + 1, - match.tStart, - match.tEnd + 1, - ].sort((a, b) => a - b); + const breaks = [match.dStart, match.dEnd + 1, match.tStart, match.tEnd + 1].sort((a, b) => a - b); - const whichMatch = (index) => { + const whichMatch = index => { if (index === match.dStart) return classes.diseaseMark; if (index === match.tStart) return classes.targetMark; @@ -44,13 +39,9 @@ function SentenceMatch({ match }) { diff --git a/packages/sections/src/evidence/EuropePmc/Summary.jsx b/packages/sections/src/evidence/EuropePmc/Summary.jsx index c94e64051..6f3c26749 100644 --- a/packages/sections/src/evidence/EuropePmc/Summary.jsx +++ b/packages/sections/src/evidence/EuropePmc/Summary.jsx @@ -1,9 +1,8 @@ +import { SummaryItem, usePlatformApi } from "ui"; -import { SummaryItem, usePlatformApi } from 'ui'; - -import { definition } from '.'; -import { dataTypesMap } from '../../dataTypes'; -import EUROPE_PMC_SUMMARY_FRAGMENT from './EuropePmcSummaryFragment.gql'; +import { definition } from "."; +import { dataTypesMap } from "../../dataTypes"; +import EUROPE_PMC_SUMMARY_FRAGMENT from "./EuropePmcSummaryFragment.gql"; function Summary() { const request = usePlatformApi(EUROPE_PMC_SUMMARY_FRAGMENT); @@ -13,9 +12,7 @@ function Summary() { definition={definition} request={request} renderSummary={data => - `${data.europePmc.count} entr${ - data.europePmc.count === 1 ? 'y' : 'ies' - }` + `${data.europePmc.count} entr${data.europePmc.count === 1 ? "y" : "ies"}` } subText={dataTypesMap.literature} /> diff --git a/packages/sections/src/evidence/EuropePmc/index.js b/packages/sections/src/evidence/EuropePmc/index.js index 90c9a770c..0a8c8d3b2 100644 --- a/packages/sections/src/evidence/EuropePmc/index.js +++ b/packages/sections/src/evidence/EuropePmc/index.js @@ -5,6 +5,6 @@ export const definition = { id, name: "Europe PMC", shortName: "EP", - hasData: (data) => data.europePmc.count > 0, + hasData: data => data.europePmc.count > 0, isPrivate: isPrivateEvidenceSection(id), }; diff --git a/packages/sections/src/evidence/ExpressionAtlas/Description.jsx b/packages/sections/src/evidence/ExpressionAtlas/Description.jsx index c519975d5..e769403b9 100644 --- a/packages/sections/src/evidence/ExpressionAtlas/Description.jsx +++ b/packages/sections/src/evidence/ExpressionAtlas/Description.jsx @@ -4,8 +4,8 @@ function Description({ symbol, name }) { return ( <> Transcriptomic analysis reporting a significant differential expression of{" "} - {symbol} when comparing control samples with{" "} - {name} samples. Source:{" "} + {symbol} when comparing control samples with {name} samples. + Source:{" "} Expression Atlas diff --git a/packages/sections/src/evidence/Gene2Phenotype/Summary.jsx b/packages/sections/src/evidence/Gene2Phenotype/Summary.jsx index 0d41caa83..22795719d 100644 --- a/packages/sections/src/evidence/Gene2Phenotype/Summary.jsx +++ b/packages/sections/src/evidence/Gene2Phenotype/Summary.jsx @@ -11,10 +11,8 @@ function Summary() { - `${data.gene2Phenotype.count} entr${ - data.gene2Phenotype.count === 1 ? "y" : "ies" - }` + renderSummary={data => + `${data.gene2Phenotype.count} entr${data.gene2Phenotype.count === 1 ? "y" : "ies"}` } subText={dataTypesMap.genetic_association} /> diff --git a/packages/sections/src/evidence/Gene2Phenotype/index.js b/packages/sections/src/evidence/Gene2Phenotype/index.js index 8572bbe75..d6dd84a4e 100644 --- a/packages/sections/src/evidence/Gene2Phenotype/index.js +++ b/packages/sections/src/evidence/Gene2Phenotype/index.js @@ -1,10 +1,10 @@ -import { isPrivateEvidenceSection } from '../../utils/partnerPreviewUtils'; +import { isPrivateEvidenceSection } from "../../utils/partnerPreviewUtils"; -const id = 'gene2phenotype'; +const id = "gene2phenotype"; export const definition = { id, - name: 'Gene2Phenotype', - shortName: 'GP', + name: "Gene2Phenotype", + shortName: "GP", hasData: data => data.gene2Phenotype.count > 0, isPrivate: isPrivateEvidenceSection(id), }; diff --git a/packages/sections/src/evidence/GeneBurden/Description.jsx b/packages/sections/src/evidence/GeneBurden/Description.jsx index 18466e2f7..2eae888b3 100644 --- a/packages/sections/src/evidence/GeneBurden/Description.jsx +++ b/packages/sections/src/evidence/GeneBurden/Description.jsx @@ -1,19 +1,18 @@ import { Link } from "ui"; - function Description({ symbol, diseaseName }) { return ( <> - Gene burden analysis prioritising {symbol} as likely - causal gene for {diseaseName}. Source:{' '} + Gene burden analysis prioritising {symbol} as likely causal gene for{" "} + {diseaseName}. Source:{" "} GWAS Catalog - ,{' '} + ,{" "} AstraZeneca PheWAS Portal - ,{' '} + ,{" "} Genebass diff --git a/packages/sections/src/evidence/GeneBurden/Summary.jsx b/packages/sections/src/evidence/GeneBurden/Summary.jsx index e83704ee9..ed41bf2f5 100644 --- a/packages/sections/src/evidence/GeneBurden/Summary.jsx +++ b/packages/sections/src/evidence/GeneBurden/Summary.jsx @@ -1,9 +1,8 @@ +import { SummaryItem, usePlatformApi } from "ui"; -import { SummaryItem, usePlatformApi } from 'ui'; - -import { definition } from '.'; -import { dataTypesMap } from '../../dataTypes'; -import GENE_BURDEN_SUMMARY from './GeneBurdenSummary.gql'; +import { definition } from "."; +import { dataTypesMap } from "../../dataTypes"; +import GENE_BURDEN_SUMMARY from "./GeneBurdenSummary.gql"; function Summary() { const request = usePlatformApi(GENE_BURDEN_SUMMARY); @@ -14,7 +13,7 @@ function Summary() { request={request} renderSummary={({ geneBurdenSummary }) => { const { count } = geneBurdenSummary; - return `${count} ${count === 1 ? 'entry' : 'entries'}`; + return `${count} ${count === 1 ? "entry" : "entries"}`; }} subText={dataTypesMap.genetic_association} /> diff --git a/packages/sections/src/evidence/GeneBurden/index.js b/packages/sections/src/evidence/GeneBurden/index.js index 35d980d2c..4233a7b3c 100644 --- a/packages/sections/src/evidence/GeneBurden/index.js +++ b/packages/sections/src/evidence/GeneBurden/index.js @@ -1,10 +1,10 @@ -import { isPrivateEvidenceSection } from '../../utils/partnerPreviewUtils'; +import { isPrivateEvidenceSection } from "../../utils/partnerPreviewUtils"; -const id = 'gene_burden'; +const id = "gene_burden"; export const definition = { id, - name: 'Gene Burden', - shortName: 'GB', + name: "Gene Burden", + shortName: "GB", hasData: data => data.geneBurdenSummary.count > 0, isPrivate: isPrivateEvidenceSection(id), }; diff --git a/packages/sections/src/evidence/GenomicsEngland/Description.jsx b/packages/sections/src/evidence/GenomicsEngland/Description.jsx index 775c4d785..797c6bba9 100644 --- a/packages/sections/src/evidence/GenomicsEngland/Description.jsx +++ b/packages/sections/src/evidence/GenomicsEngland/Description.jsx @@ -3,9 +3,8 @@ import { Link } from "ui"; function Description({ symbol, name }) { return ( <> - Crowdsourced expert knowledge establishing consensus causation evidence - associating {symbol} with {name}. - Source:{" "} + Crowdsourced expert knowledge establishing consensus causation evidence associating{" "} + {symbol} with {name}. Source:{" "} Genomics England PanelApp diff --git a/packages/sections/src/evidence/GenomicsEngland/Summary.jsx b/packages/sections/src/evidence/GenomicsEngland/Summary.jsx index 099312979..8ceaaf618 100644 --- a/packages/sections/src/evidence/GenomicsEngland/Summary.jsx +++ b/packages/sections/src/evidence/GenomicsEngland/Summary.jsx @@ -11,10 +11,8 @@ function Summary() { - `${data.genomicsEngland.count} entr${ - data.genomicsEngland.count === 1 ? "y" : "ies" - }` + renderSummary={data => + `${data.genomicsEngland.count} entr${data.genomicsEngland.count === 1 ? "y" : "ies"}` } subText={dataTypesMap.genetic_association} /> diff --git a/packages/sections/src/evidence/GenomicsEngland/index.js b/packages/sections/src/evidence/GenomicsEngland/index.js index 1112dd448..246d37dbf 100644 --- a/packages/sections/src/evidence/GenomicsEngland/index.js +++ b/packages/sections/src/evidence/GenomicsEngland/index.js @@ -1,10 +1,10 @@ -import { isPrivateEvidenceSection } from '../../utils/partnerPreviewUtils'; +import { isPrivateEvidenceSection } from "../../utils/partnerPreviewUtils"; -const id = 'genomics_england'; +const id = "genomics_england"; export const definition = { id, - name: 'GEL PanelApp', - shortName: 'GE', + name: "GEL PanelApp", + shortName: "GE", hasData: data => data.genomicsEngland.count > 0, isPrivate: isPrivateEvidenceSection(id), }; diff --git a/packages/sections/src/evidence/Impc/Description.jsx b/packages/sections/src/evidence/Impc/Description.jsx index b7bb3e0fd..671ce4da3 100644 --- a/packages/sections/src/evidence/Impc/Description.jsx +++ b/packages/sections/src/evidence/Impc/Description.jsx @@ -3,8 +3,8 @@ import { Link } from "ui"; function Description({ symbol, name }) { return ( <> - Mapping of phenotypes in {symbol} animal model mutants - similar to {name}. Source:{' '} + Mapping of phenotypes in {symbol} animal model mutants similar to{" "} + {name}. Source:{" "} IMPC diff --git a/packages/sections/src/evidence/Impc/Summary.jsx b/packages/sections/src/evidence/Impc/Summary.jsx index 23726b996..ec08e60f4 100644 --- a/packages/sections/src/evidence/Impc/Summary.jsx +++ b/packages/sections/src/evidence/Impc/Summary.jsx @@ -11,9 +11,7 @@ function Summary() { - `${data.impc.count} entr${data.impc.count === 1 ? "y" : "ies"}` - } + renderSummary={data => `${data.impc.count} entr${data.impc.count === 1 ? "y" : "ies"}`} subText={dataTypesMap.animal_model} /> ); diff --git a/packages/sections/src/evidence/Impc/index.js b/packages/sections/src/evidence/Impc/index.js index 45e0daa25..37c8080e5 100644 --- a/packages/sections/src/evidence/Impc/index.js +++ b/packages/sections/src/evidence/Impc/index.js @@ -1,10 +1,10 @@ -import { isPrivateEvidenceSection } from '../../utils/partnerPreviewUtils'; +import { isPrivateEvidenceSection } from "../../utils/partnerPreviewUtils"; -const id = 'impc'; +const id = "impc"; export const definition = { id, - name: 'IMPC', - shortName: 'IM', + name: "IMPC", + shortName: "IM", hasData: data => data.impc.count > 0, isPrivate: isPrivateEvidenceSection(id), }; diff --git a/packages/sections/src/evidence/IntOgen/Description.jsx b/packages/sections/src/evidence/IntOgen/Description.jsx index 7cbbdecdb..066518dc3 100644 --- a/packages/sections/src/evidence/IntOgen/Description.jsx +++ b/packages/sections/src/evidence/IntOgen/Description.jsx @@ -3,9 +3,8 @@ import { Link } from "ui"; function Description({ symbol, name }) { return ( <> - Integrative analysis of large-scale mutation data pinpointing{' '} - {symbol} as driver gene in {name}. - Source:{' '} + Integrative analysis of large-scale mutation data pinpointing {symbol} as + driver gene in {name}. Source:{" "} IntOGen diff --git a/packages/sections/src/evidence/IntOgen/Summary.jsx b/packages/sections/src/evidence/IntOgen/Summary.jsx index 0be9c3603..6f29710cf 100644 --- a/packages/sections/src/evidence/IntOgen/Summary.jsx +++ b/packages/sections/src/evidence/IntOgen/Summary.jsx @@ -1,8 +1,8 @@ -import { SummaryItem, usePlatformApi } from 'ui'; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import { dataTypesMap } from '../../dataTypes'; -import INTOGEN_SUMMARY_FRAGMENT from './IntOgenSummaryQuery.gql'; +import { definition } from "."; +import { dataTypesMap } from "../../dataTypes"; +import INTOGEN_SUMMARY_FRAGMENT from "./IntOgenSummaryQuery.gql"; function Summary() { const request = usePlatformApi(INTOGEN_SUMMARY_FRAGMENT); @@ -11,9 +11,7 @@ function Summary() { - `${data.intOgen.count} entr${data.intOgen.count === 1 ? 'y' : 'ies'}` - } + renderSummary={data => `${data.intOgen.count} entr${data.intOgen.count === 1 ? "y" : "ies"}`} subText={dataTypesMap.somatic_mutation} /> ); diff --git a/packages/sections/src/evidence/IntOgen/index.js b/packages/sections/src/evidence/IntOgen/index.js index 65d7c5667..e98ccdd09 100644 --- a/packages/sections/src/evidence/IntOgen/index.js +++ b/packages/sections/src/evidence/IntOgen/index.js @@ -1,10 +1,10 @@ -import { isPrivateEvidenceSection } from '../../utils/partnerPreviewUtils'; +import { isPrivateEvidenceSection } from "../../utils/partnerPreviewUtils"; -const id = 'intogen'; +const id = "intogen"; export const definition = { id, - name: 'IntOGen', - shortName: 'IO', + name: "IntOGen", + shortName: "IO", hasData: data => data.intOgen.count > 0, isPrivate: isPrivateEvidenceSection(id), }; diff --git a/packages/sections/src/evidence/IntOgen/methods.js b/packages/sections/src/evidence/IntOgen/methods.js index a34d95893..8a76fa2a8 100644 --- a/packages/sections/src/evidence/IntOgen/methods.js +++ b/packages/sections/src/evidence/IntOgen/methods.js @@ -1,47 +1,43 @@ const methods = { columnTooltip: { description: - 'The current version of the intOGen pipeline uses seven methods to identify cancer driver genes from somatic point mutations - HotMAPS, dNDScv, smRegions, CBaSE, FML, MutPanning, and CLUSTL. The pipeline also uses a combination of methods. For further information on the methods, please click here visit the intOGen FAQ.', - url: 'https://www.intogen.org/faq', + "The current version of the intOGen pipeline uses seven methods to identify cancer driver genes from somatic point mutations - HotMAPS, dNDScv, smRegions, CBaSE, FML, MutPanning, and CLUSTL. The pipeline also uses a combination of methods. For further information on the methods, please click here visit the intOGen FAQ.", + url: "https://www.intogen.org/faq", }, hotmaps: { - id: 'HotMAPS', - description: - 'Somatic mutations in the gene are significantly clustered according to HotMAPS', + id: "HotMAPS", + description: "Somatic mutations in the gene are significantly clustered according to HotMAPS", }, oncodriveclustl: { - id: 'ClustL', + id: "ClustL", description: - 'Somatic mutations in the gene are significantly clustered according to OncodriveCLUSTL', + "Somatic mutations in the gene are significantly clustered according to OncodriveCLUSTL", }, smregions: { - id: 'smRegions', - description: - 'Somatic mutations in the gene are significantly clustered according to smRegions', + id: "smRegions", + description: "Somatic mutations in the gene are significantly clustered according to smRegions", }, cbase: { - id: 'CBaSE', - description: - 'Genes more mutated than the background neutral mutation rate according to CBaSE', + id: "CBaSE", + description: "Genes more mutated than the background neutral mutation rate according to CBaSE", }, dndscv: { - id: 'dNdScv', - description: - 'Genes more mutated than the background neutral mutation rate according to dNdScv', + id: "dNdScv", + description: "Genes more mutated than the background neutral mutation rate according to dNdScv", }, oncodrivefml: { - id: 'FML', + id: "FML", description: - 'Somatic mutations in the gene show a functional impact bias according to OncodriveFML', + "Somatic mutations in the gene show a functional impact bias according to OncodriveFML", }, combination: { - id: 'combination', - description: 'The combination reports this gene as significant', + id: "combination", + description: "The combination reports this gene as significant", }, mutpanning: { - id: 'MutPanning', + id: "MutPanning", description: - 'MutPanning is designed to detect rare cancer driver genes from aggregated whole-exome sequencing data', + "MutPanning is designed to detect rare cancer driver genes from aggregated whole-exome sequencing data", }, }; diff --git a/packages/sections/src/evidence/OTCRISPR/Description.jsx b/packages/sections/src/evidence/OTCRISPR/Description.jsx index 820b154c0..833919a24 100644 --- a/packages/sections/src/evidence/OTCRISPR/Description.jsx +++ b/packages/sections/src/evidence/OTCRISPR/Description.jsx @@ -3,9 +3,8 @@ import { Link } from "ui"; function Description({ symbol, name, data }) { return ( <> - Prepublication CRISPR knockout screens from Open Targets (OTAR) - experimental projects, associating {symbol} and{" "} - {name}. Source:{" "} + Prepublication CRISPR knockout screens from Open Targets (OTAR) experimental projects, + associating {symbol} and {name}. Source:{" "} {data && ( { const { count } = OtCrisprSummary; - return `${count} ${count === 1 ? 'entry' : 'entries'}`; + return `${count} ${count === 1 ? "entry" : "entries"}`; }} subText={dataTypesMap.ot_partner} /> diff --git a/packages/sections/src/evidence/OTCRISPR/index.js b/packages/sections/src/evidence/OTCRISPR/index.js index 140928b24..603a210c1 100644 --- a/packages/sections/src/evidence/OTCRISPR/index.js +++ b/packages/sections/src/evidence/OTCRISPR/index.js @@ -1,11 +1,10 @@ -import { isPrivateEvidenceSection } from '../../utils/partnerPreviewUtils'; +import { isPrivateEvidenceSection } from "../../utils/partnerPreviewUtils"; -const id = 'ot_crispr'; +const id = "ot_crispr"; export const definition = { id, - name: 'Open Targets CRISPR', - shortName: 'OT', + name: "Open Targets CRISPR", + shortName: "OT", hasData: ({ OtCrisprSummary }) => OtCrisprSummary.count > 0, isPrivate: isPrivateEvidenceSection(id), }; - diff --git a/packages/sections/src/evidence/OTEncore/Description.jsx b/packages/sections/src/evidence/OTEncore/Description.jsx index bea6672fa..ca0116a63 100644 --- a/packages/sections/src/evidence/OTEncore/Description.jsx +++ b/packages/sections/src/evidence/OTEncore/Description.jsx @@ -7,12 +7,8 @@ function Description({ symbol, name }) { OTAR2-062 ENCORE project - , associating {symbol} and {name}. - Source:{" "} - + , associating {symbol} and {name}. Source:{" "} + Open Targets OTAR2062 diff --git a/packages/sections/src/evidence/OTEncore/index.js b/packages/sections/src/evidence/OTEncore/index.js index 89d02dfda..c49c3daa5 100644 --- a/packages/sections/src/evidence/OTEncore/index.js +++ b/packages/sections/src/evidence/OTEncore/index.js @@ -1,10 +1,10 @@ -import { isPrivateEvidenceSection } from '../../utils/partnerPreviewUtils'; +import { isPrivateEvidenceSection } from "../../utils/partnerPreviewUtils"; -const id = 'encore'; +const id = "encore"; export const definition = { id, - name: 'Open Targets ENCORE', - shortName: 'OT', + name: "Open Targets ENCORE", + shortName: "OT", hasData: ({ otEncoreSummary }) => otEncoreSummary.count > 0, isPrivate: isPrivateEvidenceSection(id), }; diff --git a/packages/sections/src/evidence/OTGenetics/Description.jsx b/packages/sections/src/evidence/OTGenetics/Description.jsx index afb6aadb6..a6da91b9a 100644 --- a/packages/sections/src/evidence/OTGenetics/Description.jsx +++ b/packages/sections/src/evidence/OTGenetics/Description.jsx @@ -1,11 +1,11 @@ -import { Link } from 'ui'; -import config from '../../config'; +import { Link } from "ui"; +import config from "../../config"; function Description({ symbol, name }) { return ( <> - Genome-wide associated loci prioritisating {symbol} as - likely causal gene for {name}. Source:{' '} + Genome-wide associated loci prioritisating {symbol} as likely causal gene for{" "} + {name}. Source:{" "} Open Targets Genetics diff --git a/packages/sections/src/evidence/OTGenetics/Summary.jsx b/packages/sections/src/evidence/OTGenetics/Summary.jsx index 6fc386ef3..54d202f84 100644 --- a/packages/sections/src/evidence/OTGenetics/Summary.jsx +++ b/packages/sections/src/evidence/OTGenetics/Summary.jsx @@ -1,8 +1,8 @@ -import { SummaryItem, usePlatformApi } from 'ui'; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import { dataTypesMap } from '../../dataTypes'; -import OPEN_TARGETS_GENETICS_SUMMARY_FRAGMENT from './OpenTargetsGeneticsSummary.gql'; +import { definition } from "."; +import { dataTypesMap } from "../../dataTypes"; +import OPEN_TARGETS_GENETICS_SUMMARY_FRAGMENT from "./OpenTargetsGeneticsSummary.gql"; function Summary() { const request = usePlatformApi(OPEN_TARGETS_GENETICS_SUMMARY_FRAGMENT); @@ -13,7 +13,7 @@ function Summary() { request={request} renderSummary={data => `${data.openTargetsGenetics.count} entr${ - data.openTargetsGenetics.count === 1 ? 'y' : 'ies' + data.openTargetsGenetics.count === 1 ? "y" : "ies" }` } subText={dataTypesMap.genetic_association} diff --git a/packages/sections/src/evidence/OTGenetics/index.js b/packages/sections/src/evidence/OTGenetics/index.js index c8ed6277d..ac0392499 100644 --- a/packages/sections/src/evidence/OTGenetics/index.js +++ b/packages/sections/src/evidence/OTGenetics/index.js @@ -1,10 +1,10 @@ -import { isPrivateEvidenceSection } from '../../utils/partnerPreviewUtils'; +import { isPrivateEvidenceSection } from "../../utils/partnerPreviewUtils"; -const id = 'ot_genetics_portal'; +const id = "ot_genetics_portal"; export const definition = { id, - name: 'Open Targets Genetics', - shortName: 'OG', + name: "Open Targets Genetics", + shortName: "OG", hasData: data => data.openTargetsGenetics.count > 0, isPrivate: isPrivateEvidenceSection(id), }; diff --git a/packages/sections/src/evidence/OTValidation/Description.jsx b/packages/sections/src/evidence/OTValidation/Description.jsx index e5d15e226..71902a318 100644 --- a/packages/sections/src/evidence/OTValidation/Description.jsx +++ b/packages/sections/src/evidence/OTValidation/Description.jsx @@ -3,10 +3,10 @@ import { Link } from "ui"; function Description({ symbol, name }) { return ( <> - Data generated for targets identified in selected OTAR primary projects - and have undergone independent prioritisation and orthogonal experimental - validation in the Open Targets Validation Lab (OTVL), associating{' '} - {symbol} and {name}. Source:{' '} + Data generated for targets identified in selected OTAR primary projects and have undergone + independent prioritisation and orthogonal experimental validation in the Open Targets + Validation Lab (OTVL), associating {symbol} and {name}. + Source:{" "} Open Targets Validation Lab diff --git a/packages/sections/src/evidence/OTValidation/Summary.jsx b/packages/sections/src/evidence/OTValidation/Summary.jsx index 458e7795e..50e7734cc 100644 --- a/packages/sections/src/evidence/OTValidation/Summary.jsx +++ b/packages/sections/src/evidence/OTValidation/Summary.jsx @@ -1,8 +1,8 @@ -import { SummaryItem, usePlatformApi } from 'ui'; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import { dataTypesMap } from '../../dataTypes'; -import OT_VALIDATION_SUMMARY from './OTValidationSummary.gql'; +import { definition } from "."; +import { dataTypesMap } from "../../dataTypes"; +import OT_VALIDATION_SUMMARY from "./OTValidationSummary.gql"; function Summary() { const request = usePlatformApi(OT_VALIDATION_SUMMARY); @@ -13,7 +13,7 @@ function Summary() { request={request} renderSummary={({ otValidationSummary }) => { const { count } = otValidationSummary; - return `${count} ${count === 1 ? 'entry' : 'entries'}`; + return `${count} ${count === 1 ? "entry" : "entries"}`; }} subText={dataTypesMap.ot_validation_lab} /> diff --git a/packages/sections/src/evidence/OTValidation/index.js b/packages/sections/src/evidence/OTValidation/index.js index 4fcd79855..061619685 100644 --- a/packages/sections/src/evidence/OTValidation/index.js +++ b/packages/sections/src/evidence/OTValidation/index.js @@ -1,10 +1,10 @@ -import { isPrivateEvidenceSection } from '../../utils/partnerPreviewUtils'; +import { isPrivateEvidenceSection } from "../../utils/partnerPreviewUtils"; -const id = 'ot_crispr_validation'; +const id = "ot_crispr_validation"; export const definition = { id, - name: 'Open Targets Validation CRISPR', - shortName: 'VL', + name: "Open Targets Validation CRISPR", + shortName: "VL", hasData: ({ otValidationSummary }) => otValidationSummary.count > 0, isPrivate: isPrivateEvidenceSection(id), }; diff --git a/packages/sections/src/evidence/Orphanet/Description.jsx b/packages/sections/src/evidence/Orphanet/Description.jsx index dc7e4236a..75dc9215e 100644 --- a/packages/sections/src/evidence/Orphanet/Description.jsx +++ b/packages/sections/src/evidence/Orphanet/Description.jsx @@ -3,12 +3,9 @@ import { Link } from "ui"; function Description({ symbol, diseaseName }) { return ( <> - Expert-reviewed data supporting the relationship between{' '} - {symbol} and {diseaseName}. Source:{' '} - + Expert-reviewed data supporting the relationship between {symbol} and{" "} + {diseaseName}. Source:{" "} + Orphanet diff --git a/packages/sections/src/evidence/Orphanet/Summary.jsx b/packages/sections/src/evidence/Orphanet/Summary.jsx index ebf3f0f32..5c4b9fecf 100644 --- a/packages/sections/src/evidence/Orphanet/Summary.jsx +++ b/packages/sections/src/evidence/Orphanet/Summary.jsx @@ -1,8 +1,8 @@ -import { SummaryItem, usePlatformApi } from 'ui'; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import { dataTypesMap } from '../../dataTypes'; -import ORPHANET_SUMMARY from './OrphanetSummaryFragment.gql'; +import { definition } from "."; +import { dataTypesMap } from "../../dataTypes"; +import ORPHANET_SUMMARY from "./OrphanetSummaryFragment.gql"; function Summary() { const request = usePlatformApi(ORPHANET_SUMMARY); @@ -12,7 +12,7 @@ function Summary() { request={request} renderSummary={({ orphanetSummary }) => { const { count } = orphanetSummary; - return `${count} ${count === 1 ? 'entry' : 'entries'}`; + return `${count} ${count === 1 ? "entry" : "entries"}`; }} subText={dataTypesMap.genetic_association} /> diff --git a/packages/sections/src/evidence/Orphanet/index.js b/packages/sections/src/evidence/Orphanet/index.js index 86fec0076..33df2edf2 100644 --- a/packages/sections/src/evidence/Orphanet/index.js +++ b/packages/sections/src/evidence/Orphanet/index.js @@ -1,11 +1,10 @@ -import { isPrivateEvidenceSection } from '../../utils/partnerPreviewUtils'; +import { isPrivateEvidenceSection } from "../../utils/partnerPreviewUtils"; -const id = 'orphanet'; +const id = "orphanet"; export const definition = { id, - name: 'Orphanet', - shortName: 'ON', + name: "Orphanet", + shortName: "ON", hasData: data => data.orphanetSummary.count > 0, isPrivate: isPrivateEvidenceSection(id), }; - diff --git a/packages/sections/src/evidence/Progeny/Description.jsx b/packages/sections/src/evidence/Progeny/Description.jsx index a3fea9ccd..8c22239b8 100644 --- a/packages/sections/src/evidence/Progeny/Description.jsx +++ b/packages/sections/src/evidence/Progeny/Description.jsx @@ -3,9 +3,8 @@ import { Link } from "ui"; function Description({ symbol, name }) { return ( <> - Pathway-level analysis of gene expression perturbation experiments - associating {symbol} with {name}. - Source:{' '} + Pathway-level analysis of gene expression perturbation experiments associating{" "} + {symbol} with {name}. Source:{" "} PROGENy diff --git a/packages/sections/src/evidence/Progeny/Summary.jsx b/packages/sections/src/evidence/Progeny/Summary.jsx index 1835b8900..9a5c31929 100644 --- a/packages/sections/src/evidence/Progeny/Summary.jsx +++ b/packages/sections/src/evidence/Progeny/Summary.jsx @@ -1,8 +1,8 @@ -import { SummaryItem, usePlatformApi } from 'ui'; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import { dataTypesMap } from '../../dataTypes'; -import PROGENY_SUMMARY_FRAGMENT from './ProgenySummaryFragment.gql'; +import { definition } from "."; +import { dataTypesMap } from "../../dataTypes"; +import PROGENY_SUMMARY_FRAGMENT from "./ProgenySummaryFragment.gql"; function Summary() { const request = usePlatformApi(PROGENY_SUMMARY_FRAGMENT); @@ -11,9 +11,7 @@ function Summary() { - `${data.progeny.count} entr${data.progeny.count === 1 ? 'y' : 'ies'}` - } + renderSummary={data => `${data.progeny.count} entr${data.progeny.count === 1 ? "y" : "ies"}`} subText={dataTypesMap.affected_pathway} /> ); diff --git a/packages/sections/src/evidence/Progeny/index.js b/packages/sections/src/evidence/Progeny/index.js index b9c4a5303..fb9f10ff5 100644 --- a/packages/sections/src/evidence/Progeny/index.js +++ b/packages/sections/src/evidence/Progeny/index.js @@ -1,10 +1,10 @@ -import { isPrivateEvidenceSection } from '../../utils/partnerPreviewUtils'; +import { isPrivateEvidenceSection } from "../../utils/partnerPreviewUtils"; -const id = 'progeny'; +const id = "progeny"; export const definition = { id, - name: 'PROGENy', - shortName: 'PY', + name: "PROGENy", + shortName: "PY", hasData: data => data.progeny.count > 0, isPrivate: isPrivateEvidenceSection(id), }; diff --git a/packages/sections/src/evidence/Reactome/Description.jsx b/packages/sections/src/evidence/Reactome/Description.jsx index b9ae987d7..f1ea4da9b 100644 --- a/packages/sections/src/evidence/Reactome/Description.jsx +++ b/packages/sections/src/evidence/Reactome/Description.jsx @@ -3,10 +3,9 @@ import { Link } from "ui"; function Description({ symbol, name }) { return ( <> - Literature-curated list of pathway reactions affected by genetic - alterations or changes in gene expression that lead to disregulation of{' '} - {symbol} in the context of {name}. - Source:  + Literature-curated list of pathway reactions affected by genetic alterations or changes in + gene expression that lead to disregulation of {symbol} in the context of{" "} + {name}. Source:  Reactome diff --git a/packages/sections/src/evidence/Reactome/Summary.jsx b/packages/sections/src/evidence/Reactome/Summary.jsx index 394e54173..d9fb7d8e5 100644 --- a/packages/sections/src/evidence/Reactome/Summary.jsx +++ b/packages/sections/src/evidence/Reactome/Summary.jsx @@ -1,8 +1,8 @@ -import { SummaryItem, usePlatformApi } from 'ui'; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import { dataTypesMap } from '../../dataTypes'; -import REACTOME_SUMMARY from './ReactomeSummary.gql'; +import { definition } from "."; +import { dataTypesMap } from "../../dataTypes"; +import REACTOME_SUMMARY from "./ReactomeSummary.gql"; function Summary() { const request = usePlatformApi(REACTOME_SUMMARY); @@ -12,7 +12,7 @@ function Summary() { request={request} renderSummary={({ reactomeSummary }) => { const { count } = reactomeSummary; - return `${count} ${count === 1 ? 'entry' : 'entries'}`; + return `${count} ${count === 1 ? "entry" : "entries"}`; }} subText={dataTypesMap.affected_pathway} /> diff --git a/packages/sections/src/evidence/Reactome/index.js b/packages/sections/src/evidence/Reactome/index.js index 95358f7ce..4d541c001 100644 --- a/packages/sections/src/evidence/Reactome/index.js +++ b/packages/sections/src/evidence/Reactome/index.js @@ -1,10 +1,10 @@ -import { isPrivateEvidenceSection } from '../../utils/partnerPreviewUtils'; +import { isPrivateEvidenceSection } from "../../utils/partnerPreviewUtils"; -const id = 'reactome'; +const id = "reactome"; export const definition = { id, - name: 'Reactome', - shortName: 'RT', + name: "Reactome", + shortName: "RT", hasData: ({ reactomeSummary }) => reactomeSummary.count > 0, isPrivate: isPrivateEvidenceSection(id), }; diff --git a/packages/sections/src/evidence/SlapEnrich/Description.jsx b/packages/sections/src/evidence/SlapEnrich/Description.jsx index af8f207bb..f744fdab0 100644 --- a/packages/sections/src/evidence/SlapEnrich/Description.jsx +++ b/packages/sections/src/evidence/SlapEnrich/Description.jsx @@ -3,9 +3,8 @@ import { Link } from "ui"; function Description({ symbol, name }) { return ( <> - Pathway-level analysis tool providing enrichment on genomic alterations - associating {symbol} with {name}. - Source:{' '} + Pathway-level analysis tool providing enrichment on genomic alterations associating{" "} + {symbol} with {name}. Source:{" "} SLAPenrich diff --git a/packages/sections/src/evidence/SlapEnrich/Summary.jsx b/packages/sections/src/evidence/SlapEnrich/Summary.jsx index 766752cd9..00627ffee 100644 --- a/packages/sections/src/evidence/SlapEnrich/Summary.jsx +++ b/packages/sections/src/evidence/SlapEnrich/Summary.jsx @@ -1,8 +1,8 @@ -import { SummaryItem, usePlatformApi } from 'ui'; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import { dataTypesMap } from '../../dataTypes'; -import SLAPENRICH_SUMMARY_FRAGMENT from './SlapEnrichSummaryFragment.gql'; +import { definition } from "."; +import { dataTypesMap } from "../../dataTypes"; +import SLAPENRICH_SUMMARY_FRAGMENT from "./SlapEnrichSummaryFragment.gql"; function Summary() { const request = usePlatformApi(SLAPENRICH_SUMMARY_FRAGMENT); @@ -12,9 +12,7 @@ function Summary() { definition={definition} request={request} renderSummary={data => - `${data.slapEnrich.count} entr${ - data.slapEnrich.count === 1 ? 'y' : 'ies' - }` + `${data.slapEnrich.count} entr${data.slapEnrich.count === 1 ? "y" : "ies"}` } subText={dataTypesMap.affected_pathway} /> diff --git a/packages/sections/src/evidence/SlapEnrich/index.js b/packages/sections/src/evidence/SlapEnrich/index.js index 140f0d99d..dab9cff98 100644 --- a/packages/sections/src/evidence/SlapEnrich/index.js +++ b/packages/sections/src/evidence/SlapEnrich/index.js @@ -1,11 +1,10 @@ -import { isPrivateEvidenceSection } from '../../utils/partnerPreviewUtils'; +import { isPrivateEvidenceSection } from "../../utils/partnerPreviewUtils"; -const id = 'slapenrich'; +const id = "slapenrich"; export const definition = { id, - name: 'SLAPenrich', - shortName: 'SE', + name: "SLAPenrich", + shortName: "SE", hasData: data => data.slapEnrich.count > 0, isPrivate: isPrivateEvidenceSection(id), }; - diff --git a/packages/sections/src/evidence/SysBio/Description.jsx b/packages/sections/src/evidence/SysBio/Description.jsx index 1d3812554..3b5d55219 100644 --- a/packages/sections/src/evidence/SysBio/Description.jsx +++ b/packages/sections/src/evidence/SysBio/Description.jsx @@ -3,12 +3,9 @@ import { Link } from "ui"; function Description({ symbol, name }) { return ( <> - Literature-reported analysis defining gene signatures causally associating{' '} - {symbol} with {name}. Source:{' '} - + Literature-reported analysis defining gene signatures causally associating{" "} + {symbol} with {name}. Source:{" "} + Open Targets diff --git a/packages/sections/src/evidence/SysBio/Summary.jsx b/packages/sections/src/evidence/SysBio/Summary.jsx index 5eb4bf234..e70e95310 100644 --- a/packages/sections/src/evidence/SysBio/Summary.jsx +++ b/packages/sections/src/evidence/SysBio/Summary.jsx @@ -1,8 +1,8 @@ -import { SummaryItem, usePlatformApi } from 'ui'; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import { dataTypesMap } from '../../dataTypes'; -import SYSBIO_SUMMARY_FRAGMENT from './SysBioSummaryFragment.gql'; +import { definition } from "."; +import { dataTypesMap } from "../../dataTypes"; +import SYSBIO_SUMMARY_FRAGMENT from "./SysBioSummaryFragment.gql"; function Summary() { const request = usePlatformApi(SYSBIO_SUMMARY_FRAGMENT); @@ -11,9 +11,7 @@ function Summary() { - `${data.sysBio.count} entr${data.sysBio.count === 1 ? 'y' : 'ies'}` - } + renderSummary={data => `${data.sysBio.count} entr${data.sysBio.count === 1 ? "y" : "ies"}`} subText={dataTypesMap.affected_pathway} /> ); diff --git a/packages/sections/src/evidence/SysBio/index.js b/packages/sections/src/evidence/SysBio/index.js index 96bcb3034..acbe26e2f 100644 --- a/packages/sections/src/evidence/SysBio/index.js +++ b/packages/sections/src/evidence/SysBio/index.js @@ -1,10 +1,10 @@ -import { isPrivateEvidenceSection } from '../../utils/partnerPreviewUtils'; +import { isPrivateEvidenceSection } from "../../utils/partnerPreviewUtils"; -const id = 'sysbio'; +const id = "sysbio"; export const definition = { id, - name: 'Gene signatures', - shortName: 'GS', + name: "Gene signatures", + shortName: "GS", hasData: data => data.sysBio.count > 0, isPrivate: isPrivateEvidenceSection(id), }; diff --git a/packages/sections/src/evidence/UniProtLiterature/Description.jsx b/packages/sections/src/evidence/UniProtLiterature/Description.jsx index 8192805be..26093ef59 100644 --- a/packages/sections/src/evidence/UniProtLiterature/Description.jsx +++ b/packages/sections/src/evidence/UniProtLiterature/Description.jsx @@ -3,9 +3,8 @@ import { Link } from "ui"; function Description({ symbol, diseaseName }) { return ( <> - Literature-based curation associating genetic variations affecting{' '} - {symbol} protein products with{' '} - {diseaseName}. Source:{' '} + Literature-based curation associating genetic variations affecting {symbol}{" "} + protein products with {diseaseName}. Source:{" "} UniProt diff --git a/packages/sections/src/evidence/UniProtLiterature/Summary.jsx b/packages/sections/src/evidence/UniProtLiterature/Summary.jsx index 3bcdddf46..02aaaceec 100644 --- a/packages/sections/src/evidence/UniProtLiterature/Summary.jsx +++ b/packages/sections/src/evidence/UniProtLiterature/Summary.jsx @@ -1,7 +1,8 @@ -import { SummaryItem, usePlatformApi } from 'ui'; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import { dataTypesMap } from '../../dataTypes';import UNIPROT_LITERATURE_SUMMARY from './UniprotLiteratureSummary.gql'; +import { definition } from "."; +import { dataTypesMap } from "../../dataTypes"; +import UNIPROT_LITERATURE_SUMMARY from "./UniprotLiteratureSummary.gql"; function Summary() { const request = usePlatformApi(UNIPROT_LITERATURE_SUMMARY); @@ -11,7 +12,7 @@ function Summary() { request={request} renderSummary={({ uniprotLiteratureSummary }) => { const { count } = uniprotLiteratureSummary; - return `${count} ${count === 1 ? 'entry' : 'entries'}`; + return `${count} ${count === 1 ? "entry" : "entries"}`; }} subText={dataTypesMap.genetic_association} /> diff --git a/packages/sections/src/evidence/UniProtLiterature/index.js b/packages/sections/src/evidence/UniProtLiterature/index.js index 691466f89..19e32bc87 100644 --- a/packages/sections/src/evidence/UniProtLiterature/index.js +++ b/packages/sections/src/evidence/UniProtLiterature/index.js @@ -1,10 +1,10 @@ -import { isPrivateEvidenceSection } from '../../utils/partnerPreviewUtils'; +import { isPrivateEvidenceSection } from "../../utils/partnerPreviewUtils"; -const id = 'uniprot_literature'; +const id = "uniprot_literature"; export const definition = { id, - name: 'UniProt literature', - shortName: 'UL', + name: "UniProt literature", + shortName: "UL", hasData: ({ uniprotLiteratureSummary }) => uniprotLiteratureSummary.count > 0, isPrivate: isPrivateEvidenceSection(id), }; diff --git a/packages/sections/src/evidence/UniProtVariants/Description.jsx b/packages/sections/src/evidence/UniProtVariants/Description.jsx index 8192805be..26093ef59 100644 --- a/packages/sections/src/evidence/UniProtVariants/Description.jsx +++ b/packages/sections/src/evidence/UniProtVariants/Description.jsx @@ -3,9 +3,8 @@ import { Link } from "ui"; function Description({ symbol, diseaseName }) { return ( <> - Literature-based curation associating genetic variations affecting{' '} - {symbol} protein products with{' '} - {diseaseName}. Source:{' '} + Literature-based curation associating genetic variations affecting {symbol}{" "} + protein products with {diseaseName}. Source:{" "} UniProt diff --git a/packages/sections/src/evidence/UniProtVariants/Summary.jsx b/packages/sections/src/evidence/UniProtVariants/Summary.jsx index 38acb8116..c3a5c7ee7 100644 --- a/packages/sections/src/evidence/UniProtVariants/Summary.jsx +++ b/packages/sections/src/evidence/UniProtVariants/Summary.jsx @@ -1,7 +1,8 @@ -import { SummaryItem, usePlatformApi } from 'ui'; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import { dataTypesMap } from '../../dataTypes';import UNIPROT_VARIANTS_SUMMARY from './UniprotVariantsSummaryQuery.gql'; +import { definition } from "."; +import { dataTypesMap } from "../../dataTypes"; +import UNIPROT_VARIANTS_SUMMARY from "./UniprotVariantsSummaryQuery.gql"; function Summary() { const request = usePlatformApi(UNIPROT_VARIANTS_SUMMARY); @@ -11,7 +12,7 @@ function Summary() { request={request} renderSummary={({ uniprotVariantsSummary }) => { const { count } = uniprotVariantsSummary; - return `${count} ${count === 1 ? 'entry' : 'entries'}`; + return `${count} ${count === 1 ? "entry" : "entries"}`; }} subText={dataTypesMap.genetic_association} /> diff --git a/packages/sections/src/evidence/UniProtVariants/index.js b/packages/sections/src/evidence/UniProtVariants/index.js index d741251e2..3cbf7379a 100644 --- a/packages/sections/src/evidence/UniProtVariants/index.js +++ b/packages/sections/src/evidence/UniProtVariants/index.js @@ -1,10 +1,10 @@ -import { isPrivateEvidenceSection } from '../../utils/partnerPreviewUtils'; +import { isPrivateEvidenceSection } from "../../utils/partnerPreviewUtils"; -const id = 'uniprot_variants'; +const id = "uniprot_variants"; export const definition = { id, - name: 'UniProt variants', - shortName: 'UV', + name: "UniProt variants", + shortName: "UV", hasData: data => data.uniprotVariantsSummary.count > 0, isPrivate: isPrivateEvidenceSection(id), }; diff --git a/packages/sections/src/target/Bibliography/Body.jsx b/packages/sections/src/target/Bibliography/Body.jsx index 48fb895a7..ca466edb3 100644 --- a/packages/sections/src/target/Bibliography/Body.jsx +++ b/packages/sections/src/target/Bibliography/Body.jsx @@ -1,6 +1,6 @@ -import { Body as Bibliography } from '../../common/Literature'; -import { definition } from '.'; -import TARGET_LITERATURE_OCURRENCES from './SimilarEntities.gql'; +import { Body as Bibliography } from "../../common/Literature"; +import { definition } from "."; +import TARGET_LITERATURE_OCURRENCES from "./SimilarEntities.gql"; function Body({ id, label: name, entity }) { return ( diff --git a/packages/sections/src/target/Bibliography/Description.jsx b/packages/sections/src/target/Bibliography/Description.jsx index 722645b28..afd67b955 100644 --- a/packages/sections/src/target/Bibliography/Description.jsx +++ b/packages/sections/src/target/Bibliography/Description.jsx @@ -1,12 +1,12 @@ import { Link } from "ui"; -const url = 'http://platform-docs.opentargets.org/bibliography'; +const url = "http://platform-docs.opentargets.org/bibliography"; function Description({ name }) { return ( <> - Scientific literature mentioning NLP-recognised entity{' '} - {name} and other selected co-occurring entities. Source:{' '} + Scientific literature mentioning NLP-recognised entity {name} and other + selected co-occurring entities. Source:{" "} Open Targets diff --git a/packages/sections/src/target/Bibliography/Summary.jsx b/packages/sections/src/target/Bibliography/Summary.jsx index 88b7b6225..3d0a1f676 100644 --- a/packages/sections/src/target/Bibliography/Summary.jsx +++ b/packages/sections/src/target/Bibliography/Summary.jsx @@ -1,7 +1,7 @@ -import { SummaryItem, usePlatformApi } from 'ui'; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import SIMILARENTTIES_SUMMARY_FRAGMENT from './SimilarEntitiesSummary.gql'; +import { definition } from "."; +import SIMILARENTTIES_SUMMARY_FRAGMENT from "./SimilarEntitiesSummary.gql"; function Summary() { const request = usePlatformApi(SIMILARENTTIES_SUMMARY_FRAGMENT); @@ -14,7 +14,7 @@ function Summary() { data.literatureOcurrences?.count > 0 ? ( <> {data.literatureOcurrences.count.toLocaleString()} publication - {data.literatureOcurrences.count === 1 ? '' : 's'} + {data.literatureOcurrences.count === 1 ? "" : "s"} ) : ( <>no data diff --git a/packages/sections/src/target/Bibliography/index.js b/packages/sections/src/target/Bibliography/index.js index 079ef4ec8..d3eabcab8 100644 --- a/packages/sections/src/target/Bibliography/index.js +++ b/packages/sections/src/target/Bibliography/index.js @@ -1,6 +1,6 @@ export const definition = { - id: 'bibliography', - name: 'Bibliography', - shortName: 'B', + id: "bibliography", + name: "Bibliography", + shortName: "B", hasData: data => data.literatureOcurrences?.count > 0, }; diff --git a/packages/sections/src/target/CancerHallmarks/Body.jsx b/packages/sections/src/target/CancerHallmarks/Body.jsx index 65e680a57..df75c4e01 100644 --- a/packages/sections/src/target/CancerHallmarks/Body.jsx +++ b/packages/sections/src/target/CancerHallmarks/Body.jsx @@ -13,19 +13,19 @@ const columns = [ { id: "label", label: "Hallmark", - renderCell: (row) => row.label, + renderCell: row => row.label, exportLabel: "Hallmark", }, { id: "activity", label: "Effect", - renderCell: (row) => row.activity, + renderCell: row => row.activity, exportLabel: "Effect", }, { id: "description", label: "Description", - renderCell: (row) => row.description, + renderCell: row => row.description, exportLabel: "Description", }, { @@ -43,7 +43,7 @@ const columns = [ /> ), exportLabel: "Literature (PubMed id)", - exportValue: (row) => row.pmid, + exportValue: row => row.pmid, }, ]; @@ -67,14 +67,14 @@ function Section({ id, label: symbol, entity }) { entity={entity} request={request} renderDescription={() => } - renderBody={(data) => { + renderBody={data => { const roleInCancer = data.target.hallmarks.attributes - .filter((a) => a.name === "role in cancer") - .map((r) => ({ + .filter(a => a.name === "role in cancer") + .map(r => ({ label: r.description, url: `http://europepmc.org/search?query=EXT_ID:${r.pmid}`, })); - const rows = data.target.hallmarks.cancerHallmarks.map((r) => ({ + const rows = data.target.hallmarks.cancerHallmarks.map(r => ({ label: r.label, activity: r.impact === "promotes" ? "promotes" : "suppresses", description: r.description, @@ -84,16 +84,8 @@ function Section({ id, label: symbol, entity }) { return ( <> - - Role in cancer: - - 0 - ? roleInCancer - : [{ label: "Unknown" }] - } - /> + Role in cancer: + 0 ? roleInCancer : [{ label: "Unknown" }]} /> - Role of {symbol} in essential alterations in cell - physiology that dictate malignant growth. Source:{' '} + Role of {symbol} in essential alterations in cell physiology that dictate + malignant growth. Source:{" "} COSMIC diff --git a/packages/sections/src/target/CancerHallmarks/Summary.jsx b/packages/sections/src/target/CancerHallmarks/Summary.jsx index 28b3d7ccd..455fe061c 100644 --- a/packages/sections/src/target/CancerHallmarks/Summary.jsx +++ b/packages/sections/src/target/CancerHallmarks/Summary.jsx @@ -1,8 +1,8 @@ -import _ from 'lodash'; -import { SummaryItem, usePlatformApi } from 'ui'; +import _ from "lodash"; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import CANCER_HALLMARKS_SUMMARY_FRAGMENT from './HallmarksSummaryFragment.gql'; +import { definition } from "."; +import CANCER_HALLMARKS_SUMMARY_FRAGMENT from "./HallmarksSummaryFragment.gql"; function Summary() { const request = usePlatformApi(CANCER_HALLMARKS_SUMMARY_FRAGMENT); @@ -12,14 +12,14 @@ function Summary() { definition={definition} request={request} renderSummary={data => { - const hallmarks = _.uniqBy(data.hallmarks.cancerHallmarks, 'label'); + const hallmarks = _.uniqBy(data.hallmarks.cancerHallmarks, "label"); const promote = _.uniqBy( - data.hallmarks.cancerHallmarks.filter(d => d.impact === 'promotes'), - 'label' + data.hallmarks.cancerHallmarks.filter(d => d.impact === "promotes"), + "label" ); const suppress = _.uniqBy( - data.hallmarks.cancerHallmarks.filter(d => d.impact === 'suppresses'), - 'label' + data.hallmarks.cancerHallmarks.filter(d => d.impact === "suppresses"), + "label" ); return ( diff --git a/packages/sections/src/target/CancerHallmarks/index.js b/packages/sections/src/target/CancerHallmarks/index.js index f306fcc82..26db4da06 100644 --- a/packages/sections/src/target/CancerHallmarks/index.js +++ b/packages/sections/src/target/CancerHallmarks/index.js @@ -1,6 +1,6 @@ export const definition = { - id: 'cancerHallmarks', - name: 'Cancer Hallmarks', - shortName: 'CH', + id: "cancerHallmarks", + name: "Cancer Hallmarks", + shortName: "CH", hasData: data => data.hallmarks?.cancerHallmarks?.length > 0, }; diff --git a/packages/sections/src/target/ChemicalProbes/Body.jsx b/packages/sections/src/target/ChemicalProbes/Body.jsx index 87382f025..88e7f1b31 100644 --- a/packages/sections/src/target/ChemicalProbes/Body.jsx +++ b/packages/sections/src/target/ChemicalProbes/Body.jsx @@ -23,7 +23,7 @@ const columns = [ { id: "id", label: "Probe ID", - renderCell: (row) => { + renderCell: row => { // link to drug page if drugid is available; also add tooltip with control if available const c = row.drugId ? ( {row.id} @@ -31,32 +31,29 @@ const columns = [ {row.id} ); return row.control ? ( - } - showHelpIcon - > + } showHelpIcon> {c} ) : ( c ); }, - exportValue: (row) => row.id, - filterValue: (row) => row.id, + exportValue: row => row.id, + filterValue: row => row.id, width: "25%", }, { id: "isHighQuality", label: "Quality", - renderCell: (row) => ( + renderCell: row => ( ), - exportValue: (row) => (row.isHighQuality ? "high" : "low"), - filterValue: (row) => (row.isHighQuality ? 1 : 0), + exportValue: row => (row.isHighQuality ? "high" : "low"), + filterValue: row => (row.isHighQuality ? 1 : 0), tooltip: "Chemical probes selection based on the union of following criteria: compound belongs to one of the high-quality probe sets; use in Cells or Organisms rating ≥ 75%; P&D approved experimental probe; not labelled as obsolete.", width: "12%", @@ -64,25 +61,25 @@ const columns = [ { id: "mechanismOfAction", label: "Mechanism of action", - renderCell: (row) => row.mechanismOfAction?.join(", ") || naLabel, - exportValue: (row) => row.mechanismOfAction?.join(", "), - filterValue: (row) => row.mechanismOfAction?.join(", ") || naLabel, + renderCell: row => row.mechanismOfAction?.join(", ") || naLabel, + exportValue: row => row.mechanismOfAction?.join(", "), + filterValue: row => row.mechanismOfAction?.join(", ") || naLabel, width: "25%", }, { id: "origin", label: "Probe origin", - renderCell: (row) => row.origin?.join(", ") || naLabel, - exportValue: (row) => row.origin?.join(", "), - filterValue: (row) => row.origin?.join(", ") || naLabel, + renderCell: row => row.origin?.join(", ") || naLabel, + exportValue: row => row.origin?.join(", "), + filterValue: row => row.origin?.join(", ") || naLabel, width: "25%", }, { id: "probesDrugsScore", label: "Score", - renderCell: (row) => row.probesDrugsScore || naLabel, - exportValue: (row) => row.probesDrugsScore || naLabel, - filterValue: (row) => row.probesDrugsScore, + renderCell: row => row.probesDrugsScore || naLabel, + exportValue: row => row.probesDrugsScore || naLabel, + filterValue: row => row.probesDrugsScore, width: "13%", }, ]; @@ -97,13 +94,17 @@ function Body({ id, label: symbol, entity }) { request={request} entity={entity} renderDescription={() => } - renderBody={(data) => { + renderBody={data => { // sort probes manually as we need a custom sort based score, quality and origin - const sortedProbes = _.orderBy(data.target.chemicalProbes, [ - 'probesDrugsScore', - 'isHighQuality', - p => p.origin?.map(o => o.toLowerCase()).includes('experimental'), - ], ['desc', 'desc', 'desc']); + const sortedProbes = _.orderBy( + data.target.chemicalProbes, + [ + "probesDrugsScore", + "isHighQuality", + p => p.origin?.map(o => o.toLowerCase()).includes("experimental"), + ], + ["desc", "desc", "desc"] + ); return data.target.chemicalProbes?.length > 0 ? ( - ) : null - } - } + ) : null; + }} /> ); } diff --git a/packages/sections/src/target/ChemicalProbes/Description.jsx b/packages/sections/src/target/ChemicalProbes/Description.jsx index 5ec99bebd..339af3b80 100644 --- a/packages/sections/src/target/ChemicalProbes/Description.jsx +++ b/packages/sections/src/target/ChemicalProbes/Description.jsx @@ -3,8 +3,8 @@ import { Link } from "ui"; function Description({ symbol }) { return ( <> - Potent, selective and cell-permeable chemical modulators for{' '} - {symbol}. Source:{' '} + Potent, selective and cell-permeable chemical modulators for {symbol}. + Source:{" "} Probes & Drugs diff --git a/packages/sections/src/target/ChemicalProbes/Summary.jsx b/packages/sections/src/target/ChemicalProbes/Summary.jsx index f466fb7c9..b2dbb4588 100644 --- a/packages/sections/src/target/ChemicalProbes/Summary.jsx +++ b/packages/sections/src/target/ChemicalProbes/Summary.jsx @@ -10,7 +10,7 @@ function Summary() { + renderSummary={data => data.chemicalProbes?.length > 0 ? `${data.chemicalProbes.length} chemical probe${ data.chemicalProbes.length !== 1 ? "s" : "" diff --git a/packages/sections/src/target/ChemicalProbes/index.js b/packages/sections/src/target/ChemicalProbes/index.js index 1e69a9c3e..e05ace460 100644 --- a/packages/sections/src/target/ChemicalProbes/index.js +++ b/packages/sections/src/target/ChemicalProbes/index.js @@ -1,6 +1,6 @@ export const definition = { - id: 'chemicalProbes', - name: 'Chemical Probes', - shortName: 'CP', + id: "chemicalProbes", + name: "Chemical Probes", + shortName: "CP", hasData: data => data.chemicalProbes.length > 0, }; diff --git a/packages/sections/src/target/ComparativeGenomics/Body.jsx b/packages/sections/src/target/ComparativeGenomics/Body.jsx index 370b8af69..47fa4fa27 100644 --- a/packages/sections/src/target/ComparativeGenomics/Body.jsx +++ b/packages/sections/src/target/ComparativeGenomics/Body.jsx @@ -1,11 +1,11 @@ -import { useQuery } from '@apollo/client'; -import { SectionItem } from 'ui'; +import { useQuery } from "@apollo/client"; +import { SectionItem } from "ui"; -import { definition } from '.'; -import HomologyTable from './HomologyTable'; -import Description from './Description'; +import { definition } from "."; +import HomologyTable from "./HomologyTable"; +import Description from "./Description"; -import COMP_GENOMICS_QUERY from './CompGenomics.gql'; +import COMP_GENOMICS_QUERY from "./CompGenomics.gql"; function Body({ id: ensemblId, label: symbol, entity }) { const variables = { ensemblId }; diff --git a/packages/sections/src/target/ComparativeGenomics/Description.jsx b/packages/sections/src/target/ComparativeGenomics/Description.jsx index ff6cd9c41..e827ac91c 100644 --- a/packages/sections/src/target/ComparativeGenomics/Description.jsx +++ b/packages/sections/src/target/ComparativeGenomics/Description.jsx @@ -3,7 +3,7 @@ import { Link } from "ui"; function Description({ symbol }) { return ( <> - Homology for {symbol} across selected species. Source:{' '} + Homology for {symbol} across selected species. Source:{" "} Ensembl Compara diff --git a/packages/sections/src/target/ComparativeGenomics/HomologyTable.jsx b/packages/sections/src/target/ComparativeGenomics/HomologyTable.jsx index 1f749a573..02ad54ddd 100644 --- a/packages/sections/src/target/ComparativeGenomics/HomologyTable.jsx +++ b/packages/sections/src/target/ComparativeGenomics/HomologyTable.jsx @@ -38,7 +38,7 @@ const speciesIcons = { 10090: MouseIcon, }; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ star: { color: theme.palette.primary.main, }, @@ -111,17 +111,13 @@ function getColumns(classes) { id: "queryPercentageIdentity", label: `Query %id`, renderCell: ({ queryPercentageIdentity }) => - queryPercentageIdentity - ? queryPercentageIdentity.toFixed(decimalPlaces) - : "N/A", + queryPercentageIdentity ? queryPercentageIdentity.toFixed(decimalPlaces) : "N/A", }, { id: "targetPercentageIdentity", label: `Target %id`, renderCell: ({ targetPercentageIdentity }) => - targetPercentageIdentity - ? targetPercentageIdentity.toFixed(decimalPlaces) - : "N/A", + targetPercentageIdentity ? targetPercentageIdentity.toFixed(decimalPlaces) : "N/A", }, ]; } diff --git a/packages/sections/src/target/ComparativeGenomics/Summary.jsx b/packages/sections/src/target/ComparativeGenomics/Summary.jsx index 3309abb29..85236d348 100644 --- a/packages/sections/src/target/ComparativeGenomics/Summary.jsx +++ b/packages/sections/src/target/ComparativeGenomics/Summary.jsx @@ -1,9 +1,9 @@ -import { SummaryItem, usePlatformApi } from 'ui'; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import countHomologues from './countHomologues'; +import { definition } from "."; +import countHomologues from "./countHomologues"; -import COMP_GENOMICS_SUMMARY_FRAGMENT from './CompGenomicsSummaryFragment.gql'; +import COMP_GENOMICS_SUMMARY_FRAGMENT from "./CompGenomicsSummaryFragment.gql"; function Summary() { const request = usePlatformApi(COMP_GENOMICS_SUMMARY_FRAGMENT); diff --git a/packages/sections/src/target/ComparativeGenomics/countHomologues.js b/packages/sections/src/target/ComparativeGenomics/countHomologues.js index cc6c08b23..deed74ebc 100644 --- a/packages/sections/src/target/ComparativeGenomics/countHomologues.js +++ b/packages/sections/src/target/ComparativeGenomics/countHomologues.js @@ -3,18 +3,15 @@ export default function countHomologues(homologues) { let paralogueCount = 0; homologues.forEach(({ homologyType }) => { if ( - homologyType === 'ortholog_one2one' || - homologyType === 'ortholog_one2many' || - homologyType === 'ortholog_many2many' + homologyType === "ortholog_one2one" || + homologyType === "ortholog_one2many" || + homologyType === "ortholog_many2many" ) { - orthologueCount+=1; + orthologueCount += 1; } - if ( - homologyType === 'within_species_paralog' || - homologyType === 'other_paralog' - ) { - paralogueCount+=1; + if (homologyType === "within_species_paralog" || homologyType === "other_paralog") { + paralogueCount += 1; } }); return { orthologueCount, paralogueCount }; diff --git a/packages/sections/src/target/ComparativeGenomics/index.js b/packages/sections/src/target/ComparativeGenomics/index.js index 33d21ece6..8f0c9955e 100644 --- a/packages/sections/src/target/ComparativeGenomics/index.js +++ b/packages/sections/src/target/ComparativeGenomics/index.js @@ -1,13 +1,11 @@ -import countHomologues from './countHomologues'; +import countHomologues from "./countHomologues"; export const definition = { - id: 'compGenomics', - name: 'Comparative Genomics', - shortName: 'CG', + id: "compGenomics", + name: "Comparative Genomics", + shortName: "CG", hasData: data => { - const { paralogueCount, orthologueCount } = countHomologues( - data.homologues - ); + const { paralogueCount, orthologueCount } = countHomologues(data.homologues); return paralogueCount > 0 || orthologueCount > 0; }, }; diff --git a/packages/sections/src/target/DepMap/Body.jsx b/packages/sections/src/target/DepMap/Body.jsx index a695ff34e..f2e978a3b 100644 --- a/packages/sections/src/target/DepMap/Body.jsx +++ b/packages/sections/src/target/DepMap/Body.jsx @@ -16,7 +16,7 @@ function Section({ id, label: symbol, entity }) { entity={entity} request={request} renderDescription={() => } - renderBody={(data) => { + renderBody={data => { return ( <> diff --git a/packages/sections/src/target/DepMap/DepmapPlot.jsx b/packages/sections/src/target/DepMap/DepmapPlot.jsx index ce9590697..46de54499 100644 --- a/packages/sections/src/target/DepMap/DepmapPlot.jsx +++ b/packages/sections/src/target/DepMap/DepmapPlot.jsx @@ -12,7 +12,7 @@ function DepmapPlot({ data }) { const trackHeight = 40; - const onPointClick = (evt) => { + const onPointClick = evt => { const { points } = evt; const id = points[0]?.id; if (id) { @@ -23,19 +23,19 @@ function DepmapPlot({ data }) { // plot data const depMapEssentiality = data - .map((d) => ({ + .map(d => ({ type: "box", tissueName: d.tissueName, name: `${_.capitalize(d.tissueName)} (${d.screens.length})`, // points data: - x: d.screens.map((s) => s.geneEffect), - ids: d.screens.map((s) => s.depmapId), + x: d.screens.map(s => s.geneEffect), + ids: d.screens.map(s => s.depmapId), // tooltip settings hoveron: "points", // enable tooltip only for points, not boxes hovertext: d.screens.map( - (s) => + s => `${s.cellLineName}
    Disease: ${s.diseaseFromSource}
    Gene Effect: ${s.geneEffect}
    Expression: ${s.expression}` ), hoverinfo: "text", @@ -110,11 +110,7 @@ function DepmapPlot({ data }) { return (
    - +
    ); } diff --git a/packages/sections/src/target/DepMap/Description.jsx b/packages/sections/src/target/DepMap/Description.jsx index ebbf0c919..053d16e3a 100644 --- a/packages/sections/src/target/DepMap/Description.jsx +++ b/packages/sections/src/target/DepMap/Description.jsx @@ -3,7 +3,8 @@ import { Link } from "ui"; function Description({ symbol }) { return ( <> - Gene Essentiality assessment obtained through CRISPR loss-of-function screens in a wide range of cancer cell lines. Source:{' '} + Gene Essentiality assessment obtained through CRISPR loss-of-function screens in a wide range + of cancer cell lines. Source:{" "} DepMap Portal diff --git a/packages/sections/src/target/DepMap/Summary.jsx b/packages/sections/src/target/DepMap/Summary.jsx index 6215b4099..2e99a4b36 100644 --- a/packages/sections/src/target/DepMap/Summary.jsx +++ b/packages/sections/src/target/DepMap/Summary.jsx @@ -1,8 +1,8 @@ -import _ from 'lodash'; -import { SummaryItem, usePlatformApi } from 'ui'; +import _ from "lodash"; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import DEPMAP_SUMMARY_FRAGMENT from './DepmapSummaryFragment.gql'; +import { definition } from "."; +import DEPMAP_SUMMARY_FRAGMENT from "./DepmapSummaryFragment.gql"; function Summary() { const request = usePlatformApi(DEPMAP_SUMMARY_FRAGMENT); @@ -12,11 +12,7 @@ function Summary() { definition={definition} request={request} renderSummary={data => { - return ( - <> - {data.depMapEssentiality?.length} tissues - - ); + return <>{data.depMapEssentiality?.length} tissues; }} /> ); diff --git a/packages/sections/src/target/DepMap/index.js b/packages/sections/src/target/DepMap/index.js index be173e939..82ba01abb 100644 --- a/packages/sections/src/target/DepMap/index.js +++ b/packages/sections/src/target/DepMap/index.js @@ -1,6 +1,6 @@ export const definition = { - id: 'depMapEssentiality', - name: 'Cancer DepMap', - shortName: 'DM', + id: "depMapEssentiality", + name: "Cancer DepMap", + shortName: "DM", hasData: data => data.depMapEssentiality?.length > 0, }; diff --git a/packages/sections/src/target/Expression/AtlasTab.jsx b/packages/sections/src/target/Expression/AtlasTab.jsx index 15d6dcf39..335a8108b 100644 --- a/packages/sections/src/target/Expression/AtlasTab.jsx +++ b/packages/sections/src/target/Expression/AtlasTab.jsx @@ -8,9 +8,7 @@ const ExpressionAtlasHeatmap = lazy(() => function AtlasTab({ ensgId, symbol }) { return ( - + } - renderBody={(data) => ( + renderBody={data => ( <> - + diff --git a/packages/sections/src/target/Expression/Description.jsx b/packages/sections/src/target/Expression/Description.jsx index d7c546d50..18d7bebeb 100644 --- a/packages/sections/src/target/Expression/Description.jsx +++ b/packages/sections/src/target/Expression/Description.jsx @@ -3,15 +3,15 @@ import { Link } from "ui"; function Description({ symbol }) { return ( <> - RNA and protein baseline expression for {symbol}. Source:{' '} + RNA and protein baseline expression for {symbol}. Source:{" "} ExpressionAtlas - ,{' '} + ,{" "} HPA - {' '} - and{' '} + {" "} + and{" "} GTEx diff --git a/packages/sections/src/target/Expression/GtexTab.jsx b/packages/sections/src/target/Expression/GtexTab.jsx index 02f345aa3..d578cdc96 100644 --- a/packages/sections/src/target/Expression/GtexTab.jsx +++ b/packages/sections/src/target/Expression/GtexTab.jsx @@ -4,8 +4,8 @@ import { DownloadSvgPlot } from "ui"; import GtexVariability from "./GtexVariability"; -const transformData = (data) => - data.map((d) => { +const transformData = data => + data.map(d => { // d3 requires for the array of values to be sorted before using median and quantile d.data.sort((a, b) => a - b); const median = d3Median(d.data); @@ -16,7 +16,7 @@ const transformData = (data) => const iqr = q3 - q1; // interquartile range // find the outliers and not outliers - d.data.forEach((item) => { + d.data.forEach(item => { if (item < q1 - 1.5 * iqr || item > q3 + 1.5 * iqr) { outliers.push(item); } else { @@ -63,10 +63,7 @@ function GtexTab({ symbol, data }) { const gtexVariability = useRef(); return ( - + ); diff --git a/packages/sections/src/target/Expression/GtexVariability.jsx b/packages/sections/src/target/Expression/GtexVariability.jsx index 77bd4def9..5ea38c180 100644 --- a/packages/sections/src/target/Expression/GtexVariability.jsx +++ b/packages/sections/src/target/Expression/GtexVariability.jsx @@ -26,7 +26,7 @@ function getTextWidth(text, fontSize, fontFace) { function getLongestId(data) { let longestId = ""; - data.forEach((d) => { + data.forEach(d => { if (d.tissueSiteDetailId.length > longestId.length) { longestId = d.tissueSiteDetailId; } @@ -36,11 +36,9 @@ function getLongestId(data) { function buildTooltip(X, tooltipObject, data) { return Object.keys(tooltipObject) - .map((field) => { + .map(field => { const value = - data[field] === null - ? "N/A" - : data[field].toFixed(tooltipObject[field].roundDigits); + data[field] === null ? "N/A" : data[field].toFixed(tooltipObject[field].roundDigits); return ( `` + `${tooltipObject[field].label}: ` + @@ -73,17 +71,15 @@ function GtexVariability({ data }) { const data = propsData.slice().sort((a, b) => b.median - a.median); const height = data.length * boxHeight + margin.top + margin.bottom; const rectHeight = boxHeight - 2 * boxPadding; - const xMax = max(data, (d) => max(d.outliers)); + const xMax = max(data, d => max(d.outliers)); x.domain([0, xMax]).range([0, width - margin.left - margin.right]); - y.domain(data.map((d) => d.tissueSiteDetailId.replace(/_/g, " "))).range([ + y.domain(data.map(d => d.tissueSiteDetailId.replace(/_/g, " "))).range([ 0, height - margin.top - margin.bottom, ]); - colour - .domain(data.map((d) => d.tissueSiteDetailId)) - .range(schemeCategory10); + colour.domain(data.map(d => d.tissueSiteDetailId)).range(schemeCategory10); const tooltipTextFields = { lowerLimit: { @@ -135,23 +131,20 @@ function GtexVariability({ data }) { boxContainer .append("line") - .attr("x1", (d) => x(d.lowerLimit)) - .attr("x2", (d) => x(d.upperLimit)) - .attr("y1", (d) => y(d.tissueSiteDetailId.replace(/_/g, " "))) - .attr("y2", (d) => y(d.tissueSiteDetailId.replace(/_/g, " "))) + .attr("x1", d => x(d.lowerLimit)) + .attr("x2", d => x(d.upperLimit)) + .attr("y1", d => y(d.tissueSiteDetailId.replace(/_/g, " "))) + .attr("y2", d => y(d.tissueSiteDetailId.replace(/_/g, " "))) .attr("stroke", theme.palette.grey[700]); boxContainer .append("rect") - .attr("x", (d) => x(d.q1)) - .attr( - "y", - (d) => y(d.tissueSiteDetailId.replace(/_/g, " ")) - rectHeight / 2 - ) - .attr("width", (d) => x(d.q3) - x(d.q1)) + .attr("x", d => x(d.q1)) + .attr("y", d => y(d.tissueSiteDetailId.replace(/_/g, " ")) - rectHeight / 2) + .attr("width", d => x(d.q3) - x(d.q1)) .attr("height", rectHeight) - .attr("fill", (d) => colour(d.tissueSiteDetailId)) - .on("mouseover", (d) => { + .attr("fill", d => colour(d.tissueSiteDetailId)) + .on("mouseover", d => { let X = parseFloat(select(this).attr("x")) + parseFloat(select(this).attr("width")) + @@ -160,9 +153,7 @@ function GtexVariability({ data }) { tooltipText .attr("y", Y) - .html( - buildTooltip(X + tooltipSettings.offsetText, tooltipTextFields, d) - ) + .html(buildTooltip(X + tooltipSettings.offsetText, tooltipTextFields, d)) .style("visibility", "visible"); const bbox = tooltip.select("text").node().getBBox(); @@ -172,9 +163,7 @@ function GtexVariability({ data }) { X = width - margin.right - bbox.width - margin.left; // re-build tooltip string; this is necessary because the X coordinate // is part of the tooltip string - tooltipText.html( - buildTooltip(X + tooltipSettings.offsetText, tooltipTextFields, d) - ); + tooltipText.html(buildTooltip(X + tooltipSettings.offsetText, tooltipTextFields, d)); } // keep tooltip box within SVG (Y axis) @@ -197,59 +186,41 @@ function GtexVariability({ data }) { boxContainer .append("line") - .attr("x1", (d) => x(d.median)) - .attr("x2", (d) => x(d.median)) - .attr( - "y1", - (d) => y(d.tissueSiteDetailId.replace(/_/g, " ")) - rectHeight / 2 - ) - .attr( - "y2", - (d) => y(d.tissueSiteDetailId.replace(/_/g, " ")) + rectHeight / 2 - ) + .attr("x1", d => x(d.median)) + .attr("x2", d => x(d.median)) + .attr("y1", d => y(d.tissueSiteDetailId.replace(/_/g, " ")) - rectHeight / 2) + .attr("y2", d => y(d.tissueSiteDetailId.replace(/_/g, " ")) + rectHeight / 2) .attr("stroke", theme.palette.grey[700]) .attr("stroke-width", 2); boxContainer .append("line") - .attr("x1", (d) => x(d.lowerLimit)) - .attr("x2", (d) => x(d.lowerLimit)) - .attr( - "y1", - (d) => y(d.tissueSiteDetailId.replace(/_/g, " ")) - rectHeight / 2 - ) - .attr( - "y2", - (d) => y(d.tissueSiteDetailId.replace(/_/g, " ")) + rectHeight / 2 - ) + .attr("x1", d => x(d.lowerLimit)) + .attr("x2", d => x(d.lowerLimit)) + .attr("y1", d => y(d.tissueSiteDetailId.replace(/_/g, " ")) - rectHeight / 2) + .attr("y2", d => y(d.tissueSiteDetailId.replace(/_/g, " ")) + rectHeight / 2) .attr("stroke", theme.palette.grey[700]); boxContainer .append("line") - .attr("x1", (d) => x(d.upperLimit)) - .attr("x2", (d) => x(d.upperLimit)) - .attr( - "y1", - (d) => y(d.tissueSiteDetailId.replace(/_/g, " ")) - rectHeight / 2 - ) - .attr( - "y2", - (d) => y(d.tissueSiteDetailId.replace(/_/g, " ")) + rectHeight / 2 - ) + .attr("x1", d => x(d.upperLimit)) + .attr("x2", d => x(d.upperLimit)) + .attr("y1", d => y(d.tissueSiteDetailId.replace(/_/g, " ")) - rectHeight / 2) + .attr("y2", d => y(d.tissueSiteDetailId.replace(/_/g, " ")) + rectHeight / 2) .attr("stroke", theme.palette.grey[700]); boxContainer .selectAll("circle") - .data((d) => - d.outliers.map((outlier) => ({ + .data(d => + d.outliers.map(outlier => ({ tissueSiteDetailId: d.tissueSiteDetailId, outlier, })) ) .join("circle") .attr("r", outlierRadius) - .attr("cx", (d) => x(d.outlier)) - .attr("cy", (d) => y(d.tissueSiteDetailId.replace(/_/g, " "))) + .attr("cx", d => x(d.outlier)) + .attr("cy", d => y(d.tissueSiteDetailId.replace(/_/g, " "))) .attr("fill", "none") .attr("stroke", theme.palette.grey[700]); @@ -277,18 +248,9 @@ function GtexVariability({ data }) { ref={boxPlotRef} transform={`translate(${margin.left}, ${margin.top})`} /> - - - + + + ); } diff --git a/packages/sections/src/target/Expression/Summary.jsx b/packages/sections/src/target/Expression/Summary.jsx index 478af34cb..a1ac87fb4 100644 --- a/packages/sections/src/target/Expression/Summary.jsx +++ b/packages/sections/src/target/Expression/Summary.jsx @@ -10,10 +10,8 @@ function Summary() { definition={definition} request={request} renderSummary={() => { - const hasRNA = request.data.expressions.some((d) => d.rna.level >= 0); - const hasProtein = request.data.expressions.some( - (d) => d.protein.level >= 0 - ); + const hasRNA = request.data.expressions.some(d => d.rna.level >= 0); + const hasProtein = request.data.expressions.some(d => d.protein.level >= 0); const expressionTypes = []; if (hasRNA) { diff --git a/packages/sections/src/target/Expression/SummaryRow.jsx b/packages/sections/src/target/Expression/SummaryRow.jsx index 10876119b..eaa937aa7 100644 --- a/packages/sections/src/target/Expression/SummaryRow.jsx +++ b/packages/sections/src/target/Expression/SummaryRow.jsx @@ -3,7 +3,7 @@ import classNames from "classnames"; import { TableCell, TableRow } from "@mui/material"; import { makeStyles } from "@mui/styles"; -const proteinLevel = (level) => { +const proteinLevel = level => { if (level === 0) { return "Under expressed"; } @@ -18,9 +18,9 @@ const proteinLevel = (level) => { const rnaValueToPercent = (maxRnaValue, value) => (value * 100) / maxRnaValue; -const proteinLevelToPercent = (level) => (level * 100) / 3; +const proteinLevelToPercent = level => (level * 100) / 3; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ parentRow: { height: "20px", cursor: "pointer", @@ -94,11 +94,7 @@ function SummaryRow({ parent, maxRnaValue }) { onClick={handleClick} > {parent.parentLabel} @@ -109,10 +105,7 @@ function SummaryRow({ parent, maxRnaValue }) { className={classes.barParent} title={`${parent.maxRnaValue} (normalized count)`} style={{ - width: `${rnaValueToPercent( - maxRnaValue, - parent.maxRnaValue - )}%`, + width: `${rnaValueToPercent(maxRnaValue, parent.maxRnaValue)}%`, float: "right", }} /> @@ -168,9 +161,7 @@ function SummaryRow({ parent, maxRnaValue }) { )} - +
    {tissue.protein.level >= 0 ? (
    - expressions.map((expression) => ({ +const getDownloadRows = expressions => + expressions.map(expression => ({ label: expression.tissue.label, organs: expression.tissue.organs.join(","), anatomicalSystems: expression.tissue.anatomicalSystems.join(","), diff --git a/packages/sections/src/target/Expression/SummaryTable.jsx b/packages/sections/src/target/Expression/SummaryTable.jsx index 1e09b7483..9633bc231 100644 --- a/packages/sections/src/target/Expression/SummaryTable.jsx +++ b/packages/sections/src/target/Expression/SummaryTable.jsx @@ -17,11 +17,9 @@ import { makeStyles } from "@mui/styles"; import SummaryRow from "./SummaryRow"; -const getMaxRnaValue = (expressions) => { +const getMaxRnaValue = expressions => { if (expressions.length <= 0) return 0; - return maxBy(expressions, (expression) => - expression?.rna ? expression.rna.value : 0 - ).rna.value; + return maxBy(expressions, expression => (expression?.rna ? expression.rna.value : 0)).rna.value; }; // function that transforms tissue data into an array of objects @@ -37,9 +35,9 @@ const getMaxRnaValue = (expressions) => { const groupTissues = (expressions, groupBy) => { const groupedTissues = {}; - expressions.forEach((expression) => { + expressions.forEach(expression => { const parentLabels = expression.tissue[groupBy]; - parentLabels.forEach((label) => { + parentLabels.forEach(label => { if (!groupedTissues[label]) { groupedTissues[label] = { parentLabel: label, @@ -55,17 +53,14 @@ const groupTissues = (expressions, groupBy) => { parent.tissues.push(expression); parent.maxRnaValue = Math.max(parent.maxRnaValue, expression.rna.value); parent.maxRnaLevel = Math.max(parent.maxRnaLevel, expression.rna.level); - parent.maxProteinLevel = Math.max( - parent.maxProteinLevel, - expression.protein.level - ); + parent.maxProteinLevel = Math.max(parent.maxProteinLevel, expression.protein.level); }); }); return Object.values(groupedTissues); }; -const tissueComparator = (sortBy) => { +const tissueComparator = sortBy => { if (sortBy === "rna") { return (a, b) => b.rna.value - a.rna.value; } @@ -73,7 +68,7 @@ const tissueComparator = (sortBy) => { return (a, b) => b.protein.level - a.protein.level; }; -const parentComparator = (sortBy) => { +const parentComparator = sortBy => { if (sortBy === "rna") { return (a, b) => b.maxRnaValue - a.maxRnaValue; } @@ -82,7 +77,7 @@ const parentComparator = (sortBy) => { }; const sort = (parents, sortBy) => { - parents.forEach((parent) => { + parents.forEach(parent => { parent.tissues.sort(tissueComparator(sortBy)); }); return parents.sort(parentComparator(sortBy)); @@ -125,31 +120,19 @@ function SummaryTable({ data }) { } }; - const handleSort = (sort) => { + const handleSort = sort => { setSortBy(sort); }; return ( <> - + Group by - + Organs - - Anatomical Systems - + Anatomical Systems @@ -157,18 +140,12 @@ function SummaryTable({ data }) { Tissue - handleSort("rna")} - > + handleSort("rna")}> RNA (Expression Atlas) - handleSort("protein")} - > + handleSort("protein")}> Protein (HPA) @@ -176,17 +153,13 @@ function SummaryTable({ data }) { - + High Low - + Low High @@ -195,12 +168,8 @@ function SummaryTable({ data }) { - {parents.map((parent) => ( - + {parents.map(parent => ( + ))}
    {match.text.slice(0, breaks[0])} - - {match.text.slice(breaks[0], breaks[1])} - + {match.text.slice(breaks[0], breaks[1])} {match.text.slice(breaks[1], breaks[2])} - - {match.text.slice(breaks[2], breaks[3])} - + {match.text.slice(breaks[2], breaks[3])} {match.text.slice(breaks[3])}
    diff --git a/packages/sections/src/target/Expression/index.js b/packages/sections/src/target/Expression/index.js index 625ff5a4b..383644e45 100644 --- a/packages/sections/src/target/Expression/index.js +++ b/packages/sections/src/target/Expression/index.js @@ -2,13 +2,13 @@ export const definition = { id: "expressions", name: "Baseline Expression", shortName: "BE", - hasData: (data) => { - const hasRNA = data.expressions.some((d) => d.rna?.level >= 0); - const hasProtein = data.expressions.some((d) => d.protein?.level >= 0); + hasData: data => { + const hasRNA = data.expressions.some(d => d.rna?.level >= 0); + const hasProtein = data.expressions.some(d => d.protein?.level >= 0); // TODO: // the check for gtex data should be remove if/when // we stop checking for data on switching tab (see comment in GtexTab) - const hasGtex = data.expressions.some((d) => d.tissueSiteDetailId); + const hasGtex = data.expressions.some(d => d.tissueSiteDetailId); return hasRNA || hasProtein || hasGtex; }, }; diff --git a/packages/sections/src/target/GeneOntology/Body.jsx b/packages/sections/src/target/GeneOntology/Body.jsx index 0e489f191..079009498 100644 --- a/packages/sections/src/target/GeneOntology/Body.jsx +++ b/packages/sections/src/target/GeneOntology/Body.jsx @@ -15,18 +15,18 @@ const CATEGORY_BY_PREFIX = { C: { code: "CELLULAR_COMPONENT", label: "Cellular Component" }, }; -const extractCategory = (row) => ({ +const extractCategory = row => ({ ...row, category: CATEGORY_BY_PREFIX[row.aspect], }); const sourceURLS = { - Reactome: (id) => `https://identifiers.org/reactome:${id}`, - DOI: (id) => `https://doi.org/${id}}`, - GO_REF: (id) => `https://identifiers.org/GO_REF:${id}`, + Reactome: id => `https://identifiers.org/reactome:${id}`, + DOI: id => `https://doi.org/${id}}`, + GO_REF: id => `https://identifiers.org/GO_REF:${id}`, }; -const sourceMapContent = (source) => { +const sourceMapContent = source => { const sourceName = source.slice(0, source.indexOf(":")); const sourceId = source.slice(source.indexOf(":") + 1); if (sourceName !== "PMID") @@ -121,7 +121,7 @@ const columns = [ id: "evidence", label: "Evidence code", exportLabel: "Evidence code", - exportValue: (row) => row.evidence, + exportValue: row => row.evidence, renderCell: ({ evidence }) => ( } showHelpIcon> {evidence} @@ -132,7 +132,7 @@ const columns = [ id: "source", label: "Source", exportLabel: "Source", - exportValue: (row) => row.source, + exportValue: row => row.source, renderCell: ({ source }) => sourceMapContent(source), }, ]; @@ -148,10 +148,7 @@ function Section({ id, label: symbol, entity }) { request={request} renderDescription={() => } renderBody={({ target }) => { - const rows = sortBy( - target.geneOntology.map(extractCategory), - "category.label" - ); + const rows = sortBy(target.geneOntology.map(extractCategory), "category.label"); return ( - Annotations for {symbol}. Source:{' '} + Annotations for {symbol}. Source:{" "} UniProt diff --git a/packages/sections/src/target/GeneOntology/Summary.jsx b/packages/sections/src/target/GeneOntology/Summary.jsx index 4bf62eaac..bce1226c5 100644 --- a/packages/sections/src/target/GeneOntology/Summary.jsx +++ b/packages/sections/src/target/GeneOntology/Summary.jsx @@ -1,8 +1,8 @@ -import _ from 'lodash'; -import { SummaryItem, usePlatformApi } from 'ui'; +import _ from "lodash"; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import GENE_ONTOLOGY_SUMMARY_FRAGMENT from './GeneOntologySummary.gql'; +import { definition } from "."; +import GENE_ONTOLOGY_SUMMARY_FRAGMENT from "./GeneOntologySummary.gql"; function Summary() { const request = usePlatformApi(GENE_ONTOLOGY_SUMMARY_FRAGMENT); diff --git a/packages/sections/src/target/GeneOntology/index.js b/packages/sections/src/target/GeneOntology/index.js index aee4e509f..b0295ba0f 100644 --- a/packages/sections/src/target/GeneOntology/index.js +++ b/packages/sections/src/target/GeneOntology/index.js @@ -1,6 +1,6 @@ export const definition = { - id: 'geneOntology', - name: 'Gene Ontology', - shortName: 'GO', + id: "geneOntology", + name: "Gene Ontology", + shortName: "GO", hasData: data => data.geneOntology.length > 0, }; diff --git a/packages/sections/src/target/GeneticConstraint/Body.jsx b/packages/sections/src/target/GeneticConstraint/Body.jsx index 3ac9cc5e5..bf37c3351 100644 --- a/packages/sections/src/target/GeneticConstraint/Body.jsx +++ b/packages/sections/src/target/GeneticConstraint/Body.jsx @@ -1,10 +1,10 @@ -import { SectionItem } from 'ui'; -import { useQuery } from '@apollo/client'; -import GeneticConstraintTable from './GeneticConstraintTable'; +import { SectionItem } from "ui"; +import { useQuery } from "@apollo/client"; +import GeneticConstraintTable from "./GeneticConstraintTable"; -import { definition } from '.'; -import Description from './Description'; -import GENETIC_CONSTRAINT from './GeneticConstraint.gql'; +import { definition } from "."; +import Description from "./Description"; +import GENETIC_CONSTRAINT from "./GeneticConstraint.gql"; function Body({ id: ensemblId, label: symbol, entity }) { const variables = { ensemblId }; diff --git a/packages/sections/src/target/GeneticConstraint/Description.jsx b/packages/sections/src/target/GeneticConstraint/Description.jsx index 2b7eed0e8..1a23bc466 100644 --- a/packages/sections/src/target/GeneticConstraint/Description.jsx +++ b/packages/sections/src/target/GeneticConstraint/Description.jsx @@ -3,8 +3,8 @@ import { Link } from "ui"; function Description({ symbol }) { return ( <> - Mutational constraint observed in {symbol} canonical transcript in natural - populations. Source:{' '} + Mutational constraint observed in {symbol} canonical transcript in natural populations. + Source:{" "} gnomAD diff --git a/packages/sections/src/target/GeneticConstraint/GeneticConstraintTable.jsx b/packages/sections/src/target/GeneticConstraint/GeneticConstraintTable.jsx index 80bac751d..2dd1ffa93 100644 --- a/packages/sections/src/target/GeneticConstraint/GeneticConstraintTable.jsx +++ b/packages/sections/src/target/GeneticConstraint/GeneticConstraintTable.jsx @@ -4,7 +4,7 @@ import { Link, Tooltip, DataTable } from "ui"; import { defaultRowsPerPageOptions } from "../../constants"; import upperBin6Map from "./upperBin6Map"; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ filled: { display: "inline-block", border: "1px solid black", @@ -40,10 +40,7 @@ function ConstraintAssessment({ ensemblId, symbol, upperBin6 }) { for (let i = 0; i < 5; i++) { circles.push( - i ? classes.filled : classes.notFilled} - /> + i ? classes.filled : classes.notFilled} /> ); } @@ -91,11 +88,7 @@ function getColumns(ensemblId, symbol) { o/e = {oe} ({oeLower} - {oeUpper})
    {upperBin6 === null ? null : ( - + )} ), @@ -103,13 +96,7 @@ function getColumns(ensemblId, symbol) { ]; } -function GeneticConstraintTable({ - ensemblId, - symbol, - geneticConstraint, - query, - variables, -}) { +function GeneticConstraintTable({ ensemblId, symbol, geneticConstraint, query, variables }) { return ( { - const lof = geneticConstraint.find(gc => gc.constraintType === 'lof'); + const lof = geneticConstraint.find(gc => gc.constraintType === "lof"); return upperBin6Map[lof.upperBin6]; }} /> diff --git a/packages/sections/src/target/GeneticConstraint/index.js b/packages/sections/src/target/GeneticConstraint/index.js index 01a58134c..125e04486 100644 --- a/packages/sections/src/target/GeneticConstraint/index.js +++ b/packages/sections/src/target/GeneticConstraint/index.js @@ -1,6 +1,6 @@ export const definition = { - id: 'geneticConstraint', - name: 'Genetic Constraint', - shortName: 'GC', + id: "geneticConstraint", + name: "Genetic Constraint", + shortName: "GC", hasData: ({ geneticConstraint }) => geneticConstraint.length > 0, }; diff --git a/packages/sections/src/target/GeneticConstraint/upperBin6Map.js b/packages/sections/src/target/GeneticConstraint/upperBin6Map.js index ad9f6499f..18a72b1d1 100644 --- a/packages/sections/src/target/GeneticConstraint/upperBin6Map.js +++ b/packages/sections/src/target/GeneticConstraint/upperBin6Map.js @@ -1,10 +1,10 @@ const upperBin6Map = { - 0: 'very high constraint', - 1: 'high constraint', - 2: 'medium constraint', - 3: 'low constraint', - 4: 'very low constraint', - 5: 'very low constraint', + 0: "very high constraint", + 1: "high constraint", + 2: "medium constraint", + 3: "low constraint", + 4: "very low constraint", + 5: "very low constraint", }; export default upperBin6Map; diff --git a/packages/sections/src/target/KnownDrugs/Body.jsx b/packages/sections/src/target/KnownDrugs/Body.jsx index 1e8f3cc23..da34433b1 100644 --- a/packages/sections/src/target/KnownDrugs/Body.jsx +++ b/packages/sections/src/target/KnownDrugs/Body.jsx @@ -1,32 +1,32 @@ -import { Body as KnownDrugsBody } from '../../common/KnownDrugs'; -import Description from './Description'; -import { sentenceCase } from '../../utils/global'; +import { Body as KnownDrugsBody } from "../../common/KnownDrugs"; +import Description from "./Description"; +import { sentenceCase } from "../../utils/global"; -import { definition } from '.'; -import KNOWN_DRUGS_BODY_QUERY from './KnownDrugsQuery.gql'; -import client from '../../client'; +import { definition } from "."; +import KNOWN_DRUGS_BODY_QUERY from "./KnownDrugsQuery.gql"; +import client from "../../client"; const exportColumns = id => [ { - label: 'drugId', + label: "drugId", exportValue: row => row.drug.id, }, { - label: 'drugName', + label: "drugName", exportValue: row => row.drug.name, }, { - label: 'type', + label: "type", exportValue: row => row.drugType, }, { - label: 'mechanismOfAction', + label: "mechanismOfAction", exportValue: row => row.mechanismOfAction, }, { - label: 'actionType', + label: "actionType", exportValue: ({ drug: { mechanismsOfAction } }) => { - if (!mechanismsOfAction) return ''; + if (!mechanismsOfAction) return ""; const at = new Set(); mechanismsOfAction.rows.forEach(row => { row.targets.forEach(t => { @@ -40,28 +40,28 @@ const exportColumns = id => [ }, }, { - label: 'diseaseId', + label: "diseaseId", exportValue: row => row.disease.id, }, { - label: 'diseaseName', + label: "diseaseName", exportValue: row => row.disease.name, }, { - label: 'phase', + label: "phase", exportValue: row => row.phase, }, { - label: 'status', + label: "status", exportValue: row => row.status, }, { - label: 'source', + label: "source", exportValue: row => row.urls.map(reference => reference.url), }, ]; -function Body({ id: ensgId, label: symbol , entity}) { +function Body({ id: ensgId, label: symbol, entity }) { return ( } - columnsToShow={['drug', 'disease', 'clinicalTrials']} + columnsToShow={["drug", "disease", "clinicalTrials"]} stickyColumn="drug" exportColumns={exportColumns(ensgId)} client={client} diff --git a/packages/sections/src/target/KnownDrugs/Description.jsx b/packages/sections/src/target/KnownDrugs/Description.jsx index 49eee287d..4bbae4bee 100644 --- a/packages/sections/src/target/KnownDrugs/Description.jsx +++ b/packages/sections/src/target/KnownDrugs/Description.jsx @@ -3,9 +3,8 @@ import { Link } from "ui"; function Description({ symbol }) { return ( <> - Clinical precedence for drugs with investigational or approved indications - targeting {symbol} according to their curated mechanism - of action. Source:{' '} + Clinical precedence for drugs with investigational or approved indications targeting{" "} + {symbol} according to their curated mechanism of action. Source:{" "} ChEMBL diff --git a/packages/sections/src/target/KnownDrugs/Summary.jsx b/packages/sections/src/target/KnownDrugs/Summary.jsx index 495382558..fe345b1d6 100644 --- a/packages/sections/src/target/KnownDrugs/Summary.jsx +++ b/packages/sections/src/target/KnownDrugs/Summary.jsx @@ -1,7 +1,7 @@ -import { SummaryItem, usePlatformApi } from 'ui'; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import KNOWN_DRUGS_SUMMARY_FRAGMENT from './KnownDrugsSummary.gql'; +import { definition } from "."; +import KNOWN_DRUGS_SUMMARY_FRAGMENT from "./KnownDrugsSummary.gql"; function Summary() { const request = usePlatformApi(KNOWN_DRUGS_SUMMARY_FRAGMENT); @@ -12,7 +12,7 @@ function Summary() { request={request} renderSummary={data => ( <> - {(data.knownDrugs.uniqueDrugs || 0).toLocaleString()} drugs with{' '} + {(data.knownDrugs.uniqueDrugs || 0).toLocaleString()} drugs with{" "} {(data.knownDrugs.uniqueDiseases || 0).toLocaleString()} indications )} diff --git a/packages/sections/src/target/KnownDrugs/index.js b/packages/sections/src/target/KnownDrugs/index.js index ed5b4a396..ceea0b002 100644 --- a/packages/sections/src/target/KnownDrugs/index.js +++ b/packages/sections/src/target/KnownDrugs/index.js @@ -2,5 +2,5 @@ export const definition = { id: "knownDrugs", name: "Known Drugs", shortName: "KD", - hasData: (data) => data.knownDrugs?.count > 0 || data.knownDrugs.freeTextQuery || false, + hasData: data => data.knownDrugs?.count > 0 || data.knownDrugs.freeTextQuery || false, }; diff --git a/packages/sections/src/target/MolecularInteractions/Body.jsx b/packages/sections/src/target/MolecularInteractions/Body.jsx index 75b52159c..7e4591e3e 100644 --- a/packages/sections/src/target/MolecularInteractions/Body.jsx +++ b/packages/sections/src/target/MolecularInteractions/Body.jsx @@ -13,7 +13,7 @@ import StringTab from "./StringTab"; import INTERACTIONS_STATS_QUERY from "./InteractionsStats.gql"; -const getSummaryCounts = (ensgId) => +const getSummaryCounts = ensgId => client.query({ query: INTERACTIONS_STATS_QUERY, variables: { @@ -56,12 +56,12 @@ function Body({ label: symbol, id, entity }) { // load tabs summary counts useEffect(() => { - getSummaryCounts(id).then((res) => { + getSummaryCounts(id).then(res => { // when there is no data, interactions object is null, so there is no count setCounts( Object.assign( {}, - ...sources.map((k) => ({ + ...sources.map(k => ({ [k.id]: res.data.target[k.id] ? res.data.target[k.id].count : 0, })) ) @@ -76,7 +76,7 @@ function Body({ label: symbol, id, entity }) { ); // find first source (tab) with data and set that as the initially selected tab const initialTab = sources.find( - (s) => res.data.target[s.id] && res.data.target[s.id].count > 0 + s => res.data.target[s.id] && res.data.target[s.id].count > 0 ); if (initialTab) { setSource(initialTab.id); @@ -93,22 +93,14 @@ function Body({ label: symbol, id, entity }) { renderBody={() => ( <> {/* Interaction Resource */} - - {sources.map((s) => ( + + {sources.map(s => ( {s.label} {versions[s.id] ? ( - + Version: {versions[s.id]} ) : null} @@ -126,14 +118,10 @@ function Body({ label: symbol, id, entity }) {
    {/* intact stuff */} - {source === "intact" && counts[source] > 0 && ( - - )} + {source === "intact" && counts[source] > 0 && } {/* signor stuff */} - {source === "signor" && counts[source] > 0 && ( - - )} + {source === "signor" && counts[source] > 0 && } {/* reactome stuff */} {source === "reactome" && counts[source] > 0 && ( @@ -141,9 +129,7 @@ function Body({ label: symbol, id, entity }) { )} {/* string stuff */} - {source === "string" && counts[source] > 0 && ( - - )} + {source === "string" && counts[source] > 0 && }
    )} diff --git a/packages/sections/src/target/MolecularInteractions/Description.jsx b/packages/sections/src/target/MolecularInteractions/Description.jsx index 366ef6a4a..ebc2b649e 100644 --- a/packages/sections/src/target/MolecularInteractions/Description.jsx +++ b/packages/sections/src/target/MolecularInteractions/Description.jsx @@ -3,36 +3,32 @@ import { Link } from "ui"; function Description({ symbol }) { return ( <> - Physical and functional molecular interactions with{' '} - {symbol}. Source:{' '} - + Physical and functional molecular interactions with {symbol}. Source:{" "} + Open Targets - ,{' '} + ,{" "} IntAct - ,{' '} + ,{" "} Signor - ,{' '} + ,{" "} Reactome - ,{' '} + ,{" "} }, }); -const onLinkClick = (e) => { +const onLinkClick = e => { // handler to stop propagation of clicks on links in table rows // to avoid selection of a different row e.stopPropagation(); @@ -41,21 +41,15 @@ const columns = { ), exportLabel: "interactorB-AltId", - renderCell: (row) => ( + renderCell: row => ( <> - + {row.targetB ? ( {row.targetB.approvedSymbol} ) : ( - + {row.intB} )} @@ -67,32 +61,28 @@ const columns = { Alt ID:{" "} - + {row.intB} ), - exportValue: (row) => row.targetB?.approvedSymbol || row.intB, - filterValue: (row) => `${row.targetB?.approvedSymbol} ${row.intB}`, + exportValue: row => row.targetB?.approvedSymbol || row.intB, + filterValue: row => `${row.targetB?.approvedSymbol} ${row.intB}`, width: "40%", }, { id: "score", label: "Score", - renderCell: (row) => row.score.toFixed(2), - exportValue: (row) => row.score.toFixed(2), + renderCell: row => row.score.toFixed(2), + exportValue: row => row.score.toFixed(2), width: "14%", }, { id: "biologicalRole", label: "Biological role", - renderCell: (row) => ( + renderCell: row => ( <> A @@ -102,16 +92,14 @@ const columns = { ), - exportValue: (row) => - `A: ${row.intABiologicalRole}, B: ${row.intBBiologicalRole}`, - filterValue: (row) => - `${row.intABiologicalRole} ${row.intBBiologicalRole}`, + exportValue: row => `A: ${row.intABiologicalRole}, B: ${row.intBBiologicalRole}`, + filterValue: row => `${row.intABiologicalRole} ${row.intBBiologicalRole}`, width: "23%", }, { id: "evidences", label: "Interaction evidence entries", - renderCell: (row) => ( + renderCell: row => ( <> {row.count} @@ -119,7 +107,7 @@ const columns = { ), - exportValue: (row) => row.count, + exportValue: row => row.count, width: "23%", }, ], @@ -128,7 +116,7 @@ const columns = { { id: "interactionIdentifier", label: "Identifier", - renderCell: (row) => ( + renderCell: row => ( Host organism     ), - renderCell: (row) => ( + renderCell: row => ( <> {row.interactionTypeShortName} {row.hostOrganismScientificName ? ( <>
    - - {row.hostOrganismScientificName} - + {row.hostOrganismScientificName} ) : null} ), - filterValue: (row) => - `${row.interactionTypeShortName} ${row.hostOrganismScientificName}`, + filterValue: row => `${row.interactionTypeShortName} ${row.hostOrganismScientificName}`, width: "30%", }, { id: "methods", label: "Detection methods", - renderCell: (row) => ( + renderCell: row => ( <> m.shortName) - .join()} + tooltip={row.participantDetectionMethodA.map(m => m.shortName).join()} enabled > A - + @@ -196,26 +174,19 @@ const columns = { ), - filterValue: (row) => - `${row.participantDetectionMethodA.map((m) => m.shortName).join(" ")} ${ + filterValue: row => + `${row.participantDetectionMethodA.map(m => m.shortName).join(" ")} ${ row.interactionDetectionMethodShortName - } ${ - row.participantDetectionMethodB - ? row.participantDetectionMethodB[0].shortName - : "" - }`, + } ${row.participantDetectionMethodB ? row.participantDetectionMethodB[0].shortName : ""}`, width: "25%", }, { id: "pubmedId", label: "Publication", - renderCell: (d) => ( + renderCell: d => ( {d.pubmedId && d.pubmedId.indexOf("unassigned") === -1 ? ( - + {d.pubmedId} ) : ( @@ -223,7 +194,7 @@ const columns = { )} ), - filterValue: (row) => row.pubmedId, + filterValue: row => row.pubmedId, width: "20%", }, ], @@ -232,32 +203,31 @@ const columns = { const evidenceColsExport = [ { label: "Identifier", - exportValue: (row) => row.interactionIdentifier, + exportValue: row => row.interactionIdentifier, }, { label: "interaction", - exportValue: (row) => row.interactionTypeShortName, + exportValue: row => row.interactionTypeShortName, }, { label: "interaction host organism", - exportValue: (row) => row.hostOrganismScientificName, + exportValue: row => row.hostOrganismScientificName, }, { label: "detection method A", - exportValue: (row) => - row.participantDetectionMethodA.map((m) => m.shortName), + exportValue: row => row.participantDetectionMethodA.map(m => m.shortName), }, { label: "detection method short name", - exportValue: (row) => row.interactionDetectionMethodShortName, + exportValue: row => row.interactionDetectionMethodShortName, }, { label: "detection method B", - exportValue: (row) => row.participantDetectionMethodB[0].shortName, + exportValue: row => row.participantDetectionMethodB[0].shortName, }, { label: "publication id", - exportValue: (row) => row.pubmedId, + exportValue: row => row.pubmedId, }, ]; const id = "intact"; @@ -274,7 +244,7 @@ function IntactTab({ ensgId, symbol }) { // load tab data when new tab selected (also on first load) useEffect(() => { setLoading(true); - getData(INTERACTIONS_QUERY, ensgId, id, index, size).then((res) => { + getData(INTERACTIONS_QUERY, ensgId, id, index, size).then(res => { if (res.data.target.interactions) { setLoading(false); setData(res.data.target.interactions.rows); @@ -307,7 +277,7 @@ function IntactTab({ ensgId, symbol }) { dataDownloaderFileStem={`${symbol}-molecular-interactions-interactors`} hover selected - onRowClick={(r) => { + onRowClick={r => { setEvidence(r.evidences); setSelectedIntB(r.targetB?.approvedSymbol || r.intB); }} @@ -317,8 +287,7 @@ function IntactTab({ ensgId, symbol }) { onPagination={(page, pageSize) => { setEvidence(data[page * pageSize].evidences); setSelectedIntB( - data[page * pageSize].targetB?.approvedSymbol || - data[page * pageSize].intB + data[page * pageSize].targetB?.approvedSymbol || data[page * pageSize].intB ); }} rowsPerPageOptions={defaultRowsPerPageOptions} diff --git a/packages/sections/src/target/MolecularInteractions/ReactomeTab.jsx b/packages/sections/src/target/MolecularInteractions/ReactomeTab.jsx index f8a75cf9a..70555c039 100644 --- a/packages/sections/src/target/MolecularInteractions/ReactomeTab.jsx +++ b/packages/sections/src/target/MolecularInteractions/ReactomeTab.jsx @@ -5,11 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPlay } from "@fortawesome/free-solid-svg-icons"; import client from "../../client"; -import { - MethodIconText, - MethodIconArrow, - MethodIconExpandArrow, -} from "./custom/MethodIcons"; +import { MethodIconText, MethodIconArrow, MethodIconExpandArrow } from "./custom/MethodIcons"; import { defaultRowsPerPageOptions } from "../../constants"; import INTERACTIONS_QUERY from "./InteractionsQuery.gql"; @@ -25,7 +21,7 @@ const getData = (query, ensgId, sourceDatabase, index, size) => }, }); -const onLinkClick = (e) => { +const onLinkClick = e => { // handler to stop propagation of clicks on links in table rows // to avoid selection of a different row e.stopPropagation(); @@ -47,21 +43,15 @@ const columns = { ), exportLabel: "interactorB-AltId", - renderCell: (row) => ( + renderCell: row => ( <> - + {row.targetB ? ( {row.targetB.approvedSymbol} ) : ( - + {row.intB} )} @@ -73,25 +63,21 @@ const columns = { Alt ID:{" "} - + {row.intB} ), - exportValue: (row) => row.targetB?.approvedSymbol || row.intB, - filterValue: (row) => `${row.targetB?.approvedSymbol} ${row.intB}`, + exportValue: row => row.targetB?.approvedSymbol || row.intB, + filterValue: row => `${row.targetB?.approvedSymbol} ${row.intB}`, width: "65%", }, { id: "sizeEvidences", label: "Interaction evidence entries", - renderCell: (row) => ( + renderCell: row => ( <> {row.count} @@ -99,7 +85,7 @@ const columns = { ), - exportValue: (row) => row.count, + exportValue: row => row.count, width: "35%", }, ], @@ -109,7 +95,7 @@ const columns = { { id: "interactionIdentifier", label: "ID", - renderCell: (row) => ( + renderCell: row => ( Host organism     ), - renderCell: (row) => ( + renderCell: row => ( <> {row.interactionTypeShortName}
    - - Organism: {row.hostOrganismScientificName} - + Organism: {row.hostOrganismScientificName} ), - filterValue: (row) => - `${row.interactionTypeShortName} ${row.hostOrganismScientificName}`, + filterValue: row => `${row.interactionTypeShortName} ${row.hostOrganismScientificName}`, width: "30%", }, { id: "methods", label: "Detection methods", - renderCell: (row) => ( + renderCell: row => ( <> m.shortName) - .join()} + tooltip={row.participantDetectionMethodA.map(m => m.shortName).join()} enabled > A - - + + B - + ), - filterValue: (row) => - `${row.participantDetectionMethodA.map((m) => m.shortName).join(" ")} ${ + filterValue: row => + `${row.participantDetectionMethodA.map(m => m.shortName).join(" ")} ${ row.interactionDetectionMethodShortName - } ${ - row.participantDetectionMethodB - ? row.participantDetectionMethodB[0].shortName - : "" - } ${row.expansionMethodShortName}`, + } ${row.participantDetectionMethodB ? row.participantDetectionMethodB[0].shortName : ""} ${ + row.expansionMethodShortName + }`, width: "25%", }, { id: "pubmedId", label: "Publication", - renderCell: (d) => + renderCell: d => d.pubmedId && d.pubmedId.indexOf("unassigned") === -1 ? ( {d.pubmedId} @@ -194,7 +164,7 @@ const columns = { ) : ( d.pubmedId ), - filterValue: (row) => row.pubmedId, + filterValue: row => row.pubmedId, width: "20%", }, ], @@ -203,24 +173,23 @@ const columns = { const evidenceColsExport = [ { label: "Interaction host organism", - exportValue: (row) => row.hostOrganismScientificName, + exportValue: row => row.hostOrganismScientificName, }, { label: "detection method A", - exportValue: (row) => - row.participantDetectionMethodA.map((m) => m.shortName), + exportValue: row => row.participantDetectionMethodA.map(m => m.shortName), }, { label: "detection method short name", - exportValue: (row) => row.interactionDetectionMethodShortName, + exportValue: row => row.interactionDetectionMethodShortName, }, { label: "detection method B", - exportValue: (row) => row.participantDetectionMethodB[0].shortName, + exportValue: row => row.participantDetectionMethodB[0].shortName, }, { label: "expansion method short name", - exportValue: (row) => row.expansionMethodShortName, + exportValue: row => row.expansionMethodShortName, }, ]; @@ -237,7 +206,7 @@ function ReactomeTab({ ensgId, symbol }) { // load tab data when new tab selected (also on first load) useEffect(() => { setLoading(true); - getData(INTERACTIONS_QUERY, ensgId, id, index, size).then((res) => { + getData(INTERACTIONS_QUERY, ensgId, id, index, size).then(res => { if (res.data.target.interactions) { setLoading(false); setData(res.data.target.interactions.rows); @@ -269,7 +238,7 @@ function ReactomeTab({ ensgId, symbol }) { dataDownloaderFileStem={`${symbol}-molecular-interactions-interactors`} hover selected - onRowClick={(r) => { + onRowClick={r => { setEvidence(r.evidences); setSelectedIntB(r.targetB?.approvedSymbol || r.intB); }} @@ -279,8 +248,7 @@ function ReactomeTab({ ensgId, symbol }) { onPagination={(page, pageSize) => { setEvidence(data[page * pageSize].evidences); setSelectedIntB( - data[page * pageSize].targetB?.approvedSymbol || - data[page * pageSize].intB + data[page * pageSize].targetB?.approvedSymbol || data[page * pageSize].intB ); }} rowsPerPageOptions={defaultRowsPerPageOptions} diff --git a/packages/sections/src/target/MolecularInteractions/SignorTab.jsx b/packages/sections/src/target/MolecularInteractions/SignorTab.jsx index 1088283c4..c509481d9 100644 --- a/packages/sections/src/target/MolecularInteractions/SignorTab.jsx +++ b/packages/sections/src/target/MolecularInteractions/SignorTab.jsx @@ -20,7 +20,7 @@ const getData = (query, ensgId, sourceDatabase, index, size) => }, }); -const onLinkClick = (e) => { +const onLinkClick = e => { // handler to stop propagation of clicks on links in table rows // to avoid selection of a different row e.stopPropagation(); @@ -42,21 +42,15 @@ const columns = { ), exportLabel: "interactorB-AltId", - renderCell: (row) => ( + renderCell: row => ( <> - + {row.targetB ? ( {row.targetB.approvedSymbol} ) : ( - + {row.intB} )} @@ -68,25 +62,21 @@ const columns = { Alt ID:{" "} - + {row.intB} ), - exportValue: (row) => row.targetB?.approvedSymbol || row.intB, - filterValue: (row) => `${row.targetB?.approvedSymbol} ${row.intB}`, + exportValue: row => row.targetB?.approvedSymbol || row.intB, + filterValue: row => `${row.targetB?.approvedSymbol} ${row.intB}`, width: "44%", }, { id: "role", label: "Biological role", - renderCell: (row) => ( + renderCell: row => ( <> A @@ -96,16 +86,14 @@ const columns = { ), - exportValue: (row) => - `A: ${row.intABiologicalRole}, B: ${row.intBBiologicalRole}`, - filterValue: (row) => - `${row.intABiologicalRole} ${row.intBBiologicalRole}`, + exportValue: row => `A: ${row.intABiologicalRole}, B: ${row.intBBiologicalRole}`, + filterValue: row => `${row.intABiologicalRole} ${row.intBBiologicalRole}`, width: "28%", }, { id: "evidences", label: "Interaction evidence entries", - renderCell: (row) => ( + renderCell: row => ( <> {row.count} @@ -113,7 +101,7 @@ const columns = { ), - exportValue: (row) => row.count, + exportValue: row => row.count, width: "28%", }, ], @@ -134,60 +122,45 @@ const columns = { Host organism ), - renderCell: (row) => ( + renderCell: row => ( <> {row.interactionTypeShortName}
    - - {row.hostOrganismScientificName} - + {row.hostOrganismScientificName} ), - filterValue: (row) => - `${row.interactionTypeShortName} ${row.hostOrganismScientificName}`, + filterValue: row => `${row.interactionTypeShortName} ${row.hostOrganismScientificName}`, width: "30%", }, { id: "methods", label: "Detection methods", - renderCell: (row) => ( + renderCell: row => ( <> m.shortName) - .join()} + tooltip={row.participantDetectionMethodA.map(m => m.shortName).join()} enabled > A - - + + B ), - filterValue: (row) => - `${row.participantDetectionMethodA.map((m) => m.shortName).join(" ")} ${ + filterValue: row => + `${row.participantDetectionMethodA.map(m => m.shortName).join(" ")} ${ row.interactionDetectionMethodShortName - } ${ - row.participantDetectionMethodB - ? row.participantDetectionMethodB[0].shortName - : "" - }`, + } ${row.participantDetectionMethodB ? row.participantDetectionMethodB[0].shortName : ""}`, width: "25%", }, { id: "pubmedId", label: "Publication", - renderCell: (d) => + renderCell: d => d.pubmedId && d.pubmedId.indexOf("unassigned") === -1 ? ( {d.pubmedId} @@ -195,7 +168,7 @@ const columns = { ) : ( d.pubmedId ), - filterValue: (row) => row.pubmedId, + filterValue: row => row.pubmedId, width: "20%", }, ], @@ -204,20 +177,19 @@ const columns = { const evidenceColsExport = [ { label: "Interaction host organism", - exportValue: (row) => row.hostOrganismScientificName, + exportValue: row => row.hostOrganismScientificName, }, { label: "detection method A", - exportValue: (row) => - row.participantDetectionMethodA.map((m) => m.shortName), + exportValue: row => row.participantDetectionMethodA.map(m => m.shortName), }, { label: "detection method short name", - exportValue: (row) => row.interactionDetectionMethodShortName, + exportValue: row => row.interactionDetectionMethodShortName, }, { label: "detection method B", - exportValue: (row) => row.participantDetectionMethodB[0].shortName, + exportValue: row => row.participantDetectionMethodB[0].shortName, }, ]; @@ -236,7 +208,7 @@ function SignorTab({ ensgId, symbol }) { // load tab data when new tab selected (also on first load) useEffect(() => { setLoading(true); - getData(INTERACTIONS_QUERY, ensgId, id, index, size).then((res) => { + getData(INTERACTIONS_QUERY, ensgId, id, index, size).then(res => { if (res.data.target.interactions) { setLoading(false); setData(res.data.target.interactions.rows); @@ -269,7 +241,7 @@ function SignorTab({ ensgId, symbol }) { dataDownloaderFileStem={`${symbol}-molecular-interactions-interactors`} hover selected - onRowClick={(r) => { + onRowClick={r => { setEvidence(r.evidences); setSelectedIntB(r.targetB?.approvedSymbol || r.intB); }} @@ -279,8 +251,7 @@ function SignorTab({ ensgId, symbol }) { onPagination={(page, pageSize) => { setEvidence(data[page * pageSize].evidences); setSelectedIntB( - data[page * pageSize].targetB?.approvedSymbol || - data[page * pageSize].intB + data[page * pageSize].targetB?.approvedSymbol || data[page * pageSize].intB ); }} rowsPerPageOptions={defaultRowsPerPageOptions} diff --git a/packages/sections/src/target/MolecularInteractions/StringTab.jsx b/packages/sections/src/target/MolecularInteractions/StringTab.jsx index 79f982e09..2256ddcb9 100644 --- a/packages/sections/src/target/MolecularInteractions/StringTab.jsx +++ b/packages/sections/src/target/MolecularInteractions/StringTab.jsx @@ -102,8 +102,8 @@ const color = scaleQuantize().domain([0, 1]).range(colorRange); const getScoreForColumn = (evidences, evidencesId) => evidences - .filter((e) => e.interactionDetectionMethodShortName === evidencesId) - .map((e) => e.evidenceScore)[0]; // TODO: the [0] is to catch a data error: remove when fixed. + .filter(e => e.interactionDetectionMethodShortName === evidencesId) + .map(e => e.evidenceScore)[0]; // TODO: the [0] is to catch a data error: remove when fixed. const getHeatmapCell = (score, classes) => ( ( + renderCell: row => ( {row.targetB ? ( - - {row.targetB.approvedSymbol} - + {row.targetB.approvedSymbol} ) : ( {row.intB} @@ -134,8 +132,8 @@ function getColumns(classes) { )} ), - exportValue: (row) => row.targetB?.approvedSymbol || row.intB, - filterValue: (row) => `${row.targetB?.approvedSymbol} ${row.intB}`, + exportValue: row => row.targetB?.approvedSymbol || row.intB, + filterValue: row => `${row.targetB?.approvedSymbol} ${row.intB}`, }, { id: "overallScore", @@ -152,9 +150,9 @@ function getColumns(classes) { sortLabel: classes.sortLabel, innerLabel: classes.innerLabel, }, - renderCell: (row) => row.score.toFixed(3), - exportValue: (row) => row.score.toFixed(3), - filterValue: (row) => row.score.toFixed(3), + renderCell: row => row.score.toFixed(3), + exportValue: row => row.score.toFixed(3), + filterValue: row => row.score.toFixed(3), }, { id: "neighbourhood", @@ -165,15 +163,9 @@ function getColumns(classes) { sortLabel: classes.sortLabel, innerLabel: classes.innerLabel, }, - renderCell: (row) => - getHeatmapCell( - getScoreForColumn(row.evidences, "neighborhood"), - classes - ), - exportValue: (row) => - getScoreForColumn(row.evidences, "neighborhood")?.toFixed(3), - filterValue: (row) => - getScoreForColumn(row.evidences, "neighborhood")?.toFixed(3), + renderCell: row => getHeatmapCell(getScoreForColumn(row.evidences, "neighborhood"), classes), + exportValue: row => getScoreForColumn(row.evidences, "neighborhood")?.toFixed(3), + filterValue: row => getScoreForColumn(row.evidences, "neighborhood")?.toFixed(3), }, { id: "geneFusion", @@ -184,12 +176,9 @@ function getColumns(classes) { sortLabel: classes.sortLabel, innerLabel: classes.innerLabel, }, - renderCell: (row) => - getHeatmapCell(getScoreForColumn(row.evidences, "fusion"), classes), - exportValue: (row) => - getScoreForColumn(row.evidences, "fusion")?.toFixed(3), - filterValue: (row) => - getScoreForColumn(row.evidences, "fusion")?.toFixed(3), + renderCell: row => getHeatmapCell(getScoreForColumn(row.evidences, "fusion"), classes), + exportValue: row => getScoreForColumn(row.evidences, "fusion")?.toFixed(3), + filterValue: row => getScoreForColumn(row.evidences, "fusion")?.toFixed(3), }, { id: "occurance", @@ -200,15 +189,9 @@ function getColumns(classes) { sortLabel: classes.sortLabel, innerLabel: classes.innerLabel, }, - renderCell: (row) => - getHeatmapCell( - getScoreForColumn(row.evidences, "cooccurence"), - classes - ), - exportValue: (row) => - getScoreForColumn(row.evidences, "cooccurence")?.toFixed(3), - filterValue: (row) => - getScoreForColumn(row.evidences, "cooccurence")?.toFixed(3), + renderCell: row => getHeatmapCell(getScoreForColumn(row.evidences, "cooccurence"), classes), + exportValue: row => getScoreForColumn(row.evidences, "cooccurence")?.toFixed(3), + filterValue: row => getScoreForColumn(row.evidences, "cooccurence")?.toFixed(3), }, { id: "expression", @@ -219,15 +202,9 @@ function getColumns(classes) { sortLabel: classes.sortLabel, innerLabel: classes.innerLabel, }, - renderCell: (row) => - getHeatmapCell( - getScoreForColumn(row.evidences, "coexpression"), - classes - ), - exportValue: (row) => - getScoreForColumn(row.evidences, "coexpression")?.toFixed(3), - filterValue: (row) => - getScoreForColumn(row.evidences, "coexpression")?.toFixed(3), + renderCell: row => getHeatmapCell(getScoreForColumn(row.evidences, "coexpression"), classes), + exportValue: row => getScoreForColumn(row.evidences, "coexpression")?.toFixed(3), + filterValue: row => getScoreForColumn(row.evidences, "coexpression")?.toFixed(3), }, { id: "experiments", @@ -238,15 +215,9 @@ function getColumns(classes) { sortLabel: classes.sortLabel, innerLabel: classes.innerLabel, }, - renderCell: (row) => - getHeatmapCell( - getScoreForColumn(row.evidences, "experimental"), - classes - ), - exportValue: (row) => - getScoreForColumn(row.evidences, "experimental")?.toFixed(3), - filterValue: (row) => - getScoreForColumn(row.evidences, "experimental")?.toFixed(3), + renderCell: row => getHeatmapCell(getScoreForColumn(row.evidences, "experimental"), classes), + exportValue: row => getScoreForColumn(row.evidences, "experimental")?.toFixed(3), + filterValue: row => getScoreForColumn(row.evidences, "experimental")?.toFixed(3), }, { id: "databases", @@ -257,12 +228,9 @@ function getColumns(classes) { sortLabel: classes.sortLabel, innerLabel: classes.innerLabel, }, - renderCell: (row) => - getHeatmapCell(getScoreForColumn(row.evidences, "database"), classes), - exportValue: (row) => - getScoreForColumn(row.evidences, "database")?.toFixed(3), - filterValue: (row) => - getScoreForColumn(row.evidences, "database")?.toFixed(3), + renderCell: row => getHeatmapCell(getScoreForColumn(row.evidences, "database"), classes), + exportValue: row => getScoreForColumn(row.evidences, "database")?.toFixed(3), + filterValue: row => getScoreForColumn(row.evidences, "database")?.toFixed(3), }, { id: "textMining", @@ -273,12 +241,9 @@ function getColumns(classes) { sortLabel: classes.sortLabel, innerLabel: classes.innerLabel, }, - renderCell: (row) => - getHeatmapCell(getScoreForColumn(row.evidences, "textmining"), classes), - exportValue: (row) => - getScoreForColumn(row.evidences, "textmining")?.toFixed(3), - filterValue: (row) => - getScoreForColumn(row.evidences, "textmining")?.toFixed(3), + renderCell: row => getHeatmapCell(getScoreForColumn(row.evidences, "textmining"), classes), + exportValue: row => getScoreForColumn(row.evidences, "textmining")?.toFixed(3), + filterValue: row => getScoreForColumn(row.evidences, "textmining")?.toFixed(3), }, { id: "homology", @@ -289,12 +254,9 @@ function getColumns(classes) { sortLabel: classes.sortLabel, innerLabel: classes.innerLabel, }, - renderCell: (row) => - getHeatmapCell(getScoreForColumn(row.evidences, "homology"), classes), - exportValue: (row) => - getScoreForColumn(row.evidences, "homology")?.toFixed(3), - filterValue: (row) => - getScoreForColumn(row.evidences, "homology")?.toFixed(3), + renderCell: row => getHeatmapCell(getScoreForColumn(row.evidences, "homology"), classes), + exportValue: row => getScoreForColumn(row.evidences, "homology")?.toFixed(3), + filterValue: row => getScoreForColumn(row.evidences, "homology")?.toFixed(3), }, ]; } @@ -308,7 +270,7 @@ function StringTab({ ensgId, symbol }) { // load tab data when new tab selected (also on first load) useEffect(() => { setLoading(true); - getData(INTERACTIONS_QUERY, ensgId, id, index, size).then((res) => { + getData(INTERACTIONS_QUERY, ensgId, id, index, size).then(res => { if (res.data.target.interactions) { setLoading(false); setData(res.data.target.interactions.rows); diff --git a/packages/sections/src/target/MolecularInteractions/Summary.jsx b/packages/sections/src/target/MolecularInteractions/Summary.jsx index adfdbd983..c1d9e9ac4 100644 --- a/packages/sections/src/target/MolecularInteractions/Summary.jsx +++ b/packages/sections/src/target/MolecularInteractions/Summary.jsx @@ -1,7 +1,7 @@ -import { SummaryItem, usePlatformApi } from 'ui'; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import MOLECULAR_INTERACTIONS_SUMMARY_FRAGMENT from './InteractionsSummary.gql'; +import { definition } from "."; +import MOLECULAR_INTERACTIONS_SUMMARY_FRAGMENT from "./InteractionsSummary.gql"; function Summary() { const request = usePlatformApi(MOLECULAR_INTERACTIONS_SUMMARY_FRAGMENT); @@ -10,16 +10,13 @@ function Summary() { - `${data.interactions.count} physical or functional interactors` - } + renderSummary={data => `${data.interactions.count} physical or functional interactors`} /> ); } Summary.fragments = { - TargetMolecularInteractionsSummaryFragment: - MOLECULAR_INTERACTIONS_SUMMARY_FRAGMENT, + TargetMolecularInteractionsSummaryFragment: MOLECULAR_INTERACTIONS_SUMMARY_FRAGMENT, }; export default Summary; diff --git a/packages/sections/src/target/MolecularInteractions/custom/MethodIcons.jsx b/packages/sections/src/target/MolecularInteractions/custom/MethodIcons.jsx index 9c4417e9f..3860c2eb7 100644 --- a/packages/sections/src/target/MolecularInteractions/custom/MethodIcons.jsx +++ b/packages/sections/src/target/MolecularInteractions/custom/MethodIcons.jsx @@ -1,24 +1,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faCircle, - faArrowsAltH, - faExpandArrowsAlt, -} from "@fortawesome/free-solid-svg-icons"; +import { faCircle, faArrowsAltH, faExpandArrowsAlt } from "@fortawesome/free-solid-svg-icons"; import { v1 } from "uuid"; import { Tooltip } from "ui"; -function MethodIcon({ - tooltip, - enabled = true, - children, - notooltip, - small = false, -}) { +function MethodIcon({ tooltip, enabled = true, children, notooltip, small = false }) { let title; if (!enabled || !tooltip) title = "no data"; else if (Array.isArray(tooltip)) { - title = tooltip.map((m) => ( + title = tooltip.map(m => ( {m}
    @@ -44,20 +34,9 @@ function MethodIcon({ return notooltip ? icon : {icon}; } -function MethodIconText({ - tooltip, - enabled = true, - notooltip, - children, - small = false, -}) { +function MethodIconText({ tooltip, enabled = true, notooltip, children, small = false }) { return ( - + - + + ); } -function MethodIconArrow({ - tooltip, - enabled = true, - notooltip, - small = false, -}) { +function MethodIconArrow({ tooltip, enabled = true, notooltip, small = false }) { return ( - - + + ); } diff --git a/packages/sections/src/target/MolecularInteractions/index.js b/packages/sections/src/target/MolecularInteractions/index.js index ca2a049dd..24f887923 100644 --- a/packages/sections/src/target/MolecularInteractions/index.js +++ b/packages/sections/src/target/MolecularInteractions/index.js @@ -1,6 +1,6 @@ export const definition = { - id: 'interactions', - name: 'Molecular Interactions', - shortName: 'MI', + id: "interactions", + name: "Molecular Interactions", + shortName: "MI", hasData: data => data.interactions?.count > 0 || false, }; diff --git a/packages/sections/src/target/MousePhenotypes/AllelicCompositionDrawer.jsx b/packages/sections/src/target/MousePhenotypes/AllelicCompositionDrawer.jsx index 321eab832..06897f0f0 100644 --- a/packages/sections/src/target/MousePhenotypes/AllelicCompositionDrawer.jsx +++ b/packages/sections/src/target/MousePhenotypes/AllelicCompositionDrawer.jsx @@ -1,18 +1,12 @@ import { useState } from "react"; -import { - Drawer, - Link as MuiLink, - IconButton, - Paper, - Typography, -} from "@mui/material"; +import { Drawer, Link as MuiLink, IconButton, Paper, Typography } from "@mui/material"; import { makeStyles } from "@mui/styles"; import { faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Link, PublicationsDrawer, MouseModelAllelicComposition } from "ui"; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ drawerLink: { cursor: "pointer", }, @@ -43,7 +37,7 @@ const useStyles = makeStyles((theme) => ({ function Model({ model }) { const { id, allelicComposition, geneticBackground, literature } = model; - const entries = literature ? literature.map((lit) => ({ name: lit })) : []; + const entries = literature ? literature.map(lit => ({ name: lit })) : []; return ( <> @@ -53,11 +47,7 @@ function Model({ model }) { />
    - +
    ); @@ -81,13 +71,8 @@ function AllelicCompositionDrawer({ biologicalModels }) { return ( <> - toggleOpen()} - underline="none" - > - {biologicalModels.length}{" "} - {biologicalModels.length === 1 ? "model" : "models"} + toggleOpen()} underline="none"> + {biologicalModels.length} {biologicalModels.length === 1 ? "model" : "models"}     - {biologicalModels.map((model) => ( + {biologicalModels.map(model => ( diff --git a/packages/sections/src/target/MousePhenotypes/Body.jsx b/packages/sections/src/target/MousePhenotypes/Body.jsx index f3f61cd2e..0401dbd5a 100644 --- a/packages/sections/src/target/MousePhenotypes/Body.jsx +++ b/packages/sections/src/target/MousePhenotypes/Body.jsx @@ -1,11 +1,11 @@ -import { useQuery } from '@apollo/client'; -import { SectionItem } from 'ui'; +import { useQuery } from "@apollo/client"; +import { SectionItem } from "ui"; -import { definition } from '.'; -import Description from './Description'; -import PhenotypesTable from './PhenotypesTable'; +import { definition } from "."; +import Description from "./Description"; +import PhenotypesTable from "./PhenotypesTable"; -import MOUSE_PHENOTYPES_QUERY from './MousePhenotypes.gql'; +import MOUSE_PHENOTYPES_QUERY from "./MousePhenotypes.gql"; function Body({ id, label: symbol, entity }) { const variables = { ensemblId: id }; diff --git a/packages/sections/src/target/MousePhenotypes/Description.jsx b/packages/sections/src/target/MousePhenotypes/Description.jsx index 8e534c17f..8831124d0 100644 --- a/packages/sections/src/target/MousePhenotypes/Description.jsx +++ b/packages/sections/src/target/MousePhenotypes/Description.jsx @@ -3,8 +3,7 @@ import { Link } from "ui"; function Description({ symbol }) { return ( <> - Phenotypes associated with {symbol} murine homologue(s). - Source:{' '} + Phenotypes associated with {symbol} murine homologue(s). Source:{" "} MGI diff --git a/packages/sections/src/target/MousePhenotypes/PhenotypesTable.jsx b/packages/sections/src/target/MousePhenotypes/PhenotypesTable.jsx index 62551e659..7e8131a85 100644 --- a/packages/sections/src/target/MousePhenotypes/PhenotypesTable.jsx +++ b/packages/sections/src/target/MousePhenotypes/PhenotypesTable.jsx @@ -32,7 +32,7 @@ const columns = [ return "categories"; }, renderCell: ({ modelPhenotypeClasses }) => { - const entries = modelPhenotypeClasses.map((phenotypeClass) => ({ + const entries = modelPhenotypeClasses.map(phenotypeClass => ({ name: phenotypeClass.label, url: `https://identifiers.org/${phenotypeClass.id}`, group: "Categories", @@ -46,7 +46,7 @@ const columns = [ ); }, exportValue: ({ modelPhenotypeClasses }) => - modelPhenotypeClasses.map((phenotypeClass) => phenotypeClass.label), + modelPhenotypeClasses.map(phenotypeClass => phenotypeClass.label), }, { id: "lol", @@ -54,8 +54,7 @@ const columns = [ renderCell: ({ biologicalModels }) => ( ), - exportValue: ({ biologicalModels }) => - biologicalModels.map((bm) => bm.allelicComposition), + exportValue: ({ biologicalModels }) => biologicalModels.map(bm => bm.allelicComposition), }, ]; diff --git a/packages/sections/src/target/MousePhenotypes/Summary.jsx b/packages/sections/src/target/MousePhenotypes/Summary.jsx index 692545319..cb88e828a 100644 --- a/packages/sections/src/target/MousePhenotypes/Summary.jsx +++ b/packages/sections/src/target/MousePhenotypes/Summary.jsx @@ -1,7 +1,7 @@ -import { SummaryItem, usePlatformApi } from 'ui'; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import MOUSE_PHENOTYPES_SUMMARY_FRAGMENT from './MousePhenotypesSummary.gql'; +import { definition } from "."; +import MOUSE_PHENOTYPES_SUMMARY_FRAGMENT from "./MousePhenotypesSummary.gql"; function Summary() { const request = usePlatformApi(MOUSE_PHENOTYPES_SUMMARY_FRAGMENT); @@ -11,9 +11,7 @@ function Summary() { definition={definition} request={request} renderSummary={({ mousePhenotypes }) => - `${mousePhenotypes.length} distinct phenotype${ - mousePhenotypes.length > 1 ? 's' : '' - }` + `${mousePhenotypes.length} distinct phenotype${mousePhenotypes.length > 1 ? "s" : ""}` } /> ); diff --git a/packages/sections/src/target/MousePhenotypes/index.js b/packages/sections/src/target/MousePhenotypes/index.js index 049279497..343d2ce8e 100644 --- a/packages/sections/src/target/MousePhenotypes/index.js +++ b/packages/sections/src/target/MousePhenotypes/index.js @@ -1,6 +1,6 @@ export const definition = { - id: 'mousePhenotypes', - name: 'Mouse Phenotypes', - shortName: 'MP', + id: "mousePhenotypes", + name: "Mouse Phenotypes", + shortName: "MP", hasData: data => data.mousePhenotypes.length > 0, }; diff --git a/packages/sections/src/target/Pathways/Body.jsx b/packages/sections/src/target/Pathways/Body.jsx index b78a52562..92a597c50 100644 --- a/packages/sections/src/target/Pathways/Body.jsx +++ b/packages/sections/src/target/Pathways/Body.jsx @@ -1,12 +1,11 @@ -import { useQuery } from '@apollo/client'; -import { SectionItem } from 'ui'; +import { useQuery } from "@apollo/client"; +import { SectionItem } from "ui"; -import { definition } from '.'; -import Description from './Description'; -import PathwaysTable from './PathwaysTable'; +import { definition } from "."; +import Description from "./Description"; +import PathwaysTable from "./PathwaysTable"; - -import PATHWAYS_QUERY from './Pathways.gql'; +import PATHWAYS_QUERY from "./Pathways.gql"; function Body({ id: ensemblId, label: symbol, entity }) { const variables = { ensemblId }; diff --git a/packages/sections/src/target/Pathways/Description.jsx b/packages/sections/src/target/Pathways/Description.jsx index a68ea16ee..352211a3c 100644 --- a/packages/sections/src/target/Pathways/Description.jsx +++ b/packages/sections/src/target/Pathways/Description.jsx @@ -3,7 +3,7 @@ import { Link } from "ui"; function Description({ symbol }) { return ( <> - Biological pathways where {symbol} is present. Source:{' '} + Biological pathways where {symbol} is present. Source:{" "} Reactome diff --git a/packages/sections/src/target/Pathways/PathwaysTable.jsx b/packages/sections/src/target/Pathways/PathwaysTable.jsx index f22d6775a..c1e708d53 100644 --- a/packages/sections/src/target/Pathways/PathwaysTable.jsx +++ b/packages/sections/src/target/Pathways/PathwaysTable.jsx @@ -24,10 +24,7 @@ function getColumns(symbol) { id: "pathwayId", label: "View target and pathway", renderCell: ({ pathwayId }) => ( - + Reactome pathway browser ), diff --git a/packages/sections/src/target/Pathways/Summary.jsx b/packages/sections/src/target/Pathways/Summary.jsx index 7677b29f7..bff6f709f 100644 --- a/packages/sections/src/target/Pathways/Summary.jsx +++ b/packages/sections/src/target/Pathways/Summary.jsx @@ -1,8 +1,7 @@ +import { SummaryItem, usePlatformApi } from "ui"; -import { SummaryItem, usePlatformApi } from 'ui'; - -import { definition } from '.'; -import PATHWAYS_SUMMARY_FRAGMENT from './PathwaysSummary.gql'; +import { definition } from "."; +import PATHWAYS_SUMMARY_FRAGMENT from "./PathwaysSummary.gql"; function Summary() { const request = usePlatformApi(PATHWAYS_SUMMARY_FRAGMENT); diff --git a/packages/sections/src/target/Pathways/index.js b/packages/sections/src/target/Pathways/index.js index 9604655ca..40533b8c5 100644 --- a/packages/sections/src/target/Pathways/index.js +++ b/packages/sections/src/target/Pathways/index.js @@ -1,7 +1,6 @@ export const definition = { - id: 'pathways', - name: 'Pathways', - shortName: 'PW', + id: "pathways", + name: "Pathways", + shortName: "PW", hasData: data => data.pathways.length > 0, }; - diff --git a/packages/sections/src/target/Pharmacogenomics/Summary.jsx b/packages/sections/src/target/Pharmacogenomics/Summary.jsx index 77c4f2fbc..20a979af5 100644 --- a/packages/sections/src/target/Pharmacogenomics/Summary.jsx +++ b/packages/sections/src/target/Pharmacogenomics/Summary.jsx @@ -10,7 +10,9 @@ function Summary() { `${pharmacogenomics.length} Pharmacogenomics Records`} + renderSummary={({ pharmacogenomics }) => + `${pharmacogenomics.length} Pharmacogenomics Records` + } /> ); } diff --git a/packages/sections/src/target/Pharmacogenomics/index.js b/packages/sections/src/target/Pharmacogenomics/index.js index e112959f6..d602175a5 100644 --- a/packages/sections/src/target/Pharmacogenomics/index.js +++ b/packages/sections/src/target/Pharmacogenomics/index.js @@ -1,7 +1,6 @@ export const definition = { - id: 'pharmacogenetics', - name: 'Pharmacogenetics', - shortName: 'PGx', + id: "pharmacogenetics", + name: "Pharmacogenetics", + shortName: "PGx", hasData: data => data.pharmacogenomics.length > 0, }; - diff --git a/packages/sections/src/target/ProtVista/Body.jsx b/packages/sections/src/target/ProtVista/Body.jsx index 2941c50f7..1d915d4e2 100644 --- a/packages/sections/src/target/ProtVista/Body.jsx +++ b/packages/sections/src/target/ProtVista/Body.jsx @@ -16,7 +16,7 @@ function Body({ label: symbol, entity }) { entity={entity} request={{ ...request, data: { [entity]: request.data } }} renderDescription={() => } - renderBody={(data) => { + renderBody={data => { const uniprotId = getUniprotIds(data[entity].proteinIds)[0]; return ; diff --git a/packages/sections/src/target/ProtVista/Description.jsx b/packages/sections/src/target/ProtVista/Description.jsx index 5ce6e543f..2286ac3fd 100644 --- a/packages/sections/src/target/ProtVista/Description.jsx +++ b/packages/sections/src/target/ProtVista/Description.jsx @@ -3,8 +3,7 @@ import { Link } from "ui"; function Description({ symbol }) { return ( <> - {symbol} functional, positional and structural protein - information. Source:{' '} + {symbol} functional, positional and structural protein information. Source:{" "} UniProt diff --git a/packages/sections/src/target/ProtVista/ProtVista.jsx b/packages/sections/src/target/ProtVista/ProtVista.jsx index 7d706cb0b..c4a03f01a 100644 --- a/packages/sections/src/target/ProtVista/ProtVista.jsx +++ b/packages/sections/src/target/ProtVista/ProtVista.jsx @@ -1,30 +1,23 @@ -import { useEffect, useState } from 'react'; -import 'litemol/dist/css/LiteMol-plugin.css'; +import { useEffect, useState } from "react"; +import "litemol/dist/css/LiteMol-plugin.css"; function ProtVista({ uniprotId }) { const [componentLoaded, setComponentLoaded] = useState(false); useEffect(() => { async function loadProtVista() { - const ProtVistaUniprot = await import('protvista-uniprot'); + const ProtVistaUniprot = await import("protvista-uniprot"); - window.customElements.define('protvista-uniprot', ProtVistaUniprot.default); + window.customElements.define("protvista-uniprot", ProtVistaUniprot.default); } - if ( - window.customElements && - !window.customElements.get('protvista-uniprot') - ) { + if (window.customElements && !window.customElements.get("protvista-uniprot")) { loadProtVista(); } setComponentLoaded(true); }, []); - return !componentLoaded ? ( - <>Loading... - ) : ( - - ); + return !componentLoaded ? <>Loading... : ; } export default ProtVista; diff --git a/packages/sections/src/target/ProtVista/index.js b/packages/sections/src/target/ProtVista/index.js index 6b788af89..bf7ace050 100644 --- a/packages/sections/src/target/ProtVista/index.js +++ b/packages/sections/src/target/ProtVista/index.js @@ -2,6 +2,5 @@ export const definition = { id: "protVista", name: "ProtVista", shortName: "PV", - hasData: ({ proteinIds }) => - proteinIds.some((e) => e.source === "uniprot_swissprot"), + hasData: ({ proteinIds }) => proteinIds.some(e => e.source === "uniprot_swissprot"), }; diff --git a/packages/sections/src/target/Safety/Body.jsx b/packages/sections/src/target/Safety/Body.jsx index cecb9dc03..51a99a0cc 100644 --- a/packages/sections/src/target/Safety/Body.jsx +++ b/packages/sections/src/target/Safety/Body.jsx @@ -1,11 +1,10 @@ -import { SectionItem } from 'ui'; -import { useQuery } from '@apollo/client'; - -import { definition } from '.'; -import Description from './Description'; -import SafetyTable from './SafetyTable'; -import SAFETY_QUERY from './Safety.gql'; +import { SectionItem } from "ui"; +import { useQuery } from "@apollo/client"; +import { definition } from "."; +import Description from "./Description"; +import SafetyTable from "./SafetyTable"; +import SAFETY_QUERY from "./Safety.gql"; function Body({ id: ensemblId, label: symbol, entity }) { const variables = { ensemblId }; diff --git a/packages/sections/src/target/Safety/Description.jsx b/packages/sections/src/target/Safety/Description.jsx index 758bde869..5b7996869 100644 --- a/packages/sections/src/target/Safety/Description.jsx +++ b/packages/sections/src/target/Safety/Description.jsx @@ -3,8 +3,7 @@ import { Link } from "ui"; function Description({ symbol }) { return ( <> - Reported safety effects and risk information for {symbol} - . Source:{' '} + Reported safety effects and risk information for {symbol}. Source:{" "} Open Targets diff --git a/packages/sections/src/target/Safety/SafetyStudiesDrawer.jsx b/packages/sections/src/target/Safety/SafetyStudiesDrawer.jsx index 8756b59ad..0fac07987 100644 --- a/packages/sections/src/target/Safety/SafetyStudiesDrawer.jsx +++ b/packages/sections/src/target/Safety/SafetyStudiesDrawer.jsx @@ -1,16 +1,10 @@ import { useState } from "react"; -import { - Drawer, - IconButton, - Paper, - Typography, - Link as MUILink, -} from "@mui/material"; +import { Drawer, IconButton, Paper, Typography, Link as MUILink } from "@mui/material"; import { makeStyles } from "@mui/styles"; import { faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ drawerLink: { cursor: "pointer", }, @@ -56,11 +50,7 @@ function SafetyStudiesDrawer({ studies }) { return ( <> - + {studies.length} studies - {studies.map((study) => ( + {studies.map(study => ( Study: diff --git a/packages/sections/src/target/Safety/SafetyTable.jsx b/packages/sections/src/target/Safety/SafetyTable.jsx index 1f00f73d1..a7d1abe65 100644 --- a/packages/sections/src/target/Safety/SafetyTable.jsx +++ b/packages/sections/src/target/Safety/SafetyTable.jsx @@ -1,15 +1,12 @@ import { Link, Tooltip, PublicationsDrawer, DataTable, TableDrawer } from "ui"; import { makeStyles } from "@mui/styles"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faArrowAltCircleDown, - faArrowAltCircleUp, -} from "@fortawesome/free-solid-svg-icons"; +import { faArrowAltCircleDown, faArrowAltCircleUp } from "@fortawesome/free-solid-svg-icons"; import SafetyStudiesDrawer from "./SafetyStudiesDrawer"; import { naLabel, defaultRowsPerPageOptions } from "../../constants"; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ blue: { color: theme.palette.primary.main, }, @@ -41,11 +38,7 @@ function getColumns(classes) { id: "event", label: "Safety event", renderCell: ({ event, eventId }) => - eventId ? ( - {event ?? naLabel} - ) : ( - event ?? naLabel - ), + eventId ? {event ?? naLabel} : event ?? naLabel, }, { id: "biosamples", @@ -60,18 +53,14 @@ function getColumns(classes) { renderCell: ({ biosamples }) => { /* TODO: remove to handle only arrays */ if (!biosamples) return "N/A"; - const entries = biosamples.map( - ({ cellFormat, cellLabel, tissueLabel, tissueId }) => ({ - name: cellFormat - ? `${cellFormat}${cellLabel ? ` (${cellLabel})` : ""}` - : tissueLabel, - url: - cellFormat || !tissueId - ? null - : `https://identifiers.org/${tissueId.replace("_", ":")}`, - group: cellFormat ? "Assay" : "Organ system", - }) - ); + const entries = biosamples.map(({ cellFormat, cellLabel, tissueLabel, tissueId }) => ({ + name: cellFormat ? `${cellFormat}${cellLabel ? ` (${cellLabel})` : ""}` : tissueLabel, + url: + cellFormat || !tissueId + ? null + : `https://identifiers.org/${tissueId.replace("_", ":")}`, + group: cellFormat ? "Assay" : "Organ system", + })); return ( { const circleUpData = effects - ? effects.find( - (effect) => - effect.direction === "Activation/Increase/Upregulation" - ) + ? effects.find(effect => effect.direction === "Activation/Increase/Upregulation") : null; const circleDownData = effects - ? effects.find( - (effect) => - effect.direction === "Inhibition/Decrease/Downregulation" - ) + ? effects.find(effect => effect.direction === "Inhibition/Decrease/Downregulation") : null; return ( <> {circleUpData ? ( - - } - > + }> - + ) : ( @@ -125,28 +97,13 @@ function getColumns(classes) { /> )} {circleDownData ? ( - - } - > + }> - + ) : ( - + )} ); @@ -166,10 +123,7 @@ function getColumns(classes) { label: "Source", renderCell: ({ datasource, literature, url }) => literature ? ( - + ) : ( {datasource} diff --git a/packages/sections/src/target/Safety/Summary.jsx b/packages/sections/src/target/Safety/Summary.jsx index 5ac481f4c..844bbe8b0 100644 --- a/packages/sections/src/target/Safety/Summary.jsx +++ b/packages/sections/src/target/Safety/Summary.jsx @@ -1,7 +1,7 @@ import _ from "lodash"; import { SummaryItem, usePlatformApi } from "ui"; -import {definition} from "."; +import { definition } from "."; import SAFETY_SUMMARY_FRAGMENT from "./summaryQuery.gql"; function Summary() { @@ -11,7 +11,7 @@ function Summary() { { + renderSummary={data => { const uniqueEvents = _.uniqBy(data.safetyLiabilities, "event"); return `${uniqueEvents.length} unique safety events`; }} diff --git a/packages/sections/src/target/Safety/index.js b/packages/sections/src/target/Safety/index.js index 995cd7423..dd31bdc6e 100644 --- a/packages/sections/src/target/Safety/index.js +++ b/packages/sections/src/target/Safety/index.js @@ -1,6 +1,6 @@ export const definition = { - id: 'safety', - name: 'Safety', - shortName: 'S', + id: "safety", + name: "Safety", + shortName: "S", hasData: data => data.safetyLiabilities.length > 0, -}; \ No newline at end of file +}; diff --git a/packages/sections/src/target/SubcellularLocation/Body.jsx b/packages/sections/src/target/SubcellularLocation/Body.jsx index abe8c5d7a..39a728694 100644 --- a/packages/sections/src/target/SubcellularLocation/Body.jsx +++ b/packages/sections/src/target/SubcellularLocation/Body.jsx @@ -1,10 +1,10 @@ -import { useQuery } from '@apollo/client'; -import { SectionItem } from 'ui'; +import { useQuery } from "@apollo/client"; +import { SectionItem } from "ui"; -import { definition } from '.'; -import Description from './Description'; -import SUBCELLULAR_LOCATION_QUERY from './SubcellularLocation.gql'; -import SubcellularViz from './SubcellularViz'; +import { definition } from "."; +import Description from "./Description"; +import SUBCELLULAR_LOCATION_QUERY from "./SubcellularLocation.gql"; +import SubcellularViz from "./SubcellularViz"; function Body({ id: ensemblId, label: symbol, entity }) { const request = useQuery(SUBCELLULAR_LOCATION_QUERY, { diff --git a/packages/sections/src/target/SubcellularLocation/Description.jsx b/packages/sections/src/target/SubcellularLocation/Description.jsx index e8b9b0412..c480f8a90 100644 --- a/packages/sections/src/target/SubcellularLocation/Description.jsx +++ b/packages/sections/src/target/SubcellularLocation/Description.jsx @@ -3,11 +3,11 @@ import { Link } from "ui"; function Description({ symbol }) { return ( <> - Subcellular location data for {symbol}. Source:{' '} + Subcellular location data for {symbol}. Source:{" "} UniProt - ,{' '} + ,{" "} HPA diff --git a/packages/sections/src/target/SubcellularLocation/SubcellularViz.jsx b/packages/sections/src/target/SubcellularLocation/SubcellularViz.jsx index a7010612d..ce0e9fecf 100644 --- a/packages/sections/src/target/SubcellularLocation/SubcellularViz.jsx +++ b/packages/sections/src/target/SubcellularLocation/SubcellularViz.jsx @@ -8,11 +8,9 @@ import { LoadingBackdrop, Link } from "ui"; import { identifiersOrgLink, getUniprotIds } from "../../utils/global"; const SwissbioViz = - "customElements" in window - ? lazy(() => import("./SwissbioViz")) - : ({ children }) => children; + "customElements" in window ? lazy(() => import("./SwissbioViz")) : ({ children }) => children; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ locationIcon: { paddingRight: "0.5em", }, @@ -32,17 +30,16 @@ const useStyles = makeStyles((theme) => ({ // Remove the 'SL-' from a location termSL (e.g. "SL-0097") // The sib-swissbiopics component (different from what is documented) // actually doesn't accept the "SL-" part of the term -const parseLocationTerm = (term) => term?.substring(3); +const parseLocationTerm = term => term?.substring(3); // Parse termSL to specific id format used by the text for rollovers -const parseTermToTextId = (term) => - term ? `${term.replace("-", "")}term` : ""; +const parseTermToTextId = term => (term ? `${term.replace("-", "")}term` : ""); // Parse API response and split locations based on sources. Example: // { HPA_main: [], uniprot: [], } -const parseLocationData = (subcellularLocations) => { +const parseLocationData = subcellularLocations => { const sourcesLocations = {}; - subcellularLocations.forEach((sl) => { + subcellularLocations.forEach(sl => { if (sourcesLocations[sl.source] === undefined) { sourcesLocations[sl.source] = []; } @@ -53,16 +50,13 @@ const parseLocationData = (subcellularLocations) => { // Filter the sources array to only those with data const filterSourcesWithData = (sources, sourcesLocations) => - sources.filter((s) => sourcesLocations[s.id] !== undefined); + sources.filter(s => sourcesLocations[s.id] !== undefined); -const getTabId = (id) => `${id}-tab`; +const getTabId = id => `${id}-tab`; function LocationLink({ sourceId, id }) { return ( - + {id} ); @@ -101,7 +95,7 @@ function SubcellularVizTabs({ sources: activeSources, children }) { useEffect(() => { // update tab panels visibility: we change the style of the DOM element directly // to avoid any re-rendering as that causes the swissbiopic component to crash - children.forEach((child) => { + children.forEach(child => { child.ref.current.setAttribute("style", "display:none"); }); children[activeTab].ref.current.setAttribute("style", "display:block"); @@ -109,11 +103,7 @@ function SubcellularVizTabs({ sources: activeSources, children }) { return ( <> - + {activeSources.map((s, i) => ( ))} @@ -159,7 +149,7 @@ function SubcellularViz({ data: target }) { return (
    - {activeSources.map((s) => ( + {activeSources.map(s => (
    }> parseLocationTerm(l.termSL)) - .join()} + locationIds={sourcesLocations[s.id].map(l => parseLocationTerm(l.termSL)).join()} sourceId={s.id.toLowerCase()} > {s.label} Location for{" "} - + diff --git a/packages/sections/src/target/SubcellularLocation/Summary.jsx b/packages/sections/src/target/SubcellularLocation/Summary.jsx index 862f27cd2..d6109a5b5 100644 --- a/packages/sections/src/target/SubcellularLocation/Summary.jsx +++ b/packages/sections/src/target/SubcellularLocation/Summary.jsx @@ -1,7 +1,7 @@ -import { SummaryItem, usePlatformApi } from 'ui'; +import { SummaryItem, usePlatformApi } from "ui"; -import { definition } from '.'; -import SUBCELLULAR_LOCATION_FRAGMENT from './SubcellularLocationFragment.gql'; +import { definition } from "."; +import SUBCELLULAR_LOCATION_FRAGMENT from "./SubcellularLocationFragment.gql"; function Summary() { const request = usePlatformApi(SUBCELLULAR_LOCATION_FRAGMENT); diff --git a/packages/sections/src/target/SubcellularLocation/SwissbioViz.jsx b/packages/sections/src/target/SubcellularLocation/SwissbioViz.jsx index be5d5d6d1..2238cccb3 100644 --- a/packages/sections/src/target/SubcellularLocation/SwissbioViz.jsx +++ b/packages/sections/src/target/SubcellularLocation/SwissbioViz.jsx @@ -1,30 +1,22 @@ /* eslint-disable */ -import { memo, useRef, useEffect } from 'react'; -import { v1 } from 'uuid'; - -import '@swissprot/swissbiopics-visualizer'; -import config from '../../config'; - -const shapes = [ - 'path', - 'circle', - 'ellipse', - 'polygon', - 'rect', - 'polyline', - 'line', -]; -const shapesSelector = shapes.join(', '); +import { memo, useRef, useEffect } from "react"; +import { v1 } from "uuid"; + +import "@swissprot/swissbiopics-visualizer"; +import config from "../../config"; + +const shapes = ["path", "circle", "ellipse", "polygon", "rect", "polyline", "line"]; +const shapesSelector = shapes.join(", "); const reMpPart = /(mp|part)_(?\w+)/; -const canonicalName = 'sib-swissbiopics-sl'; +const canonicalName = "sib-swissbiopics-sl"; const CanonicalDefinition = customElements.get(canonicalName); // Note that these are without leading zeros eg: GO1 (and not GO0000001) so make sure // the correct classnames are supplied in SubcellularLocationGOView const getGoTermClassNames = locationGroup => Array.from(locationGroup.classList.values()) - .filter(className => className.startsWith('GO')) + .filter(className => className.startsWith("GO")) .map(goId => `.${goId}`); const getUniProtTextSelectors = subcellularPresentSVG => [ @@ -56,10 +48,7 @@ const SwissbioViz = memo(({ locationIds, taxonId, sourceId, children }) => { const { cssRules } = styleSheet; for (let index = 0; index < cssRules.length; index += 1) { const cssRule = cssRules[index]; - if ( - cssRule instanceof CSSStyleRule && - cssRule.selectorText === selectorText - ) { + if (cssRule instanceof CSSStyleRule && cssRule.selectorText === selectorText) { styleSheet.deleteRule(index); return; } @@ -77,21 +66,21 @@ const SwissbioViz = memo(({ locationIds, taxonId, sourceId, children }) => { if (image?.id) { selectors.push(`#${image.id}term`); } - return this.querySelectorAll(selectors.join(',')); + return this.querySelectorAll(selectors.join(",")); } highLight(text, image, selector) { if (!this.removedCSSRules) { // Remove the .lookedAt CSS rule to avoid the default styling - this.deleteCSSRule('.lookedAt'); + this.deleteCSSRule(".lookedAt"); // Undo hard-coded cytoskeleton rule - this.deleteCSSRule('#SL0090 .lookedAt'); + this.deleteCSSRule("#SL0090 .lookedAt"); this.removedCSSRules = true; } super.highLight(text, image, selector); // Add "lookedAt" classname to image SVG and text for (const highlight of this.getHighlights(image)) { - highlight?.classList.add('lookedAt'); + highlight?.classList.add("lookedAt"); } } @@ -100,7 +89,7 @@ const SwissbioViz = memo(({ locationIds, taxonId, sourceId, children }) => { removeHiglight(text, image, selector) { // Remove "lookedAt" classname from image SVG and text for (const highlight of this.getHighlights(image)) { - highlight?.classList.remove('lookedAt'); + highlight?.classList.remove("lookedAt"); } super.removeHiglight(text, image, selector); } @@ -137,13 +126,13 @@ const SwissbioViz = memo(({ locationIds, taxonId, sourceId, children }) => { `; // add styles - const style = document.createElement('style'); + const style = document.createElement("style"); style.innerText = css; shadowRoot?.appendChild(style); // add a slot to inject content - const slot = document.createElement('slot'); - const terms = shadowRoot?.querySelector('.terms'); + const slot = document.createElement("slot"); + const terms = shadowRoot?.querySelector(".terms"); terms?.appendChild(slot); // This finds all subcellular location SVGs for which we have a location @@ -158,29 +147,23 @@ const SwissbioViz = memo(({ locationIds, taxonId, sourceId, children }) => { const locationText = instance?.querySelector(textSelector); if (locationText) { - locationText.classList.add('inpicture'); - const locationSVG = shadowRoot?.querySelector( - `#${subcellularPresentSVG.id}` - ); + locationText.classList.add("inpicture"); + const locationSVG = shadowRoot?.querySelector(`#${subcellularPresentSVG.id}`); // TODO: need to remove event listeners on unmount. Will leave for now until // to see what changes are made to @swissprot/swissbiopics-visualizer - locationText.addEventListener('mouseenter', () => { + locationText.addEventListener("mouseenter", () => { instance?.highLight(locationText, locationSVG, shapesSelector); }); - locationText.addEventListener('mouseleave', () => { - instance?.removeHiglight( - locationText, - locationSVG, - shapesSelector - ); + locationText.addEventListener("mouseleave", () => { + instance?.removeHiglight(locationText, locationSVG, shapesSelector); }); } } }); }; - shadowRoot?.addEventListener('svgloaded', onSvgLoaded); + shadowRoot?.addEventListener("svgloaded", onSvgLoaded); return () => { - shadowRoot?.removeEventListener('svgloaded', onSvgLoaded); + shadowRoot?.removeEventListener("svgloaded", onSvgLoaded); }; }, [locationIds]); function Instance(props) { diff --git a/packages/sections/src/target/SubcellularLocation/index.js b/packages/sections/src/target/SubcellularLocation/index.js index 9d27fa488..8493f6371 100644 --- a/packages/sections/src/target/SubcellularLocation/index.js +++ b/packages/sections/src/target/SubcellularLocation/index.js @@ -1,6 +1,6 @@ export const definition = { - id: 'subcellularLocation', - name: 'Subcellular Location', - shortName: 'SL', + id: "subcellularLocation", + name: "Subcellular Location", + shortName: "SL", hasData: ({ subcellularLocations }) => subcellularLocations.length > 0, }; diff --git a/packages/sections/src/target/Tractability/Body.jsx b/packages/sections/src/target/Tractability/Body.jsx index c2561880d..bcf0f42b3 100644 --- a/packages/sections/src/target/Tractability/Body.jsx +++ b/packages/sections/src/target/Tractability/Body.jsx @@ -1,7 +1,4 @@ -import { - faCheckCircle, - faTimesCircle, -} from "@fortawesome/free-solid-svg-icons"; +import { faCheckCircle, faTimesCircle } from "@fortawesome/free-solid-svg-icons"; import { v1 } from "uuid"; import { SectionItem, EllsWrapper } from "ui"; import classNames from "classnames"; @@ -14,7 +11,7 @@ import { definition } from "."; import Description from "./Description"; import TRACTABILITY_QUERY from "./TractabilityQuery.gql"; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ modality: { marginBottom: "0.35em", }, @@ -63,8 +60,8 @@ function ModalityList({ modality, data }) { return ( <> {data - .filter((d) => d.modality === modality) - .map((d) => ( + .filter(d => d.modality === modality) + .map(d => (
    - + {d.label} @@ -104,17 +98,14 @@ function Body({ label: symbol, id: ensemblId, entity }) { request={request} entity={entity} renderDescription={() => } - renderBody={(data) => ( + renderBody={data => ( - {modalities.map((m) => ( + {modalities.map(m => ( {m.label} - + ))} diff --git a/packages/sections/src/target/Tractability/Description.jsx b/packages/sections/src/target/Tractability/Description.jsx index 7d06effdf..c49106506 100644 --- a/packages/sections/src/target/Tractability/Description.jsx +++ b/packages/sections/src/target/Tractability/Description.jsx @@ -3,11 +3,8 @@ import { Link } from "ui"; function Description({ symbol }) { return ( <> - Target tractability assessment for {symbol}. Source:{' '} - + Target tractability assessment for {symbol}. Source:{" "} + Open Targets . diff --git a/packages/sections/src/target/Tractability/Summary.jsx b/packages/sections/src/target/Tractability/Summary.jsx index 054111cd9..1e0f121f2 100644 --- a/packages/sections/src/target/Tractability/Summary.jsx +++ b/packages/sections/src/target/Tractability/Summary.jsx @@ -1,8 +1,7 @@ -import { SummaryItem, usePlatformApi } from 'ui'; -import { definition } from '.'; +import { SummaryItem, usePlatformApi } from "ui"; +import { definition } from "."; - -import TRACTABILITY_SUMMARY_FRAGMENT from './TractabilitySummary.gql'; +import TRACTABILITY_SUMMARY_FRAGMENT from "./TractabilitySummary.gql"; function Summary() { const request = usePlatformApi(TRACTABILITY_SUMMARY_FRAGMENT); @@ -29,10 +28,10 @@ function Summary() { modalities.push('PROTAC'); } */ if (modalities.length === 0) { - modalities.push('Assessment available'); + modalities.push("Assessment available"); } // return null for 'no data' - return modalities.length > 0 ? modalities.join(' • ') : null; + return modalities.length > 0 ? modalities.join(" • ") : null; }} /> ); diff --git a/packages/sections/src/target/Tractability/index.js b/packages/sections/src/target/Tractability/index.js index 5d96b751b..87bfb0afe 100644 --- a/packages/sections/src/target/Tractability/index.js +++ b/packages/sections/src/target/Tractability/index.js @@ -1,6 +1,6 @@ export const definition = { - id: 'tractability', - name: 'Tractability', - shortName: 'TR', + id: "tractability", + name: "Tractability", + shortName: "TR", hasData: data => data.tractability?.length > 0, -}; \ No newline at end of file +}; diff --git a/packages/sections/src/utils/comparators.js b/packages/sections/src/utils/comparators.js index f6bae8cf1..d0d9e2e44 100644 --- a/packages/sections/src/utils/comparators.js +++ b/packages/sections/src/utils/comparators.js @@ -5,7 +5,7 @@ const comparatorDiseaseName = generateComparatorFromAccessor(d => d.disease.name export const generateComparatorFromAccessor = accessor => (a, b) => { const aValue = accessor(a); const bValue = accessor(b); - if(aValue > bValue) return 1; + if (aValue > bValue) return 1; if (aValue === bValue) return 0; return -1; }; @@ -15,12 +15,11 @@ export const generateComparatorFromAccessor = accessor => (a, b) => { */ export const breakpointMatch = (breakpoint, breakpointHelper) => { const breakpointMap = { xs: 0, sm: 1, md: 2, lg: 3, xl: 4 }; - const isDownComparator = breakpointHelper.includes('Down'); - const isUpComparator = breakpointHelper.includes('Up'); + const isDownComparator = breakpointHelper.includes("Down"); + const isUpComparator = breakpointHelper.includes("Up"); const breakpointIndex = breakpointMap[breakpoint]; - const breakpointHelperIndex = - breakpointMap[breakpointHelper.replace(/Down|Up|Only/g, '')]; + const breakpointHelperIndex = breakpointMap[breakpointHelper.replace(/Down|Up|Only/g, "")]; if (breakpointIndex === breakpointHelperIndex) { return true; diff --git a/packages/sections/src/utils/global.js b/packages/sections/src/utils/global.js index 494ebaa14..2529adca2 100644 --- a/packages/sections/src/utils/global.js +++ b/packages/sections/src/utils/global.js @@ -1,44 +1,34 @@ -import { format } from 'd3-format'; -import config from '../config'; +import { format } from "d3-format"; +import config from "../config"; export const safeToString = x => { switch (typeof x) { - case 'object': - return 'object'; - case 'function': - return 'function'; + case "object": + return "object"; + case "function": + return "function"; case undefined: case null: - return ''; + return ""; default: - return `${x }`; + return `${x}`; } }; export const identifiersOrgLink = (prefix, accession, resource) => - `https://identifiers.org/${ - resource ? `${resource }/` : '' - }${prefix}:${accession}`; + `https://identifiers.org/${resource ? `${resource}/` : ""}${prefix}:${accession}`; export const literatureUrl = id => - id.startsWith('PMC') - ? identifiersOrgLink('pmc', id) - : identifiersOrgLink('pubmed', id); + id.startsWith("PMC") ? identifiersOrgLink("pmc", id) : identifiersOrgLink("pubmed", id); export const sentenceCase = str => - str - ? str.charAt(0).toUpperCase() + - str - .slice(1) - .replace(/_/g, ' ') - .toLocaleLowerCase() - : str; + str ? str.charAt(0).toUpperCase() + str.slice(1).replace(/_/g, " ").toLocaleLowerCase() : str; -export const formatComma = format(','); +export const formatComma = format(","); export function getUniprotIds(proteinIds) { return proteinIds - .filter(proteinId => proteinId.source === 'uniprot_swissprot') + .filter(proteinId => proteinId.source === "uniprot_swissprot") .map(proteinId => proteinId.id); } @@ -54,7 +44,7 @@ const makePmidLink = themeColor => { export function clearDescriptionCodes(descriptions, themeColor) { if (!descriptions) return []; return descriptions.map(desc => { - const codeStart = desc.indexOf('{'); + const codeStart = desc.indexOf("{"); const parsedDesc = desc.slice(0, codeStart); return parsedDesc.replace(/Pubmed:\d+/gi, makePmidLink(themeColor)); }); @@ -62,10 +52,10 @@ export function clearDescriptionCodes(descriptions, themeColor) { export async function fetcher(graphQLParams) { const data = await fetch(config.urlApi, { - method: 'POST', + method: "POST", headers: { - Accept: 'application/json', - 'Content-Type': 'application/json', + Accept: "application/json", + "Content-Type": "application/json", }, body: JSON.stringify(graphQLParams), }); diff --git a/packages/sections/src/utils/initLocalStorage.js b/packages/sections/src/utils/initLocalStorage.js index e6515d818..8e802633e 100644 --- a/packages/sections/src/utils/initLocalStorage.js +++ b/packages/sections/src/utils/initLocalStorage.js @@ -1,4 +1,4 @@ -import ls from 'local-storage'; +import ls from "local-storage"; const initKey = (key, defaultValue) => { if (!ls.get(key)) { @@ -11,15 +11,15 @@ const initLocalStorage = () => { // to ensure any new defaults updated correctly, // or when in development mode if ( - import.meta.env.NODE_ENV === 'development' || - import.meta.env.REACT_APP_BUILD_ID !== ls.get('buildId') + import.meta.env.NODE_ENV === "development" || + import.meta.env.REACT_APP_BUILD_ID !== ls.get("buildId") ) { ls.clear(); } // set defaults (unless keys exist, // in which case values may have altered) - initKey('buildId', import.meta.env.REACT_APP_BUILD_ID); + initKey("buildId", import.meta.env.REACT_APP_BUILD_ID); }; export default initLocalStorage; diff --git a/packages/sections/src/utils/partnerPreviewUtils.js b/packages/sections/src/utils/partnerPreviewUtils.js index e04a943ce..7855341f9 100644 --- a/packages/sections/src/utils/partnerPreviewUtils.js +++ b/packages/sections/src/utils/partnerPreviewUtils.js @@ -1,17 +1,11 @@ -import config from '../config'; +import config from "../config"; // page sections -export const isPrivateTargetSection = id => - config.profile.partnerTargetSectionIds.includes(id); -export const isPrivateDiseaseSection = id => - config.profile.partnerDiseaseSectionIds.includes(id); -export const isPrivateDrugSection = id => - config.profile.partnerDrugSectionIds.includes(id); -export const isPrivateEvidenceSection = id => - config.profile.partnerEvidenceSectionIds.includes(id); +export const isPrivateTargetSection = id => config.profile.partnerTargetSectionIds.includes(id); +export const isPrivateDiseaseSection = id => config.profile.partnerDiseaseSectionIds.includes(id); +export const isPrivateDrugSection = id => config.profile.partnerDrugSectionIds.includes(id); +export const isPrivateEvidenceSection = id => config.profile.partnerEvidenceSectionIds.includes(id); // associations -export const isPrivateDataType = id => - config.profile.partnerDataTypes.includes(id); -export const isPrivateDataSource = id => - config.profile.partnerDataSources.includes(id); +export const isPrivateDataType = id => config.profile.partnerDataTypes.includes(id); +export const isPrivateDataSource = id => config.profile.partnerDataSources.includes(id); diff --git a/packages/sections/src/utils/urls.js b/packages/sections/src/utils/urls.js index d9464f977..d949278f9 100644 --- a/packages/sections/src/utils/urls.js +++ b/packages/sections/src/utils/urls.js @@ -18,9 +18,9 @@ export function europePmcLiteratureQuery(ids) { return encodeURI(baseUrl + ids.join(" OR ext_id:")); } -export const encodeParams = (params) => { +export const encodeParams = params => { const formBody = []; - Object.keys(params).forEach((key) => { + Object.keys(params).forEach(key => { const encodedKey = encodeURIComponent(key); const encodedValue = encodeURIComponent(params[key]); formBody.push(`${encodedKey}=${encodedValue}`); diff --git a/packages/ui/package.json b/packages/ui/package.json index aa6d65940..e8e5b2e60 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -5,7 +5,8 @@ "types": "./src/index.tsx", "license": "MIT", "scripts": { - "lint": "eslint \"src/**/*.{js,jsx,mjs,cjs,ts,tsx}\"" + "lint": "eslint \"src/**/*.{js,jsx,mjs,cjs,ts,tsx}\"", + "prettier:all": "prettier --write \"src/**/*.{js,jsx,mjs,cjs,ts,tsx}\"" }, "dependencies": { "@apollo/client": "^3.8.3", diff --git a/packages/ui/src/ThemeProvider/ThemeProvider.tsx b/packages/ui/src/ThemeProvider/ThemeProvider.tsx index 6239f2354..8e3ea0ccc 100644 --- a/packages/ui/src/ThemeProvider/ThemeProvider.tsx +++ b/packages/ui/src/ThemeProvider/ThemeProvider.tsx @@ -1,18 +1,9 @@ -import { - ThemeProvider as MuiThemeProvider, - createTheme, -} from "@mui/material/styles"; +import { ThemeProvider as MuiThemeProvider, createTheme } from "@mui/material/styles"; import CssBaseline from "@mui/material/CssBaseline"; import defaultTheme from "./defaultTheme"; -function ThemeProvider({ - children, - theme = defaultTheme, -}: { - children: any; - theme: any; -}) { +function ThemeProvider({ children, theme = defaultTheme }: { children: any; theme: any }) { const uiKitTheme = createTheme(theme); return ( diff --git a/packages/ui/src/ThemeProvider/defaultTheme.ts b/packages/ui/src/ThemeProvider/defaultTheme.ts index 67382a97e..e0de9a432 100644 --- a/packages/ui/src/ThemeProvider/defaultTheme.ts +++ b/packages/ui/src/ThemeProvider/defaultTheme.ts @@ -56,23 +56,23 @@ const theme = { }, styleOverrides: { root: { - border: '1px solid', - padding: '6px 12px', - minWidth: '32px', - minHeight: '32px', - height: '32px', - textTransform: 'none', - color: '#5A5F5F', - borderColor: 'rgb(196,196,196)', + border: "1px solid", + padding: "6px 12px", + minWidth: "32px", + minHeight: "32px", + height: "32px", + textTransform: "none", + color: "#5A5F5F", + borderColor: "rgb(196,196,196)", }, }, }, MuiTabs: { styleOverrides: { indicator: { - transition: 'none', - } - } + transition: "none", + }, + }, }, MuiTab: { defaultProps: { @@ -81,11 +81,11 @@ const theme = { styleOverrides: { root: { textTransform: "none", - } - } - } + }, + }, + }, }, - + // overrides: { // MuiButton: { // root: { diff --git a/packages/ui/src/components/BasePage.jsx b/packages/ui/src/components/BasePage.jsx index 340777eaa..5d40ba136 100644 --- a/packages/ui/src/components/BasePage.jsx +++ b/packages/ui/src/components/BasePage.jsx @@ -12,27 +12,17 @@ import { } from "../constants"; import GlobalSearch from "./GlobalSearch/GlobalSearch"; - function BasePage({ title, children, description, location }) { const composedTitle = `${title ? `${title} | ` : ""} ${appTitle}`; return ( } - items={mainMenuItems} - /> - } + header={} items={mainMenuItems} />} footer={