Unverified Commit 81766bcd authored by Andrey Azov's avatar Andrey Azov Committed by GitHub

Bugfixes after switching to Thoas (#367)

- fix checkbox styling in instant protein download component
- show the blue protein bar in the protein image
- show external references in EntityViewer sidebar
parent d76084d0
Pipeline #104131 passed with stages
in 13 minutes and 29 seconds
......@@ -110,7 +110,6 @@ const QUERY = gql`
cds {
relative_start
relative_end
protein_length
}
cdna {
length
......@@ -125,6 +124,7 @@ const QUERY = gql`
product {
stable_id
unversioned_stable_id
length
external_references {
accession_id
description
......
......@@ -32,9 +32,9 @@ import { getEntityViewerSidebarPayload } from 'src/content/app/entity-viewer/sta
import { RootState } from 'src/store';
import {
CrossReference,
CrossReferenceGroup
} from 'src/content/app/entity-viewer/types/crossReference';
ExternalReference as ExternalReferenceType,
ExternalReferencesGroup
} from 'src/content/app/entity-viewer/types/externalReference';
import { EntityViewerParams } from 'src/content/app/entity-viewer/EntityViewer';
import styles from './GeneExternalReferences.scss';
......@@ -45,8 +45,8 @@ const QUERY = gql`
gene(byId: { stable_id: $stable_id, genome_id: $genome_id }) {
name
stable_id
cross_references {
id
external_references {
accession_id
name
description
url
......@@ -58,8 +58,8 @@ const QUERY = gql`
}
transcripts {
stable_id
cross_references {
id
external_references {
accession_id
name
description
url
......@@ -76,38 +76,42 @@ const QUERY = gql`
type Transcript = {
stable_id: string;
cross_references: CrossReference[];
external_references: ExternalReferenceType[];
};
type Gene = {
name: string;
stable_id: string;
transcripts: Transcript[];
cross_references: CrossReference[];
external_references: ExternalReferenceType[];
};
const buildCrossReferenceGroups = (crossReferences: CrossReference[]) => {
const crossReferenceGroups: { [key: string]: CrossReferenceGroup } = {};
const buildExternalReferencesGroups = (
externalReferences: ExternalReferenceType[]
) => {
const externalReferencesGroups: {
[key: string]: ExternalReferencesGroup;
} = {};
crossReferences.forEach((crossReference) => {
const sourceId = crossReference.source.id;
externalReferences.forEach((externalReference) => {
const sourceId = externalReference.source.id;
if (!crossReferenceGroups[sourceId]) {
crossReferenceGroups[sourceId] = {
source: crossReference.source,
if (!externalReferencesGroups[sourceId]) {
externalReferencesGroups[sourceId] = {
source: externalReference.source,
references: []
};
}
crossReferenceGroups[sourceId].references.push({
id: crossReference.id,
url: crossReference.url,
name: crossReference.name,
description: crossReference.description
externalReferencesGroups[sourceId].references.push({
accession_id: externalReference.accession_id,
url: externalReference.url,
name: externalReference.name,
description: externalReference.description
});
});
return crossReferenceGroups;
return externalReferencesGroups;
};
const GeneExternalReferences = () => {
......@@ -133,8 +137,8 @@ const GeneExternalReferences = () => {
return <div>No data to display</div>;
}
const crossReferenceGroups = buildCrossReferenceGroups(
data.gene.cross_references
const externalReferencesGroups = buildExternalReferencesGroups(
data.gene.external_references
);
const { transcripts } = data.gene;
......@@ -146,25 +150,32 @@ const GeneExternalReferences = () => {
</div>
<div className={styles.sectionHead}>Gene</div>
{data.gene.cross_references &&
Object.values(crossReferenceGroups).map((crossReferenceGroup, key) => {
if (crossReferenceGroup.references.length === 1) {
return (
<div key={key}>
<ExternalReference
label={crossReferenceGroup.source.name}
to={crossReferenceGroup.references[0].url}
linkText={crossReferenceGroup.references[0].id}
/>
</div>
);
} else {
return crossReferenceGroup.references[0].name ===
crossReferenceGroup.source.name
? renderXrefGroupWithSameLabels(crossReferenceGroup, key)
: renderXrefGroupWithDifferentLabels(crossReferenceGroup, key);
{data.gene.external_references &&
Object.values(externalReferencesGroups).map(
(externalReferencesGroup, key) => {
if (externalReferencesGroup.references.length === 1) {
return (
<div key={key}>
<ExternalReference
label={externalReferencesGroup.source.name}
to={externalReferencesGroup.references[0].url}
linkText={
externalReferencesGroup.references[0].accession_id
}
/>
</div>
);
} else {
return externalReferencesGroup.references[0].name ===
externalReferencesGroup.source.name
? renderXrefGroupWithSameLabels(externalReferencesGroup, key)
: renderXrefGroupWithDifferentLabels(
externalReferencesGroup,
key
);
}
}
})}
)}
{transcripts && (
<div>
......@@ -195,13 +206,13 @@ const RenderTranscriptXrefGroup = (props: { transcript: Transcript }) => {
>
{transcript.stable_id}
</div>
{transcript.cross_references && isExpanded && (
{transcript.external_references && isExpanded && (
<div className={styles.transcriptXrefs}>
{transcript.cross_references.map((xref, key) => (
{transcript.external_references.map((xref, key) => (
<ExternalReference
label={xref.source.name}
to={xref.url}
linkText={xref.id}
linkText={xref.accession_id}
key={key}
/>
))}
......@@ -212,20 +223,20 @@ const RenderTranscriptXrefGroup = (props: { transcript: Transcript }) => {
};
const renderXrefGroupWithSameLabels = (
crossReferenceGroup: CrossReferenceGroup,
externalReferencesGroup: ExternalReferencesGroup,
key: number
) => {
return (
<div key={key} className={styles.xrefGroupWithSameLabel}>
<div className={styles.xrefGroupSourceName}>
{crossReferenceGroup.source.name}
{externalReferencesGroup.source.name}
</div>
<div className={styles.xrefGroupLinks}>
{crossReferenceGroup.references.map((entry, key) => (
{externalReferencesGroup.references.map((entry, key) => (
<ExternalReference
label={''}
to={entry.url}
linkText={entry.id}
linkText={entry.accession_id}
key={key}
/>
))}
......@@ -235,7 +246,7 @@ const renderXrefGroupWithSameLabels = (
};
const renderXrefGroupWithDifferentLabels = (
crossReferenceGroup: CrossReferenceGroup,
externalReferencesGroup: ExternalReferencesGroup,
key: number
) => {
return (
......@@ -244,16 +255,16 @@ const renderXrefGroupWithDifferentLabels = (
<AccordionItem className={styles.xrefAccordionItem}>
<AccordionItemHeading className={styles.xrefAccordionHeader}>
<AccordionItemButton className={styles.xrefAccordionButton}>
{crossReferenceGroup.source.name}
{externalReferencesGroup.source.name}
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel className={styles.xrefAccordionItemContent}>
<div>
{crossReferenceGroup.references.map((entry, key) => (
{externalReferencesGroup.references.map((entry, key) => (
<ExternalReference
label={entry.description}
to={entry.url}
linkText={entry.id}
linkText={entry.accession_id}
key={key}
/>
))}
......
......@@ -20,8 +20,10 @@ import {
} from 'src/content/app/entity-viewer/types/slice';
import { Transcript } from 'src/content/app/entity-viewer/types/transcript';
import { Gene } from 'src/content/app/entity-viewer/types/gene';
import { ProductType } from 'src/content/app/entity-viewer/types/product';
import { CDS } from 'src/content/app/entity-viewer/types/cds.ts';
import {
Product,
ProductType
} from 'src/content/app/entity-viewer/types/product';
export const getFeatureCoordinates = (feature: {
slice: SliceWithLocationOnly;
......@@ -79,10 +81,9 @@ export const getProductAminoAcidLength = (transcript: Transcript) => {
}
const { product_generating_contexts } = transcript;
const firstProductGeneratingContext = product_generating_contexts[0];
const cds = firstProductGeneratingContext.cds as CDS; // a protein-coding transcript will have a CDS
const product = firstProductGeneratingContext.product as Product; // a protein-coding transcript will have a CDS
// TODO: use product.length directly when api response becomes more reliable
return cds.protein_length;
return product.length;
};
export const getSplicedRNALength = (transcript: Transcript) =>
......
......@@ -21,7 +21,7 @@ import { Homeologue } from '../../types/homeologue';
import { Publication } from '../../types/publication';
import { Source } from '../../types/source';
import { Metadata } from '../../types/metadata';
import { CrossReference } from '../../types/crossReference';
import { ExternalReference } from '../../types/externalReference';
import JSONValue from 'src/shared/types/JSON';
export enum SidebarTabName {
......@@ -57,7 +57,7 @@ type SidebarOverviewGene = {
source: Source;
};
metadata?: Metadata;
cross_references?: CrossReference[];
external_references?: ExternalReference[];
transcripts: SidebarOverviewTranscript[];
};
......
/**
* See the NOTICE file distributed with this work for additional information
* regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Source } from './source';
export type CrossReference = {
id: string;
name: string;
description: string;
url: string;
source: Source;
};
export type CrossReferenceWithoutSource = Omit<CrossReference, 'source'>;
export type CrossReferenceGroup = {
source: Source;
references: CrossReferenceWithoutSource[];
};
......@@ -18,6 +18,15 @@ import { Source } from './source';
export type ExternalReference = {
accession_id: string;
name: string;
description: string;
url: string;
source: Source;
};
export type ExternalReferenceWithoutSource = Omit<ExternalReference, 'source'>;
export type ExternalReferencesGroup = {
source: Source;
references: ExternalReferenceWithoutSource[];
};
......@@ -17,7 +17,6 @@
import { Slice } from './slice';
import { Transcript } from './transcript';
import { Source } from './source';
// import { CrossReference } from './crossReference';
// import { Metadata } from './metadata';
/**
......
......@@ -2,7 +2,6 @@
.checkboxHolder {
display: grid;
width: 100%;
grid-template-columns: 27px 1fr;
}
......
......@@ -37,6 +37,7 @@ export const createProduct = (fragment: Partial<Product> = {}): Product => {
so_term: faker.lorem.word(),
length: length,
protein_domains: createProteinDomains(length),
external_references: [],
...fragment
};
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment