Unverified Commit 4965dcca authored by Jyothish's avatar Jyothish Committed by GitHub

Entity viewer design review changes (#316)

* Entity viewer design review changes
* Scaleswitcher changed to entityTypeIndicator and move it to global shared component
parent 4c5ac9ef
Pipeline #102357 canceled with stages
in 14 minutes and 48 seconds
...@@ -16,8 +16,8 @@ $backgroundColor: $black; ...@@ -16,8 +16,8 @@ $backgroundColor: $black;
display: grid; display: grid;
background-color: $backgroundColor; background-color: $backgroundColor;
grid-template-columns: 178px 902px 1fr; grid-template-columns: 178px 902px 1fr;
grid-template-rows: min-content 90px 1fr; grid-template-rows: min-content 75px 1fr;
padding: 75px 20px 10px 20px; padding: 60px 20px 10px;
height: 100%; // may need to change this later height: 100%; // may need to change this later
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
...@@ -39,7 +39,7 @@ $backgroundColor: $black; ...@@ -39,7 +39,7 @@ $backgroundColor: $black;
grid-area: 2 / 1 / 3 / 4; grid-area: 2 / 1 / 3 / 4;
z-index: 2; z-index: 2;
position: sticky; position: sticky;
top: -105px; top: -90px;
height: 100%; height: 100%;
background-color: $backgroundColor; background-color: $backgroundColor;
padding-left: 180px; padding-left: 180px;
......
...@@ -56,6 +56,7 @@ const QUERY = gql` ...@@ -56,6 +56,7 @@ const QUERY = gql`
query Gene($id: String!) { query Gene($id: String!) {
gene(byId: { id: $id }) { gene(byId: { id: $id }) {
id id
version
slice { slice {
location { location {
start start
......
...@@ -3,15 +3,26 @@ ...@@ -3,15 +3,26 @@
.header { .header {
border-bottom: 1px solid $orange; border-bottom: 1px solid $orange;
padding: 8px 0; padding: 0;
position: sticky; position: sticky;
top: -15px; top: -15px;
background-color: $black; background-color: $black;
z-index: 1; z-index: 1;
font-size: 12px;
}
.headerChevron {
width: 16px;
height: 16px;
cursor: pointer;
margin-left: 0.5em;
top: 5px;
position: relative;
} }
.content { .content {
position: relative; position: relative;
padding-top: 36px;
} }
.stripedBackground { .stripedBackground {
...@@ -33,7 +44,8 @@ ...@@ -33,7 +44,8 @@
.row { .row {
display: grid; display: grid;
grid-template-columns: $left_column $middle_column $middle_column_right_gap $right_column; grid-template-columns: $left_column $middle_column $middle_column_right_gap $right_column;
padding: 3px 0; padding: 9px 0px;
font-size: 12px;
} }
.left { .left {
...@@ -45,6 +57,7 @@ ...@@ -45,6 +57,7 @@
.middle { .middle {
grid-column: 2/3; grid-column: 2/3;
position: relative; position: relative;
top: 2px;
} }
.right { .right {
......
...@@ -60,3 +60,7 @@ ...@@ -60,3 +60,7 @@
cursor: pointer; cursor: pointer;
height: 16px; height: 16px;
} }
.viewInApp {
padding-top: 32px;
}
...@@ -149,7 +149,7 @@ export const TranscriptsListItemInfo = ( ...@@ -149,7 +149,7 @@ export const TranscriptsListItemInfo = (
</div> </div>
<div className={styles.topRight}> <div className={styles.topRight}>
<div> <div>
Spliced RNA length <strong>{splicedRNALength} bp</strong> Spliced RNA length <strong>{splicedRNALength} </strong> bp
</div> </div>
<div> <div>
Coding exons <strong>{getNumberOfCodingExons(transcript)}</strong>{' '} Coding exons <strong>{getNumberOfCodingExons(transcript)}</strong>{' '}
...@@ -171,8 +171,10 @@ export const TranscriptsListItemInfo = ( ...@@ -171,8 +171,10 @@ export const TranscriptsListItemInfo = (
{props.expandDownload && renderInstantDownload(props)} {props.expandDownload && renderInstantDownload(props)}
</div> </div>
<div className={transcriptsListStyles.right}> <div className={transcriptsListStyles.right}>
<div>{transcript.symbol}</div>
<div> <div>
<strong>{transcript.symbol}</strong>
</div>
<div className={styles.viewInApp}>
<ViewInApp links={{ genomeBrowser: getBrowserLink() }} /> <ViewInApp links={{ genomeBrowser: getBrowserLink() }} />
</div> </div>
</div> </div>
......
...@@ -55,5 +55,5 @@ ...@@ -55,5 +55,5 @@
.ruler { .ruler {
grid-column: 3/4; grid-column: 3/4;
grid-row: 3/4; grid-row: 3/4;
padding-top: 10px; padding-top: 15px;
} }
...@@ -97,7 +97,9 @@ export const GeneImage = (props: GeneOverviewImageProps) => { ...@@ -97,7 +97,9 @@ export const GeneImage = (props: GeneOverviewImageProps) => {
}; };
const GeneId = (props: GeneOverviewImageProps) => ( const GeneId = (props: GeneOverviewImageProps) => (
<div className={styles.geneId}>{props.gene.id}</div> <div className={styles.geneId}>
{props.gene.id}.{props.gene.version}
</div>
); );
const DirectionIndicator = () => { const DirectionIndicator = () => {
......
...@@ -16,7 +16,6 @@ ...@@ -16,7 +16,6 @@
.defaultTab { .defaultTab {
background-color: transparent; background-color: transparent;
color: $blue; color: $blue;
font-weight: 700;
border-radius: 3px; border-radius: 3px;
margin-right: 3px; margin-right: 3px;
height: 30px; height: 30px;
......
@import 'src/styles/common'; @import 'src/styles/common';
.geneTab { .geneTab {
background-color: #33adff; background-color: $blue;
color: #fff; color: #fff;
font-weight: 700; font-weight: 700;
border-radius: 3px; border-radius: 3px;
margin-right: 3px; margin-right: 3px;
height: 30px; height: 30px;
display: flex;
align-items: center;
&::after { &::after {
border: none; border: none;
} }
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
.container { .container {
display: grid; display: grid;
grid-template-columns: $left_column auto; grid-template-columns: $left_column auto;
padding: 3px 0; padding: 9px 0;
} }
.filterLabel { .filterLabel {
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
.filterBox { .filterBox {
display: grid; display: grid;
grid-template-columns: 270px minmax(210px,auto) 20px; grid-template-columns: 270px minmax(210px, auto) 20px;
background-color: $soft-black; background-color: $soft-black;
color: $white; color: $white;
text-align: left; text-align: left;
......
/**
* 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 React, { useState } from 'react'; import React, { useState } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import noop from 'lodash/noop'; import noop from 'lodash/noop';
...@@ -15,8 +31,8 @@ import styles from './TranscriptsFilter.scss'; ...@@ -15,8 +31,8 @@ import styles from './TranscriptsFilter.scss';
import Checkbox from 'src/shared/components/checkbox/Checkbox'; import Checkbox from 'src/shared/components/checkbox/Checkbox';
type Props = { type Props = {
toggleFilter : () => void; toggleFilter: () => void;
isSidebarOpen : boolean; isSidebarOpen: boolean;
}; };
type OptionValue = string | number | boolean; type OptionValue = string | number | boolean;
...@@ -28,17 +44,15 @@ const radioData: RadioOptions = [ ...@@ -28,17 +44,15 @@ const radioData: RadioOptions = [
]; ];
const TranscriptsFilter = (props: Props) => { const TranscriptsFilter = (props: Props) => {
const [isChecked, setChecked] = useState(false); const [isChecked, setChecked] = useState(false);
const filterBoxClassnames = classNames( const filterBoxClassnames = classNames(styles.filterBox, {
styles.filterBox, [styles.filterBoxFullWidth]: !props.isSidebarOpen
{ [styles.filterBoxFullWidth]: !props.isSidebarOpen } });
);
const [selectedRadio, setselectedRadio] = useState<OptionValue>('default'); const [selectedRadio, setselectedRadio] = useState<OptionValue>('default');
const radioChange = (value: OptionValue ) => { const radioChange = (value: OptionValue) => {
setselectedRadio(value); setselectedRadio(value);
}; };
...@@ -48,21 +62,21 @@ const TranscriptsFilter = (props: Props) => { ...@@ -48,21 +62,21 @@ const TranscriptsFilter = (props: Props) => {
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.filterLabel} onClick={props.toggleFilter} > <div className={styles.filterLabel} onClick={props.toggleFilter}>
Filter & sort Filter & sort
<ChevronUp className={styles.chevron}/> <ChevronUp className={styles.chevron} />
</div> </div>
<div className={ filterBoxClassnames }> <div className={filterBoxClassnames}>
<div className={styles.sort}> <div className={styles.sort}>
<div className={styles.header}>Sort by</div> <div className={styles.header}>Sort by</div>
<div className={styles.sortContent}> <div className={styles.sortContent}>
<RadioGroup <RadioGroup
{...props} {...props}
classNames={{ classNames={{
label : styles.label, label: styles.label,
radio : styles.radio, radio: styles.radio,
radioChecked : styles.radioChecked, radioChecked: styles.radioChecked,
wrapper : styles.buttonWrapper wrapper: styles.buttonWrapper
}} }}
options={radioData} options={radioData}
onChange={radioChange} onChange={radioChange}
...@@ -74,36 +88,36 @@ const TranscriptsFilter = (props: Props) => { ...@@ -74,36 +88,36 @@ const TranscriptsFilter = (props: Props) => {
<div className={styles.header}>Filter by</div> <div className={styles.header}>Filter by</div>
<div className={styles.filterContent}> <div className={styles.filterContent}>
<div className={styles.filterColumn}> <div className={styles.filterColumn}>
<Checkbox <Checkbox
classNames={{ classNames={{
unchecked: styles.checkboxUnchecked, unchecked: styles.checkboxUnchecked,
checked: styles.checkboxChecked checked: styles.checkboxChecked
}} }}
labelClassName={styles.label} labelClassName={styles.label}
checked={isChecked} checked={isChecked}
label="protein coding" label="protein coding"
onChange={checkboxChange} onChange={checkboxChange}
/> />
<Checkbox <Checkbox
classNames={{ classNames={{
unchecked: styles.checkboxUnchecked, unchecked: styles.checkboxUnchecked,
checked: styles.checkboxChecked checked: styles.checkboxChecked
}} }}
labelClassName={styles.label} labelClassName={styles.label}
checked={false} checked={false}
label="nonsense medicated decay" label="nonsense medicated decay"
onChange={noop} onChange={noop}
/> />
<Checkbox <Checkbox
classNames={{ classNames={{
unchecked: styles.checkboxUnchecked, unchecked: styles.checkboxUnchecked,
checked: styles.checkboxChecked checked: styles.checkboxChecked
}} }}
labelClassName={styles.label} labelClassName={styles.label}
checked={false} checked={false}
label="processed transcript" label="processed transcript"
onChange={noop} onChange={noop}
/> />
</div> </div>
<div className={styles.filterColumn}> <div className={styles.filterColumn}>
<Checkbox <Checkbox
...@@ -155,11 +169,11 @@ const TranscriptsFilter = (props: Props) => { ...@@ -155,11 +169,11 @@ const TranscriptsFilter = (props: Props) => {
</div> </div>
</div> </div>
); );
} };
const mapStateToProps = (state: RootState) => { const mapStateToProps = (state: RootState) => {
return { return {
isSidebarOpen: isEntityViewerSidebarOpen(state), isSidebarOpen: isEntityViewerSidebarOpen(state)
}; };
}; };
......
...@@ -3,6 +3,6 @@ ...@@ -3,6 +3,6 @@
align-items: center; align-items: center;
} }
.scaleSwitcherWrapper { .entityTypeIndicatorWrapper {
margin-left: auto; margin-left: auto;
} }
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
import React from 'react'; import React from 'react';
import { useQuery, gql } from '@apollo/client'; import { useQuery, gql } from '@apollo/client';
import ScaleSwitcher from './scale-switcher/ScaleSwitcher'; import EntityTypeIndicator from 'src/shared/components/entity-type-indicator/EntityTypeIndicator';
import { GeneSummaryStrip } from 'src/shared/components/feature-summary-strip'; import { GeneSummaryStrip } from 'src/shared/components/feature-summary-strip';
import { Slice } from 'src/content/app/entity-viewer/types/slice'; import { Slice } from 'src/content/app/entity-viewer/types/slice';
...@@ -72,8 +72,8 @@ export const EntityViewerTopbar = (props: EntityViewerTopbarProps) => { ...@@ -72,8 +72,8 @@ export const EntityViewerTopbar = (props: EntityViewerTopbarProps) => {
<GeneSummaryStrip gene={geneToEnsObjectFields(data.gene)} /> <GeneSummaryStrip gene={geneToEnsObjectFields(data.gene)} />
) : null} ) : null}
<div className={styles.scaleSwitcher}> <div className={styles.entityTypeIndicatorWrapper}>
<ScaleSwitcher /> <EntityTypeIndicator entity={'Gene'} />
</div> </div>
</div> </div>
); );
......
...@@ -27,6 +27,7 @@ export const restGeneAdaptor = (gene: GeneInResponse): Gene => { ...@@ -27,6 +27,7 @@ export const restGeneAdaptor = (gene: GeneInResponse): Gene => {
return { return {
id: gene.id, id: gene.id,
version: gene.version,
type: 'Gene', type: 'Gene',
symbol: gene.display_name, symbol: gene.display_name,
so_term: gene.biotype, so_term: gene.biotype,
......
...@@ -24,6 +24,7 @@ import { Metadata } from './metadata'; ...@@ -24,6 +24,7 @@ import { Metadata } from './metadata';
export type Gene = { export type Gene = {
type: 'Gene'; type: 'Gene';
id: string; id: string;
version: number;
symbol: string; symbol: string;
source?: Source; source?: Source;
so_term: string; // is there a better name for it? so_term: string; // is there a better name for it?
......
@import 'src/styles/common'; @import 'src/styles/common';
.container { .indicator {
display: flex; border-radius: 30px;
} height: 21px;
padding: 1px 16px 0;
.selectedNode {
border-radius: 12px;
height: 24px;
padding: 1px 20px 0 20px;
margin-right: 24px; margin-right: 24px;
background-color: $black; background-color: $black;
color: $white; color: $white;
text-align: center; text-align: center;
cursor: default;
}
.emptyNode {
border-radius: 100%;
background-color: $grey;
margin: 6px 24px 0 0;
width: 10px;
height: 10px;
} }
...@@ -16,22 +16,13 @@ ...@@ -16,22 +16,13 @@
import React from 'react'; import React from 'react';
import styles from './ScaleSwitcher.scss'; import styles from './EntityTypeIndicator.scss';
const ScaleSwitcher = () => { type EntityTypeIndicatorProps = {
return ( entity: string;
<div className={styles.container}>
{renderEmptyDots(3)}
<div className={styles.selectedNode}>Gene</div>
{renderEmptyDots(3)}
</div>
);
}; };
const EntityTypeIndicator = (props: EntityTypeIndicatorProps) => (
<div className={styles.indicator}>{props.entity}</div>
);