WV-3579 - Prevent pan/zoom when in Charting Mode (#6070)

christof-wittreich · web-flow · commit 98c5f2952cde · 2025-08-20T09:12:54.000-04:00
* Charting mode lock-down

* Projection button conditional disabling
diff --git a/web/js/components/map/zoom.js b/web/js/components/map/zoom.js
@@ -6,15 +6,15 @@ import { mapUtilZoomAction } from '../../map/util';
 import HoverTooltip from '../util/hover-tooltip';
 
 function Zoom({
-  map, zoomLevel, numZoomLevels, isDistractionFreeModeActive, isMobile,
+  map, zoomLevel, numZoomLevels, isDistractionFreeModeActive, isMobile, isChartingActive,
 }) {
   const zoomInDisabled = zoomLevel === numZoomLevels;
   const zoomOutDisabled = zoomLevel === 0;
   if (!map) return null;
 
   const zoomButtonClass = isMobile ? 'wv-zoom-buttons-mobile' : 'wv-zoom-buttons';
 
-  return !isDistractionFreeModeActive && (
+  return !isDistractionFreeModeActive && !isChartingActive && (
     <div className={zoomButtonClass}>
       <button
         type="button"
@@ -56,7 +56,7 @@ function Zoom({
 
 const mapStateToProps = (state) => {
   const {
-    screenSize, map, proj, ui,
+    screenSize, map, proj, ui, charting,
   } = state;
   const activeMap = map.ui.selected;
   const isMobile = screenSize.isMobileDevice;
@@ -66,13 +66,15 @@ const mapStateToProps = (state) => {
     numZoomLevels: proj.selected.numZoomLevels,
     isDistractionFreeModeActive: ui.isDistractionFreeModeActive,
     isMobile,
+    isChartingActive: charting.active,
   };
 };
 
 Zoom.propTypes = {
   map: PropTypes.object,
   isDistractionFreeModeActive: PropTypes.bool,
   isMobile: PropTypes.bool,
+  isChartingActive: PropTypes.bool,
   numZoomLevels: PropTypes.number,
   zoomLevel: PropTypes.number,
 };
diff --git a/web/js/components/sidebar/nav/nav-case.js b/web/js/components/sidebar/nav/nav-case.js
@@ -11,6 +11,7 @@ function NavCase (props) {
     tabTypes,
     isMobile,
     isCompareMode,
+    isChartMode,
     isEventsTabDisabledEmbed,
     onTabClick,
     activeTab,
@@ -22,21 +23,23 @@ function NavCase (props) {
     <CustomNavItem
       isMobile={isMobile}
       shouldHideInMobile
-      isDisabled={!!isCompareMode || isDataDisabled}
+      isDisabled={!!isCompareMode || isChartMode || isDataDisabled}
       onTabClick={onTabClick}
       text="Data"
       id="download"
       iconClassName="icon-download"
-      disabled={!!isCompareMode}
+      disabled={!!isCompareMode || isChartMode}
       label={
         isCompareMode
           ? 'You must exit comparison mode to download data'
-          : 'Data Download'
+          : isChartMode
+            ? 'You must exit charting mode to download data'
+            : 'Data Download'
       }
       className={
         activeTab === 'download'
           ? `${tabClasses} third-tab active`
-          : isCompareMode
+          : isCompareMode || isChartMode
             ? `${tabClasses} third-tab disabled`
             : `${tabClasses} third-tab`
       }
@@ -48,20 +51,22 @@ function NavCase (props) {
       id="events"
       isMobile={isMobile}
       shouldHideInMobile={false}
-      isDisabled={!!isCompareMode}
+      isDisabled={!!isCompareMode || !!isChartMode}
       onTabClick={onTabClick}
       text="Events"
       iconClassName="icon-events"
-      disabled={!!isCompareMode}
+      disabled={!!isCompareMode || !!isChartMode}
       label={
         isCompareMode
           ? 'You must exit comparison mode to use the natural events feature'
-          : 'Natural Events'
+          : isChartMode
+            ? 'You must exit charting mode to use the natural events feature'
+            : 'Natural Events'
       }
       className={
         activeTab === 'events'
           ? `${tabClasses} second-tab active`
-          : isCompareMode
+          : isCompareMode || isChartMode
             ? `${tabClasses} second-tab disabled`
             : `${tabClasses} second-tab`
       }
@@ -123,6 +128,7 @@ NavCase.propTypes = {
   activeTab: PropTypes.string,
   isEventsTabDisabledEmbed: PropTypes.bool,
   isCompareMode: PropTypes.bool,
+  isChartMode: PropTypes.bool,
   isDataDisabled: PropTypes.bool,
   isMobile: PropTypes.bool,
   onTabClick: PropTypes.func,
diff --git a/web/js/containers/sidebar/sidebar.js b/web/js/containers/sidebar/sidebar.js
@@ -372,60 +372,57 @@ class Sidebar extends React.Component {
             style={productsHolderStyle}
             ref={(el) => { this.sidebarElement = el; }}
           >
-            {!isCollapsed && (
-            <>
-              <NavCase
-                activeTab={activeTab}
-                onTabClick={onTabClick}
-                tabTypes={tabTypes}
-                isMobile={isMobile}
-                toggleSidebar={this.toggleSidebar}
-                isCompareMode={isCompareMode}
-                isDataDisabled={isDataDisabled}
-                isEventsTabDisabledEmbed={isEventsTabDisabledEmbed}
-              />
-              <TabContent activeTab={activeTab}>
-                <TabPane tabId="layers">
-                  {this.getProductsToRender(activeTab, isCompareMode, isChartMode)}
-                  <AddLayersContent
-                    ref={(el) => { this.addLayersElement = el; }}
-                    isActive={activeTab === 'layers'}
-                    compareState={activeString}
+            <NavCase
+              activeTab={activeTab}
+              onTabClick={onTabClick}
+              tabTypes={tabTypes}
+              isMobile={isMobile}
+              toggleSidebar={this.toggleSidebar}
+              isCompareMode={isCompareMode}
+              isChartMode={isChartMode}
+              isDataDisabled={isDataDisabled}
+              isEventsTabDisabledEmbed={isEventsTabDisabledEmbed}
+            />
+            <TabContent activeTab={activeTab}>
+              <TabPane tabId="layers">
+                {this.getProductsToRender(activeTab, isCompareMode, isChartMode)}
+                <AddLayersContent
+                  ref={(el) => { this.addLayersElement = el; }}
+                  isActive={activeTab === 'layers'}
+                  compareState={activeString}
+                />
+              </TabPane>
+              {naturalEvents && activeTab === 'events' && (
+                <TabPane tabId="events">
+                  <Events
+                    height={subComponentHeight}
+                    isLoading={isLoadingEvents}
+                    hasRequestError={hasEventRequestError}
+                    eventsData={eventsData}
+                    sources={eventsSources}
                   />
                 </TabPane>
-                {naturalEvents && activeTab === 'events' && (
-                  <TabPane tabId="events">
-                    <Events
-                      height={subComponentHeight}
-                      isLoading={isLoadingEvents}
-                      hasRequestError={hasEventRequestError}
-                      eventsData={eventsData}
-                      sources={eventsSources}
-                    />
-                  </TabPane>
-                )}
-                {smartHandoffs && activeTab === 'download' && (
-                  <TabPane tabId="download">
-                    <SmartHandoff
-                      isActive={activeTab === 'download'}
-                      tabTypes={tabTypes}
-                    />
-                  </TabPane>
-                )}
-                {
-                  !isKioskModeActive && (
-                    <FooterContent
-                      ref={(el) => { this.footerElement = el; }}
-                      tabTypes={tabTypes}
-                      activeTab={activeTab}
-                      chartingModeAccessible={chartingModeAccessible}
-                      sidebarHeight={sidebarHeight}
-                    />
-                  )
-                }
-              </TabContent>
-            </>
-            )}
+              )}
+              {smartHandoffs && activeTab === 'download' && (
+                <TabPane tabId="download">
+                  <SmartHandoff
+                    isActive={activeTab === 'download'}
+                    tabTypes={tabTypes}
+                  />
+                </TabPane>
+              )}
+              {
+                !isKioskModeActive && (
+                  <FooterContent
+                    ref={(el) => { this.footerElement = el; }}
+                    tabTypes={tabTypes}
+                    activeTab={activeTab}
+                    chartingModeAccessible={chartingModeAccessible}
+                    sidebarHeight={sidebarHeight}
+                  />
+                )
+              }
+            </TabContent>
           </div>
         </section>
       </ErrorBoundary>
diff --git a/web/js/containers/timeline/timeline.js b/web/js/containers/timeline/timeline.js
@@ -698,8 +698,14 @@ class Timeline extends React.Component {
       isMobile,
       onPauseAnimation,
       onToggleAnimationCollapse,
+      isCompareModeActive,
+      isChartingActive,
+      isDataDownload,
     } = this.props;
 
+    if (isCompareModeActive || isChartingActive || isDataDownload) {
+      return;
+    }
     if (isAnimationWidgetOpen && isMobile) {
       onToggleAnimationCollapse();
       onPauseAnimation();
@@ -1072,6 +1078,7 @@ class Timeline extends React.Component {
       animationDisabled,
       hasSubdailyLayers,
       isCompareModeActive,
+      isChartingActive,
       isDataDownload,
       isEmbedModeActive,
       isKioskModeActive,
@@ -1108,7 +1115,7 @@ class Timeline extends React.Component {
           </div>
         </div>
         <div>
-          {!isCompareModeActive && (
+          {!isCompareModeActive && !isChartingActive && (
           <AnimationButton
             isMobile={isMobile}
             breakpoints={breakpoints}
@@ -1125,9 +1132,11 @@ class Timeline extends React.Component {
             label={
                     isCompareModeActive
                       ? 'Animation feature is deactivated when Compare feature is active'
-                      : isDataDownload
-                        ? 'Animation feature is deactivated when Data Download feature is active'
-                        : ''
+                      : isChartingActive
+                        ? 'Animation feature is deactivated when Charting feature is active'
+                        : isDataDownload
+                          ? 'Animation feature is deactivated when Data Download feature is active'
+                          : ''
                   }
           />
           )}
@@ -1157,6 +1166,7 @@ class Timeline extends React.Component {
       isAnimatingToEvent,
       isAnimationWidgetOpen,
       isCompareModeActive,
+      isChartingActive,
       isDataDownload,
       isDistractionFreeModeActive,
       isEmbedModeActive,
@@ -1272,9 +1282,11 @@ class Timeline extends React.Component {
                       label={
                       isCompareModeActive
                         ? 'Animation feature is deactivated when Compare feature is active'
-                        : isDataDownload
-                          ? 'Animation feature is deactivated when Data Download feature is active'
-                          : ''
+                        : isChartingActive
+                          ? 'Animation feature is deactivated when Charting feature is active'
+                          : isDataDownload
+                            ? 'Animation feature is deactivated when Data Download feature is active'
+                            : ''
                     }
                     />
                   </div>
@@ -1489,6 +1501,7 @@ function mapStateToProps(state) {
   const {
     animation,
     compare,
+    charting,
     config,
     date,
     events,
@@ -1515,6 +1528,7 @@ function mapStateToProps(state) {
   } = date;
   const { isCompareA } = compare;
   const isCompareModeActive = compare.active;
+  const isChartingActive = charting.active;
   const { isDistractionFreeModeActive, isKioskModeActive, displayStaticMap } = ui;
   const { isEmbedModeActive } = embed;
   const isMobile = screenSize.isMobileDevice;
@@ -1607,6 +1621,7 @@ function mapStateToProps(state) {
     subDailyLayersList,
     customSelected,
     isCompareModeActive,
+    isChartingActive,
     isAnimatingToEvent,
     hasFutureLayers,
     dateA: getISODateFormatted(selected),
@@ -1635,7 +1650,8 @@ function mapStateToProps(state) {
     animationDisabled:
       !lodashGet(map, 'ui.selected.frameState_')
       || sidebar.activeTab === 'download'
-      || compare.active,
+      || compare.active
+      || charting.active,
     isDataDownload: sidebar.activeTab === 'download',
     isAnimationPlaying: animation.isPlaying,
     isAnimationCollapsed: animation.isCollapsed,
@@ -1743,6 +1759,7 @@ Timeline.propTypes = {
   isAnimatingToEvent: PropTypes.bool,
   isAnimationWidgetOpen: PropTypes.bool,
   isCompareModeActive: PropTypes.bool,
+  isChartingActive: PropTypes.bool,
   isDataDownload: PropTypes.bool,
   isDistractionFreeModeActive: PropTypes.bool,
   isEmbedModeActive: PropTypes.bool,
diff --git a/web/js/containers/toolbar.js b/web/js/containers/toolbar.js
