Entity viewer design review changes (#316)

* Entity viewer design review changes
* Scaleswitcher changed to entityTypeIndicator and move it to global shared component

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;

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

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 {

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;
+}

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 = (
         </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>

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;
 }

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) => (
-  <div className={styles.geneId}>{props.gene.id}</div>
+  <div className={styles.geneId}>
+    {props.gene.id}.{props.gene.version}
+  </div>
 );
 
 const DirectionIndicator = () => {

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;

src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-view-tabs/GeneViewTabs.scss

 @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;
   }

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;

src/ensembl/src/content/app/entity-viewer/gene-view/components/transcripts-filter/TranscriptsFilter.tsx

+/**
+ * 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}
@@ -74,36 +88,36 @@ const TranscriptsFilter = (props: Props) => {
           <div className={styles.header}>Filter by</div>
           <div className={styles.filterContent}>
             <div className={styles.filterColumn}>
-            <Checkbox
-              classNames={{
-                unchecked: styles.checkboxUnchecked,
-                checked: styles.checkboxChecked
-              }}
-              labelClassName={styles.label}
-              checked={isChecked}
-              label="protein coding"
-              onChange={checkboxChange}
-            />
-            <Checkbox
-              classNames={{
-                unchecked: styles.checkboxUnchecked,
-                checked: styles.checkboxChecked
-              }}
-              labelClassName={styles.label}
-              checked={false}
-              label="nonsense medicated decay"
-              onChange={noop}
-            />
-            <Checkbox
-              classNames={{
-                unchecked: styles.checkboxUnchecked,
-                checked: styles.checkboxChecked
-              }}
-              labelClassName={styles.label}
-              checked={false}
-              label="processed transcript"
-              onChange={noop}
-            />
+              <Checkbox
+                classNames={{
+                  unchecked: styles.checkboxUnchecked,
+                  checked: styles.checkboxChecked
+                }}
+                labelClassName={styles.label}
+                checked={isChecked}
+                label="protein coding"
+                onChange={checkboxChange}
+              />
+              <Checkbox
+                classNames={{
+                  unchecked: styles.checkboxUnchecked,
+                  checked: styles.checkboxChecked
+                }}
+                labelClassName={styles.label}
+                checked={false}
+                label="nonsense medicated decay"
+                onChange={noop}
+              />
+              <Checkbox
+                classNames={{
+                  unchecked: styles.checkboxUnchecked,
+                  checked: styles.checkboxChecked
+                }}
+                labelClassName={styles.label}
+                checked={false}
+                label="processed transcript"
+                onChange={noop}
+              />
             </div>
             <div className={styles.filterColumn}>
               <Checkbox
@@ -155,11 +169,11 @@ const TranscriptsFilter = (props: Props) => {
       </div>
     </div>
   );
-}
+};
 
 const mapStateToProps = (state: RootState) => {
   return {
-    isSidebarOpen: isEntityViewerSidebarOpen(state),
+    isSidebarOpen: isEntityViewerSidebarOpen(state)
   };
 };
 

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;
 }

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) => {
         <GeneSummaryStrip gene={geneToEnsObjectFields(data.gene)} />
       ) : null}
 
-      <div className={styles.scaleSwitcher}>
-        <ScaleSwitcher />
+      <div className={styles.entityTypeIndicatorWrapper}>
+        <EntityTypeIndicator entity={'Gene'} />
       </div>
     </div>
   );

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,

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?

src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-topbar/scale-switcher/ScaleSwitcher.scss → src/ensembl/src/shared/components/entity-type-indicator/EntityTypeIndicator.scss

 @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;
 }

src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-topbar/scale-switcher/ScaleSwitcher.tsx → 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 (
-    <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;

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) => {
     <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}
             />

src/ensembl/src/shared/components/tabs/Tabs.scss

@@ -2,7 +2,6 @@
 
 .tabsContainer {
   display: flex;
-  font-size: 14px;
   overflow-y: hidden;
   height: 40px;
   scrollbar-width: none;

src/ensembl/src/shared/components/view-in-app/ViewInApp.scss

@@ -3,6 +3,7 @@
 .viewInLabel {
   color: $grey;
   width: 50px;
+  font-size: 12px;
 }
 .viewInAppLinkButtons {
   display: flex;

src/ensembl/src/styles/_settings.scss

 // 1. Global
 // ---------
 
-$global-font-size: 14px;
+$global-font-size: 13px;
 $global-lineheight: 1.5;
 $black: #1b2c39;
 $white: #fff;

src/ensembl/stories/design-primitives/colours/Colours.stories.tsx

@@ -30,7 +30,7 @@ const colours = [
     name: 'Soft black',
     variableName: '$soft-black',
     value: variables['soft-black']
-  },  
+  },
   {
     name: 'Blue',
     variableName: '$blue',

src/ensembl/stories/shared-components/checkbox/Checkbox.stories.scss

@@ -4,7 +4,6 @@
   padding: 20px;
 }
 
-
 .gridWrapper {
   display: grid;
   grid-template-columns: 210px 210px 210px;

src/ensembl/stories/shared-components/checkbox/Checkbox.stories.tsx

@@ -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>
     );
   });