Merge pull request #3691 from Vizzuality/feature/recent-imagery-interactions-update

Feature/recent imagery interactions update

Author: edbrett

app/javascript/components/maps/components/menu/components/menu-panel/component.jsx

@@ -50,9 +50,11 @@ class MenuPanel extends PureComponent {
       category,
       large,
       onClose,
+      onOpen,
       children,
       loading,
-      setMenuSettings
+      setMenuSettings,
+      collapsed
     } = this.props;
     const Panel = isDesktop ? PanelDesktop : PanelMobile;
 
@@ -85,9 +87,12 @@ class MenuPanel extends PureComponent {
                 <Button
                   className="panel-close"
                   theme="theme-button-clear"
-                  onClick={onClose}
+                  onClick={collapsed ? onOpen : onClose}
                 >
-                  <Icon icon={arrowIcon} className="icon-close-panel" />
+                  <Icon
+                    icon={arrowIcon}
+                    className={cx('icon-close-panel', { collapsed })}
+                  />
                 </Button>
               </div>
             ) : (
@@ -114,7 +119,9 @@ MenuPanel.propTypes = {
   label: PropTypes.string,
   category: PropTypes.string,
   active: PropTypes.bool,
-  loading: PropTypes.bool
+  loading: PropTypes.bool,
+  collapsed: PropTypes.bool,
+  onOpen: PropTypes.func
 };
 
 export default MenuPanel;

app/javascript/components/maps/components/menu/components/menu-panel/styles.scss

@@ -81,6 +81,10 @@ $map-menu-panel-width-big: rem(560px);
       .button-wrapper {
         justify-content: flex-end;
       }
+
+      .collapsed {
+        transform: rotate(180deg);
+      }
     }
   }
 

app/javascript/components/maps/components/menu/menu-component.jsx

@@ -1,7 +1,5 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import MediaQuery from 'react-responsive';
-import { SCREEN_M } from 'utils/constants';
 import cx from 'classnames';
 import isEqual from 'lodash/isEqual';
 import remove from 'lodash/remove';
