From 4965dcca1b44f727421e8b1fac1559e67b8af7f6 Mon Sep 17 00:00:00 2001 From: Jyothish Date: Fri, 21 Aug 2020 15:11:20 +0100 Subject: [PATCH] Entity viewer design review changes (#316) * Entity viewer design review changes * Scaleswitcher changed to entityTypeIndicator and move it to global shared component --- .../app/entity-viewer/gene-view/GeneView.scss | 6 +- .../app/entity-viewer/gene-view/GeneView.tsx | 1 + .../DefaultTranscriptsList.scss | 17 ++- .../TranscriptsListItemInfo.scss | 4 + .../TranscriptsListItemInfo.tsx | 6 +- .../GeneOverviewImage.scss | 2 +- .../gene-overview-image/GeneOverviewImage.tsx | 4 +- .../GeneViewSidebarTabs.scss | 1 - .../gene-view-tabs/GeneViewTabs.scss | 4 +- .../transcripts-filter/TranscriptsFilter.scss | 4 +- .../transcripts-filter/TranscriptsFilter.tsx | 108 ++++++++++-------- .../EntityViewerTopbar.scss | 2 +- .../EntityViewerTopbar.tsx | 6 +- .../scale-switcher/ScaleSwitcher.scss | 24 ---- .../rest/rest-adaptors/rest-gene-adaptor.ts | 1 + .../content/app/entity-viewer/types/gene.ts | 1 + .../EntityTypeIndicator.scss | 11 ++ .../EntityTypeIndicator.tsx} | 23 ++-- .../components/radio-group/RadioGroup.tsx | 27 ++--- .../src/shared/components/tabs/Tabs.scss | 1 - .../components/view-in-app/ViewInApp.scss | 1 + src/ensembl/src/styles/_settings.scss | 2 +- .../colours/Colours.stories.tsx | 2 +- .../checkbox/Checkbox.stories.scss | 1 - .../checkbox/Checkbox.stories.tsx | 9 +- 25 files changed, 139 insertions(+), 129 deletions(-) delete mode 100644 src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-topbar/scale-switcher/ScaleSwitcher.scss create mode 100644 src/ensembl/src/shared/components/entity-type-indicator/EntityTypeIndicator.scss rename src/ensembl/src/{content/app/entity-viewer/shared/components/entity-viewer-topbar/scale-switcher/ScaleSwitcher.tsx => shared/components/entity-type-indicator/EntityTypeIndicator.tsx} (61%) diff --git a/src/ensembl/src/content/app/entity-viewer/gene-view/GeneView.scss b/src/ensembl/src/content/app/entity-viewer/gene-view/GeneView.scss index 69bff4c79..baafe8b81 100644 --- a/src/ensembl/src/content/app/entity-viewer/gene-view/GeneView.scss +++ b/src/ensembl/src/content/app/entity-viewer/gene-view/GeneView.scss @@ -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; diff --git a/src/ensembl/src/content/app/entity-viewer/gene-view/GeneView.tsx b/src/ensembl/src/content/app/entity-viewer/gene-view/GeneView.tsx index 1993a1281..5dbd25eed 100644 --- a/src/ensembl/src/content/app/entity-viewer/gene-view/GeneView.tsx +++ b/src/ensembl/src/content/app/entity-viewer/gene-view/GeneView.tsx @@ -56,6 +56,7 @@ const QUERY = gql` query Gene($id: String!) { gene(byId: { id: $id }) { id + version slice { location { start diff --git a/src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/DefaultTranscriptsList.scss b/src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/DefaultTranscriptsList.scss index 410de72ac..0cb05695c 100644 --- a/src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/DefaultTranscriptsList.scss +++ b/src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/DefaultTranscriptsList.scss @@ -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 { diff --git a/src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.scss b/src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.scss index c2a08ef10..fa1d13061 100644 --- a/src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.scss +++ b/src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.scss @@ -60,3 +60,7 @@ cursor: pointer; height: 16px; } + +.viewInApp { + padding-top: 32px; +} diff --git a/src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.tsx b/src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.tsx index d08d050ab..bec8f6dea 100644 --- a/src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.tsx +++ b/src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.tsx @@ -149,7 +149,7 @@ export const TranscriptsListItemInfo = (
- Spliced RNA length {splicedRNALength} bp + Spliced RNA length {splicedRNALength} bp
Coding exons {getNumberOfCodingExons(transcript)}{' '} @@ -171,8 +171,10 @@ export const TranscriptsListItemInfo = ( {props.expandDownload && renderInstantDownload(props)}
-
{transcript.symbol}
+ {transcript.symbol} +
+
diff --git a/src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-overview-image/GeneOverviewImage.scss b/src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-overview-image/GeneOverviewImage.scss index 89b061adc..850427907 100644 --- a/src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-overview-image/GeneOverviewImage.scss +++ b/src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-overview-image/GeneOverviewImage.scss @@ -55,5 +55,5 @@ .ruler { grid-column: 3/4; grid-row: 3/4; - padding-top: 10px; + padding-top: 15px; } diff --git a/src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-overview-image/GeneOverviewImage.tsx b/src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-overview-image/GeneOverviewImage.tsx index 006d98719..0ea22329c 100644 --- a/src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-overview-image/GeneOverviewImage.tsx +++ b/src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-overview-image/GeneOverviewImage.tsx @@ -97,7 +97,9 @@ export const GeneImage = (props: GeneOverviewImageProps) => { }; const GeneId = (props: GeneOverviewImageProps) => ( -
{props.gene.id}
+
+ {props.gene.id}.{props.gene.version} +
); const DirectionIndicator = () => { diff --git a/src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-view-sidebar-tabs/GeneViewSidebarTabs.scss b/src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-view-sidebar-tabs/GeneViewSidebarTabs.scss index 25bff36f5..b39969e46 100644 --- a/src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-view-sidebar-tabs/GeneViewSidebarTabs.scss +++ b/src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-view-sidebar-tabs/GeneViewSidebarTabs.scss @@ -16,7 +16,6 @@ .defaultTab { background-color: transparent; color: $blue; - font-weight: 700; border-radius: 3px; margin-right: 3px; height: 30px; diff --git a/src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-view-tabs/GeneViewTabs.scss b/src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-view-tabs/GeneViewTabs.scss index 009f4a8a5..13fd893ec 100644 --- a/src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-view-tabs/GeneViewTabs.scss +++ b/src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-view-tabs/GeneViewTabs.scss @@ -1,12 +1,14 @@ @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; } diff --git a/src/ensembl/src/content/app/entity-viewer/gene-view/components/transcripts-filter/TranscriptsFilter.scss b/src/ensembl/src/content/app/entity-viewer/gene-view/components/transcripts-filter/TranscriptsFilter.scss index e12cae5e7..937237ae4 100644 --- a/src/ensembl/src/content/app/entity-viewer/gene-view/components/transcripts-filter/TranscriptsFilter.scss +++ b/src/ensembl/src/content/app/entity-viewer/gene-view/components/transcripts-filter/TranscriptsFilter.scss @@ -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; diff --git a/src/ensembl/src/content/app/entity-viewer/gene-view/components/transcripts-filter/TranscriptsFilter.tsx b/src/ensembl/src/content/app/entity-viewer/gene-view/components/transcripts-filter/TranscriptsFilter.tsx index 93b4bfe48..a3ef2358c 100644 --- a/src/ensembl/src/content/app/entity-viewer/gene-view/components/transcripts-filter/TranscriptsFilter.tsx +++ b/src/ensembl/src/content/app/entity-viewer/gene-view/components/transcripts-filter/TranscriptsFilter.tsx @@ -1,3 +1,19 @@ +/** + * 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('default'); - const radioChange = (value: OptionValue ) => { + const radioChange = (value: OptionValue) => { setselectedRadio(value); }; @@ -48,21 +62,21 @@ const TranscriptsFilter = (props: Props) => { return (
-
+
Filter & sort - +
-
+
Sort by
{
Filter by
- - - + + +
{
); -} +}; const mapStateToProps = (state: RootState) => { return { - isSidebarOpen: isEntityViewerSidebarOpen(state), + isSidebarOpen: isEntityViewerSidebarOpen(state) }; }; diff --git a/src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-topbar/EntityViewerTopbar.scss b/src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-topbar/EntityViewerTopbar.scss index bfe908de4..090410f76 100644 --- a/src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-topbar/EntityViewerTopbar.scss +++ b/src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-topbar/EntityViewerTopbar.scss @@ -3,6 +3,6 @@ align-items: center; } -.scaleSwitcherWrapper { +.entityTypeIndicatorWrapper { margin-left: auto; } diff --git a/src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-topbar/EntityViewerTopbar.tsx b/src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-topbar/EntityViewerTopbar.tsx index 0e6fa44aa..c1033f1d1 100644 --- a/src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-topbar/EntityViewerTopbar.tsx +++ b/src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-topbar/EntityViewerTopbar.tsx @@ -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) => { ) : null} -
- +
+
); diff --git a/src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-topbar/scale-switcher/ScaleSwitcher.scss b/src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-topbar/scale-switcher/ScaleSwitcher.scss deleted file mode 100644 index 7fc173ec1..000000000 --- a/src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-topbar/scale-switcher/ScaleSwitcher.scss +++ /dev/null @@ -1,24 +0,0 @@ -@import 'src/styles/common'; - -.container { - display: flex; -} - -.selectedNode { - border-radius: 12px; - height: 24px; - padding: 1px 20px 0 20px; - 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; -} diff --git a/src/ensembl/src/content/app/entity-viewer/shared/rest/rest-adaptors/rest-gene-adaptor.ts b/src/ensembl/src/content/app/entity-viewer/shared/rest/rest-adaptors/rest-gene-adaptor.ts index 5784b988b..eeef88a9a 100644 --- a/src/ensembl/src/content/app/entity-viewer/shared/rest/rest-adaptors/rest-gene-adaptor.ts +++ b/src/ensembl/src/content/app/entity-viewer/shared/rest/rest-adaptors/rest-gene-adaptor.ts @@ -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, diff --git a/src/ensembl/src/content/app/entity-viewer/types/gene.ts b/src/ensembl/src/content/app/entity-viewer/types/gene.ts index 64ac2e858..15aec9525 100644 --- a/src/ensembl/src/content/app/entity-viewer/types/gene.ts +++ b/src/ensembl/src/content/app/entity-viewer/types/gene.ts @@ -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? diff --git a/src/ensembl/src/shared/components/entity-type-indicator/EntityTypeIndicator.scss b/src/ensembl/src/shared/components/entity-type-indicator/EntityTypeIndicator.scss new file mode 100644 index 000000000..b19ac2f4a --- /dev/null +++ b/src/ensembl/src/shared/components/entity-type-indicator/EntityTypeIndicator.scss @@ -0,0 +1,11 @@ +@import 'src/styles/common'; + +.indicator { + border-radius: 30px; + height: 21px; + padding: 1px 16px 0; + margin-right: 24px; + background-color: $black; + color: $white; + text-align: center; +} diff --git a/src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-topbar/scale-switcher/ScaleSwitcher.tsx b/src/ensembl/src/shared/components/entity-type-indicator/EntityTypeIndicator.tsx similarity index 61% rename from src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-topbar/scale-switcher/ScaleSwitcher.tsx rename to src/ensembl/src/shared/components/entity-type-indicator/EntityTypeIndicator.tsx index 55a145e6f..bc9021e02 100644 --- a/src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-topbar/scale-switcher/ScaleSwitcher.tsx +++ b/src/ensembl/src/shared/components/entity-type-indicator/EntityTypeIndicator.tsx @@ -16,22 +16,13 @@ import React from 'react'; -import styles from './ScaleSwitcher.scss'; +import styles from './EntityTypeIndicator.scss'; -const ScaleSwitcher = () => { - return ( -
- {renderEmptyDots(3)} -
Gene
- {renderEmptyDots(3)} -
- ); +type EntityTypeIndicatorProps = { + entity: string; }; +const EntityTypeIndicator = (props: EntityTypeIndicatorProps) => ( +
{props.entity}
+); -const renderEmptyDots = (number: number) => { - return [...Array(number)].map((_, index) => ( -
- )); -}; - -export default ScaleSwitcher; +export default EntityTypeIndicator; diff --git a/src/ensembl/src/shared/components/radio-group/RadioGroup.tsx b/src/ensembl/src/shared/components/radio-group/RadioGroup.tsx index c738374be..5f8d69fc0 100644 --- a/src/ensembl/src/shared/components/radio-group/RadioGroup.tsx +++ b/src/ensembl/src/shared/components/radio-group/RadioGroup.tsx @@ -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) => {
{props.options.map((option, index) => (
-
handleOnChange(option.value)} className={getRadioClass(option)} /> +
handleChange(option.value)} + className={getRadioClass(option)} + />
); }); -- GitLab