sync all timestamp filters

package.json

@@ -32,7 +32,7 @@
     "start": "cd examples/demo-app && (path-exists node_modules || npm i) && npm run start-local",
     "start:custom-layer": "(cd examples/custom-layer && (path-exists node_modules || npm i) && npm run start-local)",
     "start:open-modal": "(cd examples/open-modal && (path-exists node_modules || npm i) && npm run start-local)",
-    "build": "rm -fr dist && uber-licence && babel src --out-dir dist --plugins=transform-es2015-modules-commonjs --source-maps inline",
+    "build": "uber-licence && babel src --out-dir dist --plugins=transform-es2015-modules-commonjs --source-maps inline",
     "lint": "eslint src examples/**/src website/src",
     "check-licence": "uber-licence --dry",
     "add-licence": "uber-licence",

src/components/bottom-widget.js

@@ -69,6 +69,7 @@ export default function BottomWidgetFactory(TimeWidget) {
           width={Math.min(MaxWidth, enlargedFilterWidth)}
           isAnyFilterAnimating={isAnyFilterAnimating}
           enlargedIdx={enlargedFilterIdx}
+          filters={filters}
           filter={filters[enlargedFilterIdx]}
         />
       );

src/components/common/time-range-slider.js

@@ -65,7 +65,7 @@ export default class TimeRangeSlider extends Component {
       width: 288
     };
     this._animation = null;
-    this._sliderThrottle = throttle(this.props.onChange, 20);
+    this._sliderThrottle = throttle((value) => this.props.onChange(value), 20);
   }
 
   componentDidUpdate() {

src/components/filters/time-widget.js

@@ -27,6 +27,7 @@ import {SelectTextBold, IconRoundSmall, CenterFlexbox} from 'components/common/s
 import TimeRangeFilter from 'components/filters/time-range-filter';
 import {Close, Clock, LineChart} from 'components/common/icons';
 import {TIME_ANIMATION_SPEED} from 'utils/filter-utils';
+import ItemSelector from 'components/common/item-selector/item-selector';
 const innerPdSide = 32;
 
 const WidgetContainer = styled.div`
@@ -118,6 +119,7 @@ export class TimeWidget extends Component {
     const {
       enlargedIdx,
       enlargeFilter,
+      filters,
       filter,
       isAnyFilterAnimating,
       setFilter,
@@ -135,7 +137,16 @@ export class TimeWidget extends Component {
               <CenterFlexbox className="bottom-widget__icon">
                 <Clock height="15px"/>
               </CenterFlexbox>
-              <SelectTextBold>{filter.name}</SelectTextBold>
+              <ItemSelector
+                selectedItems={[filter.name]}
+                options={filters.map(filter=>filter.name)}
+                multiSelect={false}
+                searchable={false}
+                onChange={(name)=>{
+                  if (name !== filter.name)
+                    enlargeFilter(filters.findIndex(f=>f.name === name));
+                }}
+              />
             </StyledTitle>
             <StyledTitle className="bottom-widget__y-axis">
               <CenterFlexbox className="bottom-widget__icon">
@@ -164,7 +175,12 @@ export class TimeWidget extends Component {
           </TopSectionWrapper>
           <TimeRangeFilter
             filter={filter}
-            setFilter={value => setFilter(enlargedIdx, 'value', value)}
+            setFilter={value => { 
+              for (let i = 0; i < filters.length; ++i){
+                if (filters[i].fieldType === 'timestamp') {
+                  setFilter(i, 'value', value);
+                }
+              } } }
             isAnyFilterAnimating={isAnyFilterAnimating}
             updateAnimationSpeed={(speed) => updateAnimationSpeed(enlargedIdx, speed)}
             toggleAnimation={() => toggleAnimation(enlargedIdx)}

src/reducers/vis-state-updaters.js

@@ -305,6 +305,11 @@ export function setFilterUpdater(state, action) {
         freeze: true,
         fieldIdx
       };
+      const enlargedFilterIdx = state.filters.findIndex(f => f.enlarged);
+      if (enlargedFilterIdx > -1 && enlargedFilterIdx !== idx) {
+        // there should be only one enlarged filter
+        newFilter.enlarged = false;
+      }
 
       newState = {
         ...state,