new track panel config (#543)

src/ensembl/src/content/app/browser/browser-cog/BrowserCog.test.tsx

@@ -44,9 +44,9 @@ describe('<BrowserCog />', () => {
   });
 
   describe('behaviour', () => {
-    test('toggles cog on click', () => {
+    test('renders close button when track config is open', () => {
       const { container } = render(<BrowserCog {...defaultProps} />);
-      const cogButton = container.querySelector('button');
+      const cogButton = container.querySelector('.closeButton');
       userEvent.click(cogButton as HTMLButtonElement);
       expect(defaultProps.updateSelectedCog).toHaveBeenCalledTimes(1);
     });

src/ensembl/src/content/app/browser/browser-cog/BrowserCog.tsx

@@ -20,12 +20,11 @@ import { useTransition, animated } from 'react-spring';
 import analyticsTracking from 'src/services/analytics-service';
 import BrowserTrackConfig from '../browser-track-config/BrowserTrackConfig';
 
-import ImageButton from 'src/shared/components/image-button/ImageButton';
+import CloseButton from 'ensemblRoot/src/shared/components/close-button/CloseButton';
+import ImageButton from 'ensemblRoot/src/shared/components/image-button/ImageButton';
 
 import { ReactComponent as cogIcon } from 'static/img/shared/cog.svg';
 
-import { Status } from 'src/shared/types/status';
-
 export type BrowserCogProps = {
   cogActivated: boolean;
   trackId: string;
@@ -69,11 +68,6 @@ const BrowserCog = (props: BrowserCogProps) => {
     icon: cogIcon
   };
 
-  const getCogIconStatus = () => {
-    const { cogActivated } = props;
-    return cogActivated ? Status.SELECTED : Status.UNSELECTED;
-  };
-
   const [showTrackConfig, setTrackConfigAnimation] = useState(cogActivated);
   useEffect(() => {
     if (cogActivated) {
@@ -93,12 +87,15 @@ const BrowserCog = (props: BrowserCogProps) => {
   return (
     <>
       <div style={imgInline}>
-        <ImageButton
-          status={getCogIconStatus()}
-          description={cogIconConfig.description}
-          onClick={toggleCog}
-          image={cogIconConfig.icon}
-        />
+        {cogActivated ? (
+          <CloseButton onClick={toggleCog} />
+        ) : (
+          <ImageButton
+            description={cogIconConfig.description}
+            onClick={toggleCog}
+            image={cogIconConfig.icon}
+          />
+        )}
       </div>
       {transition((style, item) => {
         return (

src/ensembl/src/content/app/browser/browser-track-config/BrowserTrackConfig.scss

@@ -2,37 +2,33 @@
 
 .trackConfig {
   display: grid;
-  grid-template-columns: 146px 343px 1fr;
+  grid-template-columns: 140px 250px 1fr;
   background: #f1f2f4;
   box-shadow: 1px 1px 10px #6f8190;
   position: absolute;
-  left: -614px;
+  right: 25px;
   top: -12px;
-  height: 45px;
-  width: 614px;
 
   .section {
     display: flex;
-    align-items: center;
     margin: 8px 0px;
     padding: 0px 18px;
 
+    .subLabel {
+      line-height: 30px;
+      font-size: 12px;
+      font-weight: 300;
+      padding-right: 4px;
+    }
+    
     &:not(:last-child) {
       border-right: 1px solid $grey;
     }
-
-    &:first-child {
-      justify-content: center;
-    }
-
-    &:last-child {
-      justify-content: space-between;
-      padding-right: 34px;
-    }
   }
 
   .toggleWrapper {
     margin: 0 6px;
+    line-height: 30px;
 
     svg {
       margin: 0 10px;
@@ -46,31 +42,9 @@
   /* button styling */
 
   .slideToggle {
-    height: 12px;
+    height: 10px;
     margin-left: 2px;
     display: inline-block;
     vertical-align: middle;
   }
-
-  .trackHeightIcon {
-    margin-left: auto;
-    height: 12px;
-    width: 50px;
-  }
-
-  .trackHighlightIcon,
-  .trackConfigIcon,
-  .trackLockIcon {
-    height: 18px;
-    width: 18px;
-  }
-
-  .trackMoveIcon {
-    height: 28px;
-    width: 14px;
-  }
-}
-
-.checkboxHolder {
-  width: 100%;
 }

src/ensembl/src/content/app/browser/browser-track-config/BrowserTrackConfig.test.tsx

@@ -47,13 +47,16 @@ describe('<BrowserTrackConfig />', () => {
   };
 
   describe('behaviour', () => {
-    it('sets all tracks to be updated when the all tracks checkbox is selected', () => {
+    it('can update all tracks', () => {
       const { container } = render(<BrowserTrackConfig {...defaultProps} />);
-      const checkbox = container.querySelector(
-        'input[type="checkbox"]'
-      ) as HTMLInputElement;
+      const allTracksLabel = [...container.querySelectorAll('label')].find(
+        (el) => el.textContent === 'All tracks'
+      );
+      const allTracksInputElement = allTracksLabel?.querySelector(
+        'input'
+      ) as HTMLElement;
 
-      userEvent.click(checkbox);
+      userEvent.click(allTracksInputElement);
 
       expect(defaultProps.updateApplyToAll).toHaveBeenCalledTimes(1);
     });

src/ensembl/src/content/app/browser/browser-track-config/BrowserTrackConfig.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback } from 'react';
 import { connect } from 'react-redux';
 
 import {
@@ -33,17 +33,14 @@ import {
 
 import analyticsTracking from 'src/services/analytics-service';
 
-import useOutsideClick from 'src/shared/hooks/useOutsideClick';
-
 import SlideToggle from 'src/shared/components/slide-toggle/SlideToggle';
-import ImageButton from 'src/shared/components/image-button/ImageButton';
-import Checkbox from 'src/shared/components/checkbox/Checkbox';
-
-import { browserTrackConfig } from '../browserConfig';
+import RadioGroup, {
+  OptionValue,
+  RadioOptions
+} from 'ensemblRoot/src/shared/components/radio-group/RadioGroup';
 
 import { RootState } from 'src/store';
 import { CogList } from '../browserState';
-import { Status } from 'src/shared/types/status';
 
 import styles from './BrowserTrackConfig.scss';
 
@@ -73,9 +70,6 @@ export const BrowserTrackConfig = (props: BrowserTrackConfigProps) => {
   const shouldShowTrackLabels =
     selectedCog in trackConfigLabel ? trackConfigLabel[selectedCog] : true;
 
-  const ref = useRef(null);
-  useOutsideClick(ref, props.onClose);
-
   const toggleName = useCallback(() => {
     if (applyToAll) {
       Object.keys(browserCogTrackList).forEach((name) => {
@@ -120,72 +114,58 @@ export const BrowserTrackConfig = (props: BrowserTrackConfigProps) => {
     browserCogTrackList
   ]);
 
-  const applyToAllToggle = useCallback(() => {
-    props.updateApplyToAll(!applyToAll);
+  const handleRadioChange = useCallback(
+    (value: OptionValue) => {
+      props.updateApplyToAll(value === 'all_tracks');
 
-    analyticsTracking.trackEvent({
-      category: 'track_settings',
-      label: selectedCog,
-      action: 'apply_to_all - ' + (applyToAll ? 'unselected' : 'selected')
-    });
-  }, [applyToAll, updateApplyToAll]);
+      analyticsTracking.trackEvent({
+        category: 'track_settings',
+        label: selectedCog,
+        action: 'apply_to_all - ' + (applyToAll ? 'unselected' : 'selected')
+      });
+    },
+    [applyToAll, updateApplyToAll]
+  );
+
+  const radioOptions: RadioOptions = [
+    {
+      value: 'this_track',
+      label: 'This track'
+    },
+    {
+      value: 'all_tracks',
+      label: 'All tracks'
+    }
+  ];
 
   return (
-    <div className={styles.trackConfig} ref={ref}>
+    <div className={styles.trackConfig}>
       <div className={styles.section}>
-        <Checkbox
-          label="All tracks"
-          checked={applyToAll}
-          onChange={applyToAllToggle}
-          classNames={{ checkboxHolder: styles.checkboxHolder }}
+        <RadioGroup
+          options={radioOptions}
+          onChange={handleRadioChange}
+          selectedOption={applyToAll ? 'all_tracks' : 'this_track'}
         />
       </div>
       <div className={styles.section}>
-        <div className={styles.toggleWrapper}>
-          <label>Track name</label>
-          <SlideToggle
-            isOn={shouldShowTrackName}
-            onChange={toggleName}
-            className={styles.slideToggle}
-          />
-        </div>
-        <div className={styles.toggleWrapper}>
-          <label>Feature labels</label>
-          <SlideToggle
-            isOn={shouldShowTrackLabels}
-            onChange={toggleLabel}
-            className={styles.slideToggle}
-          />
-        </div>
-        <div className={styles.trackHeightIcon}>
-          <ImageButton
-            status={Status.DISABLED}
-            image={browserTrackConfig.trackHeightIcon.icon}
-            description={browserTrackConfig.trackHeightIcon.description}
-          />
-        </div>
-      </div>
-      <div className={styles.section}>
-        <div className={styles.trackLockIcon}>
-          <ImageButton
-            status={Status.DISABLED}
-            image={browserTrackConfig.trackLockIcon.icon}
-            description={browserTrackConfig.trackLockIcon.description}
-          />
-        </div>
-        <div className={styles.trackHighlightIcon}>
-          <ImageButton
-            status={Status.DISABLED}
-            image={browserTrackConfig.trackHighlightIcon.icon}
-            description={browserTrackConfig.trackHighlightIcon.description}
-          />
-        </div>
-        <div className={styles.trackMoveIcon}>
-          <ImageButton
-            status={Status.DISABLED}
-            image={browserTrackConfig.trackMoveIcon.icon}
-            description={browserTrackConfig.trackMoveIcon.description}
-          />
+        <div className={styles.subLabel}>Show</div>
+        <div>
+          <div className={styles.toggleWrapper}>
+            <label>Track name</label>
+            <SlideToggle
+              isOn={shouldShowTrackName}
+              onChange={toggleName}
+              className={styles.slideToggle}
+            />
+          </div>
+          <div className={styles.toggleWrapper}>
+            <label>Feature labels</label>
+            <SlideToggle
+              isOn={shouldShowTrackLabels}
+              onChange={toggleLabel}
+              className={styles.slideToggle}
+            />
+          </div>
         </div>
       </div>
     </div>