Merge pull request #940 from Eastern-Research-Group/feature/673_chang…

…e-location-area

Feature/673 change location area

app/client/public/index.html

@@ -1424,9 +1424,6 @@ <h2>Follow.</h2>
                 </a>
               </li>
             </ul>
-            <p class="footer__last-updated">
-              Last updated on December 26, 2023
-            </p>
           </div>
         </div>
       </div>

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>

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;
 `;
 

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,
           }),
         }),
       });

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;
+    }
   }
 `;
 

app/client/src/components/shared/WaterbodyInfo.tsx

@@ -1326,9 +1326,6 @@ function MapPopup({
 
   if (!attributes) return null;
 
-  const huc12 = clickedHuc?.data?.huc12;
-  const watershed = clickedHuc?.data?.watershed;
-
   return (
     <div css={popupContainerStyles}>
       {clickedHuc && (
@@ -1343,7 +1340,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
@@ -1359,7 +1370,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

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;

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;

app/server/app/public/400.html

@@ -896,9 +896,6 @@ <h2>Follow.</h2>
                 </a>
               </li>
             </ul>
-            <p class="footer__last-updated">
-              Last updated on December 26, 2023
-            </p>
           </div>
         </div>
       </div>

app/server/app/public/500.html

@@ -902,9 +902,6 @@ <h2>Follow.</h2>
                 </a>
               </li>
             </ul>
-            <p class="footer__last-updated">
-              Last updated on December 26, 2023
-            </p>
           </div>
         </div>
       </div>