Unverified Commit deb0b3dc authored by Jyothish's avatar Jyothish Committed by GitHub
Browse files

new track panel config (#543)

parent 050d4f3f
Pipeline #182426 passed with stages
in 6 minutes and 17 seconds
......@@ -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);
});
......
......@@ -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 (
......
......@@ -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%;
}
......@@ -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);
});
......
......@@ -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>
......
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