Merge pull request #191 from resource-watch/feature/explore-embed-fix

Explore embed fix
resource-watch · Jan 19, 2018 · c379a3d · c379a3d
2 parents c8a314e + 9efbaa4
commit c379a3d
Show file tree

Hide file tree

Showing 17 changed files with 163 additions and 81 deletions.
diff --git a/app/scripts/components/legend/legend-actions/legend-actions-component.jsx b/app/scripts/components/legend/legend-actions/legend-actions-component.jsx
@@ -7,7 +7,7 @@ import Icon from 'components/ui/Icon';
 
 import './legend-actions-style.scss';
 
-export const LegendActions = ({ layerSpec, onOpacity, onVisibility, onInfo, onClose }) => (
+export const LegendActions = ({ layerSpec, onOpacity, onVisibility, onMultiLayer, onInfo, onClose }) => (
   <div className="c-legend-actions">
     <LegendOpacitySelector
       layerSpec={layerSpec}
@@ -17,6 +17,7 @@ export const LegendActions = ({ layerSpec, onOpacity, onVisibility, onInfo, onCl
     {layerSpec.provider !== 'nexgddp' && layerSpec.layers.length > 1 &&
       <LegendMultiLayerSelector
         layerSpec={layerSpec}
+        onMultiLayer={onMultiLayer}
       />
     }
 
@@ -52,14 +53,16 @@ LegendActions.propTypes = {
   onOpacity: PropTypes.func,
   onVisibility: PropTypes.func,
   onInfo: PropTypes.func,
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  onMultiLayer: PropTypes.func
 };
 
 LegendActions.defaultProps = {
   onOpacity: () => {},
   onVisibility: () => {},
   onInfo: () => {},
-  onClose: () => {}
+  onClose: () => {},
+  onMultiLayer: () => {}
 };
 
 export default LegendActions;
diff --git a/app/scripts/components/legend/legend-component.jsx b/app/scripts/components/legend/legend-component.jsx
@@ -10,13 +10,20 @@ import './legend-style.scss';
 
 class Legend extends PureComponent {
   getLegendToolbar() {
-    const { layerSpec } = this.props;
-    if (layerSpec.provider === 'nexgddp') return (<LegendNexGDDPToolbar layerSpec={layerSpec} />);
+    const { layerSpec, onMultiLayer } = this.props;
+    if (layerSpec.provider === 'nexgddp') {
+      return (
+        <LegendNexGDDPToolbar
+          layerSpec={layerSpec}
+          onMultiLayer={onMultiLayer}
+        />
+      );
+    }
     return null;
   }
 
   render() {
-    const { layerSpec, onOpacity, onVisibility, onClose, onInfo } = this.props;
+    const { layerSpec, onOpacity, onVisibility, onClose, onMultiLayer, onInfo } = this.props;
     const { name, legendConfig } = layerSpec;
     const { type, unit } = legendConfig;
 
@@ -31,6 +38,7 @@ class Legend extends PureComponent {
               onVisibility={onVisibility}
               onInfo={onInfo}
               onClose={onClose}
+              onMultiLayer={onMultiLayer}
             />}
         </div>
         {this.props.toolbar && this.getLegendToolbar()}
@@ -51,7 +59,8 @@ Legend.propTypes = {
   onOpacity: PropTypes.func,
   onVisibility: PropTypes.func,
   onInfo: PropTypes.func,
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  onMultiLayer: PropTypes.func
 };
 
 Legend.defaultProps = {
@@ -60,7 +69,8 @@ Legend.defaultProps = {
   updateOpacity: () => {},
   onVisibility: () => {},
   onInfo: () => {},
-  onClose: () => {}
+  onClose: () => {},
+  onMultiLayer: () => {}
 };
 
 export default Legend;
diff --git a/app/scripts/components/legend/legend-control/LegendControl.jsx b/app/scripts/components/legend/legend-control/LegendControl.jsx
@@ -27,7 +27,7 @@ export class LegendControl extends React.PureComponent {
   }
 
   render() {
-    const { layersSpec, datasetsSpec, position, sortable, onOpacity, onVisibility, onClose, onInfo } = this.props;
+    const { layersSpec, datasetsSpec, position, sortable, onOpacity, onVisibility, onClose, onInfo, onMultiLayer } = this.props;
     const { collapsed } = this.state;
 
     return (
@@ -58,6 +58,7 @@ export class LegendControl extends React.PureComponent {
               onVisibility={onVisibility}
               onInfo={onInfo}
               onClose={onClose}
+              onMultiLayer={onMultiLayer}
             /> }
 
           { (datasetsSpec && datasetsSpec.length > 0) &&
@@ -78,7 +79,8 @@ LegendControl.propTypes = {
   onOpacity: PropTypes.func,
   onVisibility: PropTypes.func,
   onInfo: PropTypes.func,
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  onMultiLayer: PropTypes.func
 };
 
 LegendControl.defaultProps = {
@@ -91,7 +93,8 @@ LegendControl.defaultProps = {
   onOpacity: () => {},
   onVisibility: () => {},
   onInfo: () => {},
-  onClose: () => {}
+  onClose: () => {},
+  onMultiLayer: () => {}
 };
 
 export default LegendControl;
diff --git a/app/scripts/components/legend/legend-control/legend-list-item/LegendListItem.jsx b/app/scripts/components/legend/legend-control/legend-list-item/LegendListItem.jsx
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import Legend from '../../legend-component';
 import './legend-list-item.scss';
 
-const LegendListItem = ({ value, onOpacity, onVisibility, onClose, onInfo }) => (
+const LegendListItem = ({ value, onOpacity, onVisibility, onClose, onInfo, onMultiLayer }) => (
   <li className="c-legend-list-item">
-    <Legend layerSpec={value} onOpacity={onOpacity} onVisibility={onVisibility} onInfo={onInfo} onClose={onClose} />
+    <Legend layerSpec={value} onOpacity={onOpacity} onVisibility={onVisibility} onInfo={onInfo} onClose={onClose} onMultiLayer={onMultiLayer} />
   </li>
 );
 
@@ -14,14 +14,16 @@ LegendListItem.propTypes = {
   onOpacity: PropTypes.func,
   onVisibility: PropTypes.func,
   onInfo: PropTypes.func,
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  onMultiLayer: PropTypes.func
 };
 
 LegendListItem.defaultProps = {
   onOpacity: () => {},
   onVisibility: () => {},
   onInfo: () => {},
-  onClose: () => {}
+  onClose: () => {},
+  onMultiLayer: () => {}
 };
 
 export default LegendListItem;
diff --git a/app/scripts/components/legend/legend-control/legend-list/LegendList.jsx b/app/scripts/components/legend/legend-control/legend-list/LegendList.jsx
@@ -19,7 +19,7 @@ const SortableItem = SortableElement(props => (
   </div>
 ));
 
-const SortableLegendList = SortableContainer(({ items, onOpacity, onVisibility, onClose, onInfo }) => (
+const SortableLegendList = SortableContainer(({ items, onOpacity, onVisibility, onClose, onInfo, onMultiLayer }) => (
   <ul>
     {items.map((value, index) => (
       <SortableItem
@@ -30,6 +30,7 @@ const SortableLegendList = SortableContainer(({ items, onOpacity, onVisibility,
         onVisibility={onVisibility}
         onInfo={onInfo}
         onClose={onClose}
+        onMultiLayer={onMultiLayer}
       />
     ))}
   </ul>
@@ -55,7 +56,7 @@ class LegendList extends React.PureComponent {
   }
 
   render() {
-    const { sortable, onOpacity, onVisibility, onClose, onInfo } = this.props;
+    const { sortable, onOpacity, onVisibility, onClose, onInfo, onMultiLayer } = this.props;
     const { items } = this.state;
 
     if (sortable) {
@@ -73,6 +74,7 @@ class LegendList extends React.PureComponent {
             onVisibility={onVisibility}
             onInfo={onInfo}
             onClose={onClose}
+            onMultiLayer={onMultiLayer}
           />
         </div>
       );
@@ -97,15 +99,17 @@ LegendList.propTypes = {
   onOpacity: PropTypes.func,
   onVisibility: PropTypes.func,
   onInfo: PropTypes.func,
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  onMultiLayer: PropTypes.func
 };
 
 LegendList.defaultProps = {
   onOpacity: () => {},
   onVisibility: () => {},
   onSortChange: () => {},
   onInfo: () => {},
-  onClose: () => {}
+  onClose: () => {},
+  onMultiLayer: () => {}
 };
 
 export default LegendList;
diff --git a/app/scripts/components/legend/legend-multi-layer-selector/index.js b/app/scripts/components/legend/legend-multi-layer-selector/index.js
@@ -1,8 +1,3 @@
-import { connect } from 'react-redux';
-import * as exploreActions from 'pages/explore/explore-actions';
-
 import Component from './legend-multi-layer-selector-component';
 
-const mapStateToProps = null;
-
-export default connect(mapStateToProps, exploreActions)(Component);
+export default Component;
diff --git a/...s/components/legend/legend-multi-layer-selector/legend-multi-layer-selector-component.jsx b/...s/components/legend/legend-multi-layer-selector/legend-multi-layer-selector-component.jsx
@@ -29,7 +29,7 @@ class LegendMultiLayerSelector extends Component {
   }
 
   onChangeLayer(layer) {
-    this.props.setMultiActiveLayer({
+    this.props.onMultiLayer({
       layerId: layer.id,
       id: layer.dataset
     });
@@ -92,7 +92,7 @@ class LegendMultiLayerSelector extends Component {
 
 LegendMultiLayerSelector.propTypes = {
   layerSpec: PropTypes.object,
-  setMultiActiveLayer: PropTypes.func
+  onMultiLayer: PropTypes.func
 };
 
 export default LegendMultiLayerSelector;
diff --git a/app/scripts/components/legend/legend-nexgddp-toolbar/index.js b/app/scripts/components/legend/legend-nexgddp-toolbar/index.js
@@ -1,8 +1,3 @@
-import { connect } from 'react-redux';
-import * as exploreActions from 'pages/explore/explore-actions';
-
 import Component from './legend-nexgddp-toolbar-component';
 
-const mapStateToProps = null;
-
-export default connect(mapStateToProps, exploreActions)(Component);
+export default Component;
diff --git a/app/scripts/components/legend/legend-nexgddp-toolbar/legend-nexgddp-toolbar-component.jsx b/app/scripts/components/legend/legend-nexgddp-toolbar/legend-nexgddp-toolbar-component.jsx
@@ -41,19 +41,19 @@ class LegendNexGDDPToolbar extends PureComponent {
   onResolutionChange(temporalResolution) {
     this.setState({ temporalResolution }, () => {
       this.updatingPeriods();
-      this.props.setMultiActiveLayer({ ...this.state, id: this.props.layerSpec.dataset });
+      this.props.onMultiLayer({ ...this.state, id: this.props.layerSpec.dataset });
     });
   }
 
   onPeriodChange(period) {
     this.setState({ period }, () => {
-      this.props.setMultiActiveLayer({ ...this.state, id: this.props.layerSpec.dataset });
+      this.props.onMultiLayer({ ...this.state, id: this.props.layerSpec.dataset });
     });
   }
 
   onScenarioChange(scenario) {
     this.setState({ scenario }, () => {
-      this.props.setMultiActiveLayer({ ...this.state, id: this.props.layerSpec.dataset });
+      this.props.onMultiLayer({ ...this.state, id: this.props.layerSpec.dataset });
     });
   }
 
@@ -137,7 +137,7 @@ class LegendNexGDDPToolbar extends PureComponent {
 
 LegendNexGDDPToolbar.propTypes = {
   layerSpec: PropTypes.object,
-  setMultiActiveLayer: PropTypes.func
+  onMultiLayer: PropTypes.func
 };
 
 export default LegendNexGDDPToolbar;
diff --git a/app/scripts/pages/explore-embed/explore-dataset-filters/explore-dataset-filters-selectors.js b/app/scripts/pages/explore-embed/explore-dataset-filters/explore-dataset-filters-selectors.js
@@ -2,23 +2,24 @@ import { createSelector } from 'reselect';
 
 import selectElementsFromTree from 'helpers/dropdown-tree';
 
-const data = state => state.explorePage.datasetFilters.data;
-const filters = state => state.explorePage.datasetFilters.filters;
+const data = state => state.exploreEmbedPage.datasetFilters.data;
+const filters = state => state.exploreEmbedPage.datasetFilters.filters;
+const originalData = state => state.exploreEmbedPage.datasetFilters.originalData;
 
-const getFilterStatus = (_data, _filters) => {
+const getFilterStatus = (_data, _filters, _originalData) => {
   if (!Object.keys(_data).length) return {};
-  if (!Object.keys(_filters).length) return _data;
+  if (!Object.keys(_filters).length) return { ..._originalData };
 
-  const data = _data;
+  const newData = _data;
 
   Object.keys(_filters).map((filterKey) => {
     const filterValues = _filters[filterKey];
-    const dataTree = _data[filterKey] || [];
+    const dataTree = newData[filterKey] || [];
 
     dataTree.forEach(child => selectElementsFromTree(child, filterValues));
   });
 
-  return data;
+  return newData;
 };
 
-export default createSelector(data, filters, getFilterStatus);
+export default createSelector(data, filters, originalData, getFilterStatus);
diff --git a/app/scripts/pages/explore-embed/explore-dataset-filters/explore-dataset-filters.js b/app/scripts/pages/explore-embed/explore-dataset-filters/explore-dataset-filters.js
@@ -2,19 +2,18 @@ import { Component, createElement } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import * as exploreActions from 'pages/explore/explore-actions';
+import * as exploreActions from 'pages/explore-embed/explore-embed-actions';
 import reducers, { initialState } from 'pages/explore/explore-dataset-filters/explore-dataset-filters-reducer';
 
 import ExploreDatasetFiltersComponent from 'pages/explore/explore-dataset-filters/explore-dataset-filters-component';
-import getFilterStatus from './explore-dataset-filters-selectors';
 
 const mapStateToProps = state => ({
-  data: getFilterStatus(state)
+  data: state.explorePage.datasetFilters.data
 });
 
 class ExploreDatasetFiltersContainer extends Component {
   componentWillMount() {
-    this.props.getFiltersData();
+    if (!Object.keys(this.props.data).length) this.props.getFiltersData();
   }
 
   render() {
@@ -25,7 +24,8 @@ class ExploreDatasetFiltersContainer extends Component {
 }
 
 ExploreDatasetFiltersContainer.propTypes = {
-  getFiltersData: PropTypes.func
+  getFiltersData: PropTypes.func,
+  data: PropTypes.object
 };
 
 export { exploreActions, reducers, initialState };