@@ -47,10 +45,9 @@ class MapMenu extends PureComponent {
     const {
       showAnalysis,
       setMenuSettings,
-      setRecentImagerySettings,
       location,
-      recentVisible,
       menuSection,
+      recentActive,
       isDesktop
     } = this.props;
     if (
@@ -63,19 +60,14 @@ class MapMenu extends PureComponent {
       showAnalysis();
     }
 
-    if (!isDesktop && recentVisible) {
-      setMenuSettings({ menuSection: 'recent-imagery' });
+    if (!isDesktop && !menuSection && recentActive) {
+      setMenuSettings({ menuSection: 'recent-imagery-collapsed' });
     }
 
     if (
-      !isDesktop &&
-      !menuSection &&
-      !isEqual(menuSection, prevProps.menuSection)
+      !isEqual(isDesktop, prevProps.isDesktop) ||
+      (!recentActive && !isEqual(recentActive, prevProps.recentActive))
     ) {
-      setRecentImagerySettings({ visible: false });
-    }
-
-    if (!isEqual(isDesktop, prevProps.isDesktop)) {
       setMenuSettings({ menuSection: '' });
     }
   }
@@ -92,63 +84,69 @@ class MapMenu extends PureComponent {
       loading,
       analysisLoading,
       embed,
+      isDesktop,
       ...props
     } = this.props;
-    const { Component, label, category, large, icon, ...rest } =
+    const {
+      Component,
+      label,
+      category,
+      large,
+      icon,
+      collapsed,
+      openSection,
+      ...rest
+    } =
       activeSection || {};
 
     return (
-      <MediaQuery minWidth={SCREEN_M}>
-        {isDesktop => (
-          <div className={cx('c-map-menu', className)}>
-            <div
-              className={cx('menu-tiles', 'map-tour-data-layers', { embed })}
-            >
-              {isDesktop &&
-                !embed && (
-                  <MenuDesktop
-                    className="menu-desktop"
-                    datasetSections={datasetSections}
-                    searchSections={searchSections}
-                    setMenuSettings={setMenuSettings}
-                  />
-                )}
-              {!isDesktop && (
-                <MenuMobile
-                  sections={mobileSections}
-                  setMenuSettings={setMenuSettings}
-                />
-              )}
-            </div>
-            <MenuPanel
-              className="menu-panel"
-              label={label}
-              category={category}
-              active={!!menuSection}
-              large={large}
+      <div className={cx('c-map-menu', className)}>
+        <div className={cx('menu-tiles', 'map-tour-data-layers', { embed })}>
+          {isDesktop &&
+            !embed && (
+              <MenuDesktop
+                className="menu-desktop"
+                datasetSections={datasetSections}
+                searchSections={searchSections}
+                setMenuSettings={setMenuSettings}
+              />
+            )}
+          {!isDesktop && (
+            <MenuMobile
+              sections={mobileSections}
+              setMenuSettings={setMenuSettings}
+            />
+          )}
+        </div>
+        <MenuPanel
+          className="menu-panel"
+          label={label}
+          category={category}
+          active={!!menuSection}
+          large={large}
+          isDesktop={isDesktop}
+          setMenuSettings={setMenuSettings}
+          loading={loading}
+          collapsed={collapsed}
+          onClose={() =>
+            setMenuSettings({ menuSection: '', datasetCategory: '' })
+          }
+          onOpen={() => setMenuSettings({ menuSection: openSection })}
+        >
+          {Component && (
+            <Component
+              menuSection={menuSection}
               isDesktop={isDesktop}
               setMenuSettings={setMenuSettings}
-              loading={loading}
-              onClose={() =>
-                setMenuSettings({ menuSection: '', datasetCategory: '' })
-              }
-            >
-              {Component && (
-                <Component
-                  menuSection={menuSection}
-                  isDesktop={isDesktop}
-                  setMenuSettings={setMenuSettings}
-                  onToggleLayer={this.onToggleLayer}
-                  {...props}
-                  {...menuSection === 'datasets' && {
-                    ...rest
-                  }}
-                />
-              )}
-            </MenuPanel>
-          </div>
-        )}
-      </MediaQuery>
+              onToggleLayer={this.onToggleLayer}
+              {...props}
+              {...menuSection === 'datasets' && {
+                ...rest
+              }}
+            />
+          )}
+        </MenuPanel>
+      </div>
     );
   }
 }
@@ -177,10 +175,9 @@ MapMenu.propTypes = {
   datasetCategory: PropTypes.string,
   showAnalysis: PropTypes.func,
   location: PropTypes.object,
-  setRecentImagerySettings: PropTypes.func,
-  recentVisible: PropTypes.bool,
   isDesktop: PropTypes.bool,
-  embed: PropTypes.bool
+  embed: PropTypes.bool,
+  recentActive: PropTypes.bool
 };
 
 export default MapMenu;

app/javascript/components/maps/components/menu/menu-sections.js

@@ -51,11 +51,17 @@ export const mobileSections = [
     Component: Search
   },
   {
-    label: 'Recent Imagery',
+    label: 'Recent Satellite Imagery',
     slug: 'recent-imagery',
-    icon: searchIcon,
     Component: RecentImagerySettings,
     hidden: true
+  },
+  {
+    label: 'Recent Satellite Imagery',
+    slug: 'recent-imagery-collapsed',
+    openSection: 'recent-imagery',
+    collapsed: true,
+    hidden: true
   }
 ];
 

app/javascript/components/maps/components/menu/menu-selectors.js

@@ -5,8 +5,8 @@ import flatten from 'lodash/flatten';
 
 import { getActiveDatasetsFromState } from 'components/maps/map/selectors';
 import { getEmbed } from 'components/maps/main-map/selectors';
+import { getActive } from 'components/maps/main-map/components/recent-imagery/recent-imagery-selectors';
 
-import { getVisibility } from 'components/maps/main-map/components/recent-imagery/recent-imagery-selectors';
 import { initialState } from './menu-reducers';
 import {
   datasetsSections,
@@ -270,5 +270,5 @@ export const getMenuProps = createStructuredSelector({
   location: getLocation,
   loading: getLoading,
   analysisLoading: getAnalysisLoading,
-  recentVisible: getVisibility
+  recentActive: getActive
 });

app/javascript/components/maps/components/menu/menu.js

@@ -1,7 +1,6 @@
 import { connect } from 'react-redux';
 import reducerRegistry from 'app/registry';
 
-import { setRecentImagerySettings } from 'components/maps/main-map/components/recent-imagery/recent-imagery-actions';
 import { setMapSettings } from 'components/maps/map/actions';
 import * as actions from './menu-actions';
 import reducers, { initialState } from './menu-reducers';
@@ -16,6 +15,5 @@ reducerRegistry.registerModule('mapMenu', {
 
 export default connect(getMenuProps, {
   ...actions,
-  setRecentImagerySettings,
   setMapSettings
 })(MenuComponent);

app/javascript/components/maps/main-map/component.jsx

@@ -2,10 +2,7 @@ import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { SCREEN_M } from 'utils/constants';
 import cx from 'classnames';
-import startCase from 'lodash/startCase';
-import upperFirst from 'lodash/upperFirst';
 import MediaQuery from 'react-responsive';
-import { track } from 'app/analytics';
 import { Tooltip } from 'react-tippy';
 
 import Tip from 'components/ui/tip';
@@ -20,18 +17,6 @@ import MapControlButtons from './components/map-controls';
 import './styles.scss';
 
 class MainMapComponent extends PureComponent {
-  renderDataTooltip = data => (
-    <div>
-      {Object.keys(data).map(key => (
-        <p key={key}>
-          <strong>{upperFirst(startCase(key).toLowerCase())}</strong>:{' '}
-          {data[key]}
-        </p>
-      ))}
-      <p className="view-more">Click to view more.</p>
-    </div>
-  );
-
   renderInfoTooltip = string => (
     <div>
       <p className="tooltip-info">{string}</p>
@@ -40,16 +25,12 @@ class MainMapComponent extends PureComponent {
 
   render() {
     const {
-      draw,
       embed,
       hidePanels,
       oneClickAnalysis,
-      tileGeoJSON,
       showTooltip,
       tooltipData,
-      setRecentImagerySettings,
       handleClickMap,
-      handleRecentImageryTooltip,
       handleShowTooltip
     } = this.props;
 
@@ -74,11 +55,7 @@ class MainMapComponent extends PureComponent {
                 html={
                   <Tip
                     className="map-hover-tooltip"
-                    text={
-                      typeof tooltipData === 'string'
-                        ? this.renderInfoTooltip(tooltipData)
-                        : this.renderDataTooltip(tooltipData)
-                    }
+                    text={this.renderInfoTooltip(tooltipData)}
                   />
                 }
                 position="top"
@@ -88,45 +65,7 @@ class MainMapComponent extends PureComponent {
                 open={showTooltip}
                 disabled={!isDesktop}
               >
-                <Map
-                  className="main-map"
-                  customLayers={
-                    tileGeoJSON
-                      ? [
-                        {
-                          id: 'recentImagery',
-                          name: 'Geojson',
-                          provider: 'leaflet',
-                          layerConfig: {
-                            type: 'geoJSON',
-                            body: tileGeoJSON,
-                            options: {
-                              style: {
-                                stroke: false,
-                                fillOpacity: 0
-                              }
-                            }
-                          },
-                          interactivity: true,
-                          events: {
-                            click: () => {
-                              if (!draw) {
-                                setRecentImagerySettings({ visible: true });
-                                track('recentImageryOpen');
-                              }
-                            },
-                            mouseover: e => {
-                              if (!draw) handleRecentImageryTooltip(e);
-                            },
-                            mouseout: () => {
-                              if (!draw) handleShowTooltip(false, {});
-                            }
-                          }
-                        }
-                      ]
-                      : null
-                  }
-                />
+                <Map className="main-map" />
               </Tooltip>
             </div>
             {isDesktop &&
@@ -164,10 +103,6 @@ MainMapComponent.propTypes = {
   oneClickAnalysis: PropTypes.bool,
   embed: PropTypes.bool,
   hidePanels: PropTypes.bool,
-  setRecentImagerySettings: PropTypes.func,
-  handleRecentImageryTooltip: PropTypes.func,
-  tileGeoJSON: PropTypes.object,
-  draw: PropTypes.bool,
   tooltipData: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   showTooltip: PropTypes.bool
 };