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;
display: grid;
background-color: $backgroundColor;
grid-template-columns: 178px 902px 1fr;
grid-template-rows: min-content 90px 1fr;
padding: 75px 20px 10px 20px;
grid-template-rows: min-content 75px 1fr;
padding: 60px 20px 10px;
height: 100%; // may need to change this later
width: 100%;
overflow-y: auto;
......@@ -39,7 +39,7 @@ $backgroundColor: $black;
grid-area: 2 / 1 / 3 / 4;
z-index: 2;
position: sticky;
top: -105px;
top: -90px;
height: 100%;
background-color: $backgroundColor;
padding-left: 180px;
......
......@@ -56,6 +56,7 @@ const QUERY = gql`
query Gene($id: String!) {
gene(byId: { id: $id }) {
id
version
slice {
location {
start
......
......@@ -3,15 +3,26 @@
.header {
border-bottom: 1px solid $orange;
padding: 8px 0;
padding: 0;
position: sticky;
top: -15px;
background-color: $black;
z-index: 1;
font-size: 12px;
}
.headerChevron {
width: 16px;
height: 16px;
cursor: pointer;
margin-left: 0.5em;
top: 5px;
position: relative;
}
.content {
position: relative;
padding-top: 36px;
}
.stripedBackground {
......@@ -33,7 +44,8 @@
.row {
display: grid;
grid-template-columns: $left_column $middle_column $middle_column_right_gap $right_column;
padding: 3px 0;
padding: 9px 0px;
font-size: 12px;
}
.left {
......@@ -45,6 +57,7 @@
.middle {
grid-column: 2/3;
position: relative;
top: 2px;
}
.right {
......
......@@ -149,7 +149,7 @@ export const TranscriptsListItemInfo = (
</div>
<div className={styles.topRight}>
<div>
Spliced RNA length <strong>{splicedRNALength} bp</strong>
Spliced RNA length <strong>{splicedRNALength} </strong> bp
</div>
<div>
Coding exons <strong>{getNumberOfCodingExons(transcript)}</strong>{' '}
......@@ -171,8 +171,10 @@ export const TranscriptsListItemInfo = (
{props.expandDownload && renderInstantDownload(props)}
</div>
<div className={transcriptsListStyles.right}>
<div>{transcript.symbol}</div>
<div>
<strong>{transcript.symbol}</strong>
</div>
<div className={styles.viewInApp}>
<ViewInApp links={{ genomeBrowser: getBrowserLink() }} />
</div>
</div>
......
......@@ -55,5 +55,5 @@
.ruler {
grid-column: 3/4;
grid-row: 3/4;
padding-top: 10px;
padding-top: 15px;
}
......@@ -97,7 +97,9 @@ export const GeneImage = (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 = () => {
......
......@@ -16,7 +16,6 @@
.defaultTab {
background-color: transparent;
color: $blue;
font-weight: 700;
border-radius: 3px;
margin-right: 3px;
height: 30px;
......
@import 'src/styles/common';
.geneTab {
background-color: #33adff;
background-color: $blue;
color: #fff;
font-weight: 700;
border-radius: 3px;
margin-right: 3px;
height: 30px;
display: flex;
align-items: center;
&::after {
border: none;
}
......
......@@ -4,7 +4,7 @@
.container {
display: grid;
grid-template-columns: $left_column auto;
padding: 3px 0;
padding: 9px 0;
}
.filterLabel {
......@@ -23,7 +23,7 @@
.filterBox {
display: grid;
grid-template-columns: 270px minmax(210px,auto) 20px;
grid-template-columns: 270px minmax(210px, auto) 20px;
background-color: $soft-black;
color: $white;
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 classNames from 'classnames';
import noop from 'lodash/noop';
......@@ -15,8 +31,8 @@ import styles from './TranscriptsFilter.scss';
import Checkbox from 'src/shared/components/checkbox/Checkbox';
type Props = {
toggleFilter : () => void;
isSidebarOpen : boolean;
toggleFilter: () => void;
isSidebarOpen: boolean;
};
type OptionValue = string | number | boolean;
......@@ -28,17 +44,15 @@ const radioData: RadioOptions = [
];
const TranscriptsFilter = (props: Props) => {
const [isChecked, setChecked] = useState(false);
const filterBoxClassnames = classNames(
styles.filterBox,
{ [styles.filterBoxFullWidth]: !props.isSidebarOpen }
);
const filterBoxClassnames = classNames(styles.filterBox, {
[styles.filterBoxFullWidth]: !props.isSidebarOpen
});
const [selectedRadio, setselectedRadio] = useState<OptionValue>('default');
const radioChange = (value: OptionValue ) => {
const radioChange = (value: OptionValue) => {
setselectedRadio(value);
};
......@@ -48,21 +62,21 @@ const TranscriptsFilter = (props: Props) => {
return (
<div className={styles.container}>
<div className={styles.filterLabel} onClick={props.toggleFilter} >
<div className={styles.filterLabel} onClick={props.toggleFilter}>
Filter & sort
<ChevronUp className={styles.chevron}/>
<ChevronUp className={styles.chevron} />
</div>
<div className={ filterBoxClassnames }>
<div className={filterBoxClassnames}>
<div className={styles.sort}>
<div className={styles.header}>Sort by</div>
<div className={styles.sortContent}>
<RadioGroup
{...props}
classNames={{
label : styles.label,
radio : styles.radio,
radioChecked : styles.radioChecked,
wrapper : styles.buttonWrapper
label: styles.label,
radio: styles.radio,
radioChecked: styles.radioChecked,
wrapper: styles.buttonWrapper
}}
options={radioData}
onChange={radioChange}
......@@ -155,11 +169,11 @@ const TranscriptsFilter = (props: Props) => {
</div>
</div>
);
}
};
const mapStateToProps = (state: RootState) => {
return {
isSidebarOpen: isEntityViewerSidebarOpen(state),
isSidebarOpen: isEntityViewerSidebarOpen(state)
};
};
......
......@@ -3,6 +3,6 @@
align-items: center;
}
.scaleSwitcherWrapper {
.entityTypeIndicatorWrapper {
margin-left: auto;
}
......@@ -17,7 +17,7 @@
import React from 'react';
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 { Slice } from 'src/content/app/entity-viewer/types/slice';
......@@ -72,8 +72,8 @@ export const EntityViewerTopbar = (props: EntityViewerTopbarProps) => {
<GeneSummaryStrip gene={geneToEnsObjectFields(data.gene)} />
) : null}
<div className={styles.scaleSwitcher}>
<ScaleSwitcher />
<div className={styles.entityTypeIndicatorWrapper}>
<EntityTypeIndicator entity={'Gene'} />
</div>
</div>
);
......
......@@ -27,6 +27,7 @@ export const restGeneAdaptor = (gene: GeneInResponse): Gene => {
return {
id: gene.id,
version: gene.version,
type: 'Gene',
symbol: gene.display_name,
so_term: gene.biotype,
......
......@@ -24,6 +24,7 @@ import { Metadata } from './metadata';
export type Gene = {
type: 'Gene';
id: string;
version: number;
symbol: string;
source?: Source;
so_term: string; // is there a better name for it?
......
@import 'src/styles/common';
.container {
display: flex;
}
.selectedNode {
border-radius: 12px;
height: 24px;
padding: 1px 20px 0 20px;
.indicator {
border-radius: 30px;
height: 21px;
padding: 1px 16px 0;
margin-right: 24px;
background-color: $black;
color: $white;
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 @@
import React from 'react';
import styles from './ScaleSwitcher.scss';
import styles from './EntityTypeIndicator.scss';
const ScaleSwitcher = () => {
return (
<div className={styles.container}>
{renderEmptyDots(3)}
<div className={styles.selectedNode}>Gene</div>
{renderEmptyDots(3)}
</div>
);
type EntityTypeIndicatorProps = {
entity: string;
};
const EntityTypeIndicator = (props: EntityTypeIndicatorProps) => (
<div className={styles.indicator}>{props.entity}</div>
);
const renderEmptyDots = (number: number) => {
return [...Array(number)].map((_, index) => (
<div key={index} className={styles.emptyNode} />
));
};
export default ScaleSwitcher;
export default EntityTypeIndicator;
......@@ -41,35 +41,27 @@ type Props = {
};
const RadioGroup = (props: Props) => {
const handleOnChange = (value: OptionValue) => {
const handleChange = (value: OptionValue) => {
if (props.disabled || value === props.selectedOption) {
return;
}
props.onChange(value);
};
const labelClass = classNames (
styles.label,
props.classNames?.label,
)
const labelClass = classNames(styles.label, props.classNames?.label);
const wrapperClass = classNames (
styles.wrapper,
props.classNames?.wrapper,
)
const wrapperClass = classNames(styles.wrapper, props.classNames?.wrapper);
const getRadioClass = (option: RadioOption) => {
const radioCheckedClass = classNames (
const radioCheckedClass = classNames(
styles.radioChecked,
props.classNames?.radioChecked,
props.classNames?.radioChecked
);
const radioClass = classNames(
styles.radio,
props.classNames?.radio,
option.value === props.selectedOption
? radioCheckedClass
: undefined
option.value === props.selectedOption ? radioCheckedClass : undefined
);
return radioClass;
......@@ -79,12 +71,15 @@ const RadioGroup = (props: Props) => {
<div>
{props.options.map((option, index) => (
<div key={index} className={wrapperClass}>
<div onClick={() => handleOnChange(option.value)} className={getRadioClass(option)} />
<div
onClick={() => handleChange(option.value)}
className={getRadioClass(option)}
/>
<label className={labelClass}>
<input
className={styles.input}
type="radio"
onChange={() => handleOnChange(option.value)}
onChange={() => handleChange(option.value)}
checked={option.value === props.selectedOption}
disabled={props.disabled}
/>
......
......@@ -2,7 +2,6 @@
.tabsContainer {
display: flex;
font-size: 14px;
overflow-y: hidden;
height: 40px;
scrollbar-width: none;
......
......@@ -3,6 +3,7 @@
.viewInLabel {
color: $grey;
width: 50px;
font-size: 12px;
}
.viewInAppLinkButtons {
display: flex;
......
// 1. Global
// ---------
$global-font-size: 14px;
$global-font-size: 13px;
$global-lineheight: 1.5;
$black: #1b2c39;
$white: #fff;
......
......@@ -4,7 +4,6 @@
padding: 20px;
}
.gridWrapper {
display: grid;
grid-template-columns: 210px 210px 210px;
......
......@@ -81,18 +81,17 @@ storiesOf('Components|Shared Components/Checkbox', module)
<div>
<StatefulCheckbox label={'I am label'} />
<StatefulCheckbox
label={'I am another very long long label that wraps to another line'}
/>
<StatefulCheckbox
label={'I am label'}
label={
'I am another very long long label that wraps to another line'
}
/>
<StatefulCheckbox label={'I am label'} />
</div>
<div>
<StatefulCheckbox label={'I am label'} />
<StatefulCheckbox label={'I am label'} />
</div>
</div>
);
});
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