FIX: #383 - using vw instead of % to divide the space for the viewer

ProteinsWebTeam · May 26, 2022 · 9051fc9 · 9051fc9
1 parent d4db335
commit 9051fc9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 51 deletions.
diff --git a/src/components/ProtVista/index.js b/src/components/ProtVista/index.js
@@ -465,7 +465,6 @@ export class ProtVista extends Component /*:: <Props, State> */ {
     if (dataDB.payload) {
       databases = dataDB.payload.databases;
     }
-    // const databases = dataDB.payload.databases;
     if (entry.source_database === 'mobidblt')
       return <Link href={`https://mobidb.org/${id}`}>{entry.accession}</Link>;
     if (entry.type === 'residue')
@@ -594,14 +593,12 @@ export class ProtVista extends Component /*:: <Props, State> */ {
       showConservationButton,
       children,
       showOptions = true,
-      label,
     } = this.props;
 
     if (!(length && data)) return <Loading />;
 
     const { hideCategory } = this.state;
 
-    const labelClass = label.name ? 'label-by-name' : '';
     return (
       <div
         ref={this._mainRef}
@@ -622,7 +619,6 @@ export class ProtVista extends Component /*:: <Props, State> */ {
                   className={f(
                     'aligned-to-track-component',
                     'view-options-wrap',
-                    `${labelClass}`,
                   )}
                 >
                   {showOptions && (
@@ -649,12 +645,7 @@ export class ProtVista extends Component /*:: <Props, State> */ {
               >
                 <div className={f('track-container')}>
                   <div className={f('track-row')}>
-                    <div
-                      className={f(
-                        'aligned-to-track-component',
-                        `${labelClass}`,
-                      )}
-                    >
+                    <div className={f('aligned-to-track-component')}>
                       <protvista-navigation
                         length={length}
                         displaystart="1"
@@ -663,12 +654,7 @@ export class ProtVista extends Component /*:: <Props, State> */ {
                     </div>
                   </div>
                   <div className={f('track-row')}>
-                    <div
-                      className={f(
-                        'aligned-to-track-component',
-                        `${labelClass}`,
-                      )}
-                    >
+                    <div className={f('aligned-to-track-component')}>
                       <protvista-sequence
                         ref={this._webProteinRef}
                         length={length}
@@ -701,10 +687,7 @@ export class ProtVista extends Component /*:: <Props, State> */ {
                           <div key={type} className={f('track-container')}>
                             <div className={f('track-row')}>
                               <div
-                                className={f(
-                                  'track-component',
-                                  `${labelClass}`,
-                                )}
+                                className={f('track-component')}
                                 style={{ borderBottom: 0 }}
                               >
                                 <header>
@@ -756,7 +739,6 @@ export class ProtVista extends Component /*:: <Props, State> */ {
                                         className={f(
                                           'track-component',
                                           entry.type.replace('_', '-'),
-                                          `${labelClass}`,
                                         )}
                                       >
                                         {entry.type ===
@@ -816,12 +798,7 @@ export class ProtVista extends Component /*:: <Props, State> */ {
                                         )}
                                       </div>
                                     ) : (
-                                      <div
-                                        className={f(
-                                          'track-component',
-                                          `${labelClass}`,
-                                        )}
-                                      >
+                                      <div className={f('track-component')}>
                                         <protvista-interpro-track
                                           length={length}
                                           displaystart="1"
@@ -838,12 +815,7 @@ export class ProtVista extends Component /*:: <Props, State> */ {
                                         />
                                       </div>
                                     )}
-                                    <div
-                                      className={f(
-                                        'track-accession',
-                                        `${labelClass}`,
-                                      )}
-                                    >
+                                    <div className={f('track-accession')}>
                                       {this.renderLabels(entry)}
                                     </div>
                                   </div>
@@ -855,7 +827,7 @@ export class ProtVista extends Component /*:: <Props, State> */ {
                   {showConservationButton ? (
                     <div className={f('track-container')}>
                       <div className={f('track-row')}>
-                        <div className={f('track-component', labelClass)}>
+                        <div className={f('track-component')}>
                           <header>
                             <button
                               onClick={() => this.handleConservationLoad(this)}
@@ -878,7 +850,6 @@ export class ProtVista extends Component /*:: <Props, State> */ {
                             className={f(
                               'track-component',
                               'conservation-placeholder-component',
-                              labelClass,
                             )}
                             ref={this._conservationTrackRef}
                           >
@@ -893,7 +864,7 @@ export class ProtVista extends Component /*:: <Props, State> */ {
                               </div>
                             ) : null}
                           </div>
-                          <div className={f('track-accession', labelClass)}>
+                          <div className={f('track-accession')}>
                             <button
                               type="button"
                               className={f(

diff --git a/src/components/ProtVista/style.css b/src/components/ProtVista/style.css
@@ -3,7 +3,7 @@
 @import '../../styles/timing.css';
 
 :root {
-  --track-space: 85%;
+  --track-space: 70vw;
 }
 .protvista {
   font-size: 12px;
@@ -134,9 +134,6 @@
   cursor: move;
 }
 
-.track-component.label-by-name {
-  width: 70%;
-}
 .track-length {
   width: var(--track-space, 85%);
   display: flex;
@@ -198,18 +195,13 @@ g:global(.child-group) path:global(.feature) {
 }
 
 .aligned-to-track-component {
-  width: var(-track-space, 85%);
+  width: var(--track-space, 85%);
   line-height: 0;
 }
 
-.aligned-to-track-component.label-by-name {
-  width: 70%;
-  line-height: inherit;
-}
-
 body .track-accession {
   font-family: var(--fonts-system);
-  width: 15%;
+  max-width: 15vw;
   overflow: auto;
   white-space: nowrap;
   padding-left: 0.5rem;
@@ -223,10 +215,6 @@ body .track-accession nav {
   justify-content: center;
   align-items: flex-end;
 }
-body .track-accession.label-by-name {
-  width: 30%;
-  text-transform: none;
-}
 body .track-accession > a,
 body .track-accession > a:focus,
 body .track-accession > a:visited {