BrowserTrackConfig.tsx 5.28 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/**
 * 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.
 */

Jyothish's avatar
Jyothish committed
17
import React, { useCallback } from 'react';
18 19
import { connect } from 'react-redux';

20 21
import {
  updateTrackConfigNames,
Dan Sheppard's avatar
Dan Sheppard committed
22 23
  updateTrackConfigLabel,
  updateApplyToAll
24 25
} from '../browserActions';

Dan Sheppard's avatar
Dan Sheppard committed
26 27 28 29
import {
  getTrackConfigNames,
  getTrackConfigLabel,
  getApplyToAll,
30 31
  getBrowserCogTrackList,
  getBrowserSelectedCog
Dan Sheppard's avatar
Dan Sheppard committed
32
} from '../browserSelectors';
33

34
import analyticsTracking from 'src/services/analytics-service';
35

36
import SlideToggle from 'src/shared/components/slide-toggle/SlideToggle';
Jyothish's avatar
Jyothish committed
37 38 39 40
import RadioGroup, {
  OptionValue,
  RadioOptions
} from 'ensemblRoot/src/shared/components/radio-group/RadioGroup';
41

Andrey Azov's avatar
Andrey Azov committed
42
import { RootState } from 'src/store';
43
import { CogList } from '../browserState';
44 45

import styles from './BrowserTrackConfig.scss';
46

47
export type BrowserTrackConfigProps = {
48 49
  applyToAll: boolean;
  browserCogTrackList: CogList;
50 51 52
  selectedCog: string | null;
  trackConfigLabel: { [key: string]: boolean };
  trackConfigNames: { [key: string]: boolean };
53
  updateApplyToAll: (yn: boolean) => void;
Andrey Azov's avatar
Andrey Azov committed
54 55
  updateTrackConfigLabel: (selectedCog: string, sense: boolean) => void;
  updateTrackConfigNames: (selectedCog: string, sense: boolean) => void;
56 57 58
  onClose: () => void;
};

59
export const BrowserTrackConfig = (props: BrowserTrackConfigProps) => {
60 61 62
  const {
    applyToAll,
    browserCogTrackList,
63
    trackConfigNames,
64
    trackConfigLabel
65 66
  } = props;

67 68 69
  const selectedCog = props.selectedCog || '';

  const shouldShowTrackName = trackConfigNames[selectedCog] || false;
70 71
  const shouldShowTrackLabels =
    selectedCog in trackConfigLabel ? trackConfigLabel[selectedCog] : true;
72

73
  const toggleName = useCallback(() => {
Dan Sheppard's avatar
Dan Sheppard committed
74
    if (applyToAll) {
75 76
      Object.keys(browserCogTrackList).forEach((name) => {
        props.updateTrackConfigNames(name, !shouldShowTrackName);
Dan Sheppard's avatar
Dan Sheppard committed
77 78
      });
    } else {
79
      props.updateTrackConfigNames(selectedCog, !shouldShowTrackName);
Dan Sheppard's avatar
Dan Sheppard committed
80
    }
81 82 83 84 85 86

    analyticsTracking.trackEvent({
      category: 'track_settings',
      label: selectedCog,
      action: 'track_name_' + (shouldShowTrackName ? 'off' : 'on')
    });
Dan Sheppard's avatar
Dan Sheppard committed
87 88
  }, [
    selectedCog,
89
    props.updateTrackConfigNames,
90
    shouldShowTrackName,
Dan Sheppard's avatar
Dan Sheppard committed
91 92 93
    applyToAll,
    browserCogTrackList
  ]);
94 95

  const toggleLabel = useCallback(() => {
Dan Sheppard's avatar
Dan Sheppard committed
96
    if (applyToAll) {
97 98
      Object.keys(browserCogTrackList).forEach((name) => {
        props.updateTrackConfigLabel(name, !shouldShowTrackLabels);
Dan Sheppard's avatar
Dan Sheppard committed
99 100
      });
    } else {
101
      props.updateTrackConfigLabel(selectedCog, !shouldShowTrackLabels);
Dan Sheppard's avatar
Dan Sheppard committed
102
    }
103 104 105 106 107 108

    analyticsTracking.trackEvent({
      category: 'track_settings',
      label: selectedCog,
      action: 'feature_label_' + (shouldShowTrackLabels ? 'off' : 'on')
    });
Dan Sheppard's avatar
Dan Sheppard committed
109 110 111
  }, [
    selectedCog,
    updateTrackConfigLabel,
112
    shouldShowTrackLabels,
Dan Sheppard's avatar
Dan Sheppard committed
113 114 115 116
    applyToAll,
    browserCogTrackList
  ]);

Jyothish's avatar
Jyothish committed
117 118 119
  const handleRadioChange = useCallback(
    (value: OptionValue) => {
      props.updateApplyToAll(value === 'all_tracks');
120

Jyothish's avatar
Jyothish committed
121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139
      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'
    }
  ];
140

141
  return (
Jyothish's avatar
Jyothish committed
142
    <div className={styles.trackConfig}>
143
      <div className={styles.section}>
Jyothish's avatar
Jyothish committed
144 145 146 147
        <RadioGroup
          options={radioOptions}
          onChange={handleRadioChange}
          selectedOption={applyToAll ? 'all_tracks' : 'this_track'}
148 149 150
        />
      </div>
      <div className={styles.section}>
Jyothish's avatar
Jyothish committed
151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168
        <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>
169 170 171
        </div>
      </div>
    </div>
172
  );
173 174
};

175
const mapStateToProps = (state: RootState) => ({
Dan Sheppard's avatar
Dan Sheppard committed
176
  applyToAll: getApplyToAll(state),
177 178 179 180
  browserCogTrackList: getBrowserCogTrackList(state),
  selectedCog: getBrowserSelectedCog(state),
  trackConfigLabel: getTrackConfigLabel(state),
  trackConfigNames: getTrackConfigNames(state)
181
});
182

183
const mapDispatchToProps = {
184 185 186 187 188
  updateApplyToAll,
  updateTrackConfigLabel,
  updateTrackConfigNames
};

189
export default connect(mapStateToProps, mapDispatchToProps)(BrowserTrackConfig);