Refine downstream impact popup: tabs, coordinate subtitle, narrower width, renamed fields

Co-authored-by: AlexLipp <10188895+AlexLipp@users.noreply.github.com>
Agent-Logs-Url: https://github.com/JonnyDawe/UK-Sewage-Map/sessions/73347395-07e0-45ae-9d74-f4a233b4a978

Author: Copilot

src/components/DownstreamImpactPopup/DownstreamImpactPopupBody.tsx

@@ -1,14 +1,16 @@
 import styled from '@emotion/styled';
-import { Box, Heading, ScrollArea, Text } from '@radix-ui/themes';
+import { Box, ScrollArea, Text } from '@radix-ui/themes';
 import Wave from 'react-wavify';
 
 import { usePrefersReducedMotion } from '../../lib/hooks/usePrefersReducedMotion';
+import Tabs from '../common/Tabs/Tabs';
 import { Em } from '../common/Text';
 import { DownstreamImpactProperties } from './types';
 
 const BodyWrapper = styled.div`
   position: relative;
   overflow: hidden;
+  max-width: 280px;
 `;
 
 const BackgroundWave = styled(Wave)`
@@ -51,6 +53,7 @@ const StatRow = styled.div`
   justify-content: space-between;
   align-items: center;
   padding: 2px 0;
+  gap: 8px;
 `;
 
 const CsoList = styled.ul`
@@ -85,38 +88,54 @@ export function DownstreamImpactPopupBody({
         }}
       />
       <ContentWrapper>
-        <DataCardWrapper>
-          <StatRow>
-            <Text size="2">
-              <Em>Upstream CSOs:</Em>
-            </Text>
-            <Text size="3" weight="bold">
-              {number_upstream_CSOs}
-            </Text>
-          </StatRow>
-          <StatRow>
-            <Text size="2">
-              <Em>CSOs per km²:</Em>
-            </Text>
-            <Text size="3" weight="bold">
-              {parseFloat(number_CSOs_per_km2.toPrecision(3)).toString()}
-            </Text>
-          </StatRow>
-        </DataCardWrapper>
-        {CSOs.length > 0 && (
-          <DataCardWrapper>
-            <Heading size="2" mb="1">
-              Upstream CSO sources
-            </Heading>
-            <ScrollArea type="auto" scrollbars="vertical" style={{ maxHeight: 160 }}>
-              <CsoList>
-                {CSOs.map((name, index) => (
-                  <CsoListItem key={`${index}-${name}`}>{name}</CsoListItem>
-                ))}
-              </CsoList>
-            </ScrollArea>
-          </DataCardWrapper>
-        )}
+        <Tabs.Root defaultValue="summary" aria-label="Choose which information to see:">
+          <Tabs.List>
+            <Tabs.Trigger value="summary">Summary</Tabs.Trigger>
+            <Tabs.Trigger value="sources">Upstream Sources</Tabs.Trigger>
+          </Tabs.List>
+          <Box pt={'3'}>
+            <Tabs.Content value="summary">
+              <DataCardWrapper>
+                <StatRow>
+                  <Text size="2">
+                    <Em>Number of upstream spills:</Em>
+                  </Text>
+                  <Text size="3" weight="bold">
+                    {number_upstream_CSOs}
+                  </Text>
+                </StatRow>
+                <StatRow>
+                  <Text size="2">
+                    <Em>Number of upstream spills per km²:</Em>
+                  </Text>
+                  <Text size="3" weight="bold">
+                    {parseFloat(number_CSOs_per_km2.toPrecision(3)).toString()}
+                  </Text>
+                </StatRow>
+                <Text size="1" color="gray" mt="2" as="p">
+                  Values include all spills that have occurred in the previous 48 hours
+                </Text>
+              </DataCardWrapper>
+            </Tabs.Content>
+            <Tabs.Content value="sources">
+              <DataCardWrapper>
+                <ScrollArea type="auto" scrollbars="vertical" style={{ maxHeight: 160 }}>
+                  {CSOs.length > 0 ? (
+                    <CsoList>
+                      {CSOs.map((name, index) => (
+                        <CsoListItem key={`${index}-${name}`}>{name}</CsoListItem>
+                      ))}
+                    </CsoList>
+                  ) : (
+                    <Text size="2" color="gray">
+                      No upstream sources recorded.
+                    </Text>
+                  )}
+                </ScrollArea>
+              </DataCardWrapper>
+            </Tabs.Content>
+          </Box>
+        </Tabs.Root>
       </ContentWrapper>
     </BodyWrapper>
   );

src/components/DownstreamImpactPopup/DownstreamImpactPopupHeader.tsx

@@ -4,17 +4,28 @@ import { Em } from '../common/Text';
 
 type DownstreamImpactPopupHeaderProps = {
   company: string;
+  longitude: number;
+  latitude: number;
 };
 
-export function DownstreamImpactPopupHeader({ company }: DownstreamImpactPopupHeaderProps) {
+export function DownstreamImpactPopupHeader({
+  company,
+  longitude,
+  latitude,
+}: DownstreamImpactPopupHeaderProps) {
+  const lon = longitude.toFixed(4);
+  const lat = latitude.toFixed(4);
+
   return (
     <Flex gap="2" align="center">
       <div>
         <Heading size={'4'} as="h3">
           {company} Downstream Impact
         </Heading>
         <Text size={'2'}>
-          <Em>Upstream CSO summary</Em>
+          <Em>
+            Downstream Impact - [{lon}, {lat}]
+          </Em>
         </Text>
       </div>
     </Flex>

src/components/DownstreamImpactPopup/popupfactory.tsx

@@ -1,5 +1,6 @@
 import '@radix-ui/themes/styles.css';
 
+import Point from '@arcgis/core/geometry/Point';
 import PopupTemplate from '@arcgis/core/PopupTemplate';
 import React from 'react';
 import { flushSync } from 'react-dom';
@@ -33,6 +34,17 @@ function getPropertiesFromGraphic(graphic: __esri.Graphic): DownstreamImpactProp
   };
 }
 
+function getCoordinatesFromGraphic(graphic: __esri.Graphic): {
+  longitude: number;
+  latitude: number;
+} {
+  const point = graphic.geometry as Point | null;
+  return {
+    longitude: point?.longitude ?? 0,
+    latitude: point?.latitude ?? 0,
+  };
+}
+
 function createHTMLContentFn() {
   return function ({ graphic }: { graphic: __esri.Graphic }) {
     const container = document.createElement('div');
@@ -64,9 +76,10 @@ function createHTMLContentFn() {
 }
 
 function createTitleFn(companyName: string) {
-  return function () {
+  return function ({ graphic }: { graphic: __esri.Graphic }) {
     const container = document.createElement('div');
     const root = createRoot(container);
+    const { longitude, latitude } = getCoordinatesFromGraphic(graphic);
 
     flushSync(() => {
       root.render(
@@ -80,7 +93,11 @@ function createTitleFn(companyName: string) {
             isChild={true}
           >
             <AppTheme>
-              <DownstreamImpactPopupHeader company={companyName} />
+              <DownstreamImpactPopupHeader
+                company={companyName}
+                longitude={longitude}
+                latitude={latitude}
+              />
             </AppTheme>
           </AppThemeProvider>
         </React.StrictMode>,