HMW-673 Moved watershed size out of watersheds popup into change loca…

…tion popup
Eastern-Research-Group · Jan 30, 2024 · 430d935 · 430d935
1 parent f831dd5
commit 430d935
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 36 deletions.
diff --git a/app/client/src/components/pages/Community.Tabs.Protect.js b/app/client/src/components/pages/Community.Tabs.Protect.js
@@ -818,7 +818,7 @@ function Protect() {
                             const attributes = item.attributes;
                             return (
                               <FeatureItem
-                                key={attributes.GlobalID}
+                                key={attributes.OBJECTID}
                                 feature={item}
                                 title={
                                   <strong>

diff --git a/app/client/src/components/shared/AddSaveDataWidget.SavePanel.tsx b/app/client/src/components/shared/AddSaveDataWidget.SavePanel.tsx
@@ -221,7 +221,6 @@ const saveAsInputStyles = css`
 `;
 
 const submitSectionStyles = css`
-  margin-top: 1.5rem;
   margin-bottom: 0.625rem;
 `;
 

diff --git a/app/client/src/components/shared/MapMouseEvents.tsx b/app/client/src/components/shared/MapMouseEvents.tsx
@@ -15,7 +15,11 @@ import { useServicesContext } from 'contexts/LookupFiles';
 // config
 import { getPopupContent, graphicComparison } from 'utils/mapFunctions';
 // types
-import type { MonitoringFeatureUpdate, MonitoringFeatureUpdates } from 'types';
+import type {
+  MonitoringFeatureUpdate,
+  MonitoringFeatureUpdates,
+  WatershedAttributes,
+} from 'types';
 // utils
 import { isInScale } from 'utils/mapFunctions';
 
@@ -63,6 +67,7 @@ function getGraphicsFromResponse(
       'mappedWaterLayer',
       'searchIconLayer',
       'providersLayer',
+      'watershedsLayer',
       ...additionalLayers,
     ];
     if (!result.graphic.layer?.id) return null;
@@ -84,15 +89,7 @@ function getGraphicsFromResponse(
     return result;
   }) as __esri.GraphicHit[];
 
-  const graphics = matches.map((match) => match.graphic);
-
-  // If both a boundaries (current watershed) and a watershed from the watershed layer are present, remove the latter.
-  const hasBoundariesGraphic = graphics.some(
-    (graphic) => graphic.layer.id === 'boundariesLayer',
-  );
-  return hasBoundariesGraphic
-    ? graphics.filter((graphic) => graphic.layer.id !== 'watershedsLayer')
-    : graphics;
+  return matches.map((match) => match.graphic);
 }
 
 function getGraphicFromResponse(
@@ -129,10 +126,9 @@ function prioritizePopup(
       return 1;
     });
   }
-  // Show watersheds at the end of the list always.
+  // Show boundaries at the end of the list always.
   graphics?.sort((a, _b) => {
-    if (a.layer.id === 'boundariesLayer' || a.layer.id === 'watershedsLayer')
-      return 1;
+    if (a.layer.id === 'boundariesLayer') return 1;
     return -1;
   });
 }
@@ -225,7 +221,6 @@ function MapMouseEvents({ view }: Props) {
   // Opens the change location popup
   const openChangeLocationPopup = useCallback(
     (point: __esri.Point, boundaries: __esri.FeatureSet) => {
-      const { attributes } = boundaries.features[0];
       view.closePopup();
       view.popup = new Popup({
         collapseEnabled: false,
@@ -246,10 +241,7 @@ function MapMouseEvents({ view }: Props) {
           },
           getClickedHuc: Promise.resolve({
             status: 'success',
-            data: {
-              huc12: attributes.huc12,
-              watershed: attributes.name,
-            },
+            data: boundaries.features[0].attributes as WatershedAttributes,
           }),
         }),
       });

diff --git a/app/client/src/components/shared/MessageBoxes.js b/app/client/src/components/shared/MessageBoxes.js
@@ -15,6 +15,10 @@ const boxStyles = css`
     :first-of-type {
       margin-top: 0;
     }
+
+    :last-of-type {
+      margin-bottom: 0;
+    }
   }
 `;
 

diff --git a/app/client/src/components/shared/WaterbodyInfo.tsx b/app/client/src/components/shared/WaterbodyInfo.tsx
@@ -1332,9 +1332,6 @@ function MapPopup({
 
   if (!attributes) return null;
 
-  const huc12 = clickedHuc?.data?.huc12;
-  const watershed = clickedHuc?.data?.watershed;
-
   return (
     <div css={popupContainerStyles}>
       {clickedHuc && (
@@ -1349,7 +1346,21 @@ function MapPopup({
               )}
 
               <div css={changeWatershedContainerStyles}>
-                <div>{labelValue('WATERSHED', `${watershed} (${huc12})`)}</div>
+                <div>
+                  {labelValue(
+                    'WATERSHED',
+                    `${clickedHuc.data.name} (${clickedHuc.data.huc12})`,
+                  )}
+                  {labelValue(
+                    'SIZE',
+                    `${formatNumber(
+                      clickedHuc.data.areaacres,
+                    )} acres / ${formatNumber(
+                      clickedHuc.data.areasqkm,
+                      2,
+                    )} km²`,
+                  )}
+                </div>
 
                 <div css={buttonsContainer}>
                   <button
@@ -1365,7 +1376,7 @@ function MapPopup({
                       // has a lot of waterbodies.
                       if (resetData) resetData();
 
-                      let baseRoute = `/community/${huc12}`;
+                      let baseRoute = `/community/${clickedHuc.data.huc12}`;
 
                       // community will attempt to stay on the same tab
                       // if available, stay on the same tab otherwise go to overview

diff --git a/app/client/src/types/index.ts b/app/client/src/types/index.ts
@@ -62,7 +62,7 @@ export interface ChangeLocationAttributes {
 
 export type ClickedHucState =
   | { status: 'fetching' | 'no-data' | 'none' | 'failure'; data: null }
-  | { status: 'success'; data: { huc12: string; watershed: string } };
+  | { status: 'success'; data: WatershedAttributes };
 
 export interface CongressionalDistrictAttributes {
   CDFIPS: string;

diff --git a/app/client/src/utils/hooks.ts b/app/client/src/utils/hooks.ts
@@ -56,6 +56,7 @@ import type {
   ExtendedGraphic,
   Feature,
   WaterbodyCondition,
+  WatershedAttributes,
 } from 'types';
 
 let dynamicPopupFields: __esri.Field[] = [];
@@ -804,13 +805,9 @@ function useDynamicPopup() {
               return;
             }
 
-            const { attributes } = boundaries.features[0];
             resolve({
               status: 'success',
-              data: {
-                huc12: attributes.huc12,
-                watershed: attributes.name,
-              },
+              data: boundaries.features[0].attributes as WatershedAttributes,
             });
           })
           .catch((err) => {
@@ -1361,11 +1358,6 @@ function useSharedLayers({
       listMode: 'show',
       visible: false,
       outFields: ['*'],
-      popupTemplate: {
-        outFields: ['areasqkm', 'huc12', 'name'],
-        title: getTitle,
-        content: getTemplate,
-      },
     });
     setLayer('watershedsLayer', watershedsLayer);
     return watershedsLayer;
-Original file line number
+Diff line change
@@ Expand Up / @@ -221,7 +221,6 @@ const saveAsInputStyles = css` @@
     `;
     const submitSectionStyles = css`
-      margin-top: 1.5rem;
       margin-bottom: 0.625rem;
     `;
@@ Expand Down @@