From 5610b074227e014f2adeffc52f625e3c7cf6e0f6 Mon Sep 17 00:00:00 2001
From: Julius Henke <mail@juliushenke.com>
Date: Sun, 29 Jan 2023 00:26:20 +0100
Subject: [PATCH 1/8] docs: donation link and typos

---
 frontend/index.html                           |  4 ++--
 .../components/dialogs/AboutInformation.tsx   | 21 ++++++++++---------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index ed55cebb..28e4e4e4 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -15,14 +15,14 @@
     <link rel="manifest" href="/manifest.json"/>
     <meta
             name="description"
-            content="TorMap visualises the location of Tor relays on a world map. View details about any relay since October 2007."
+            content="TorMap visualizes the location of Tor relays on a world map. View details about any relay since October 2007."
     />
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <meta property="og:title" content="TorMap"/>
     <meta property="og:type" content="website"/>
     <meta property="og:url" content=""/>
     <meta property="og:image" content="/og-image.png"/>
-    <meta property="og:description" content="TorMap visualises the location of Tor relays on a world map. View details about any relay since October 2007." />
+    <meta property="og:description" content="TorMap visualizes the location of Tor relays on a world map. View details about any relay since October 2007." />
     <!--
       Notice the use of  in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/frontend/src/components/dialogs/AboutInformation.tsx b/frontend/src/components/dialogs/AboutInformation.tsx
index 05ae9251..85361783 100644
--- a/frontend/src/components/dialogs/AboutInformation.tsx
+++ b/frontend/src/components/dialogs/AboutInformation.tsx
@@ -57,7 +57,8 @@ export const AboutInformation: React.FunctionComponent = () => {
                     <Box display="flex" alignItems={"center"}>
                         <Avatar sx={{marginRight: "24px"}} src={"android-chrome-192x192.png"} alt={"TorMap logo"}/>
                         <Typography variant="h5">TorMap</Typography>
-                        <Grid sx={{flexGrow: 1, paddingLeft: "24px", paddingRight: "30px", paddingTop: "8px"}} container spacing={{ xs: 2, sm: 4 }}>
+                        <Grid sx={{flexGrow: 1, paddingLeft: "24px", paddingRight: "30px", paddingTop: "8px"}} container
+                              spacing={{xs: 2, sm: 4}}>
                             <Grid item>
                                 <ExternalLink sx={{color: "white"}} href={"https://github.com/TorMap/tormap"}
                                               label={<GitHubIcon/>}/>
@@ -70,7 +71,7 @@ export const AboutInformation: React.FunctionComponent = () => {
                                 <ExternalLink sx={{color: "white"}} href={"mailto:hi@tormap.org"} label={<EmailIcon/>}/>
                             </Grid>
                             <Grid item>
-                                <ExternalLink sx={{color: "white"}} href={"https://tippin.me/@Julius_Henke"}
+                                <ExternalLink sx={{color: "white"}} href={"https://tippin.me/@TorMapOrg"}
                                               label={<BitcoinIcon/>}/>
                             </Grid>
                         </Grid>
@@ -87,11 +88,10 @@ export const AboutInformation: React.FunctionComponent = () => {
                 >
                     <h2>What is TorMap?</h2>
                     <Typography variant={"body1"} gutterBottom>
-                        TorMap is a world map displaying approximate locations where Tor relays are being hosted. The
-                        Tor network currently consists of thousands of relays which route anonymous internet traffic
-                        daily. With our app you can group, filter and analyze Tor relays. The historic state of the
-                        network can be viewed for any day between October 2007 and today.<br/>
-                        We developed TorMap for our practical P4-Project at the <ExternalLink
+                        TorMap is a world map displaying approximate locations where Tor relays are being hosted.
+                        You can group, filter and analyze thousands of Tor relays, which route anonymous internet
+                        traffic daily. The historic state of the network can be viewed for any day between October 2007
+                        and today.<br/> We developed TorMap for our practical P4-Project at the <ExternalLink
                         href={"https://www.tu-darmstadt.de/"} label={"Technical University of Darmstadt"}/> as part of
                         the <ExternalLink href={"https://panda-projekt.de/"} label={"PANDA project"}/>. It was
                         supervised
@@ -117,10 +117,10 @@ export const AboutInformation: React.FunctionComponent = () => {
                     </Typography>
                     <h2>Contributors</h2>
                     <Stack
-                        direction={{ sm: 'column', md: 'row' }}
+                        direction={{sm: 'column', md: 'row'}}
                         justifyContent="flex-start"
                         alignItems="flex-start"
-                        spacing={{ xs: 3, sm: 3 }}
+                        spacing={{xs: 3, sm: 3}}
                     >
                         <ContributorCard
                             avatar={<Avatar src={"https://avatars.githubusercontent.com/u/23460202?s=96&v=4"}/>}
@@ -151,7 +151,8 @@ export const AboutInformation: React.FunctionComponent = () => {
                                                             label={"https://geojson-maps.ash.ms/"}/>.
                     </Typography>
                     {APP_VERSION && <Typography variant={"body2"}>
-                        This is TorMap version <ExternalLink href={"https://github.com/TorMap/tormap/releases"} label={APP_VERSION}/>.
+                        This is TorMap version <ExternalLink href={"https://github.com/TorMap/tormap/releases"}
+                                                             label={APP_VERSION}/>.
                     </Typography>}
                 </DialogContent>
                 {!isLargeScreen ? <DialogActions sx={{

From 5062c4270f37fe7f3cd6b3cbba64a8773ea3d61d Mon Sep 17 00:00:00 2001
From: Julius Henke <mail@juliushenke.com>
Date: Sun, 29 Jan 2023 01:37:03 +0100
Subject: [PATCH 2/8] feat: always display family and country count stats

---
 .../src/components/accordion/MapStats.tsx     | 23 ++++++++++---------
 frontend/src/context/statistics-context.tsx   |  2 ++
 frontend/src/types/icons.tsx                  |  4 ++--
 frontend/src/types/statistics.ts              |  6 ++---
 frontend/src/util/aggregate-relays.ts         | 16 +++++++++----
 5 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/accordion/MapStats.tsx b/frontend/src/components/accordion/MapStats.tsx
index eb9f9665..b0918bc6 100644
--- a/frontend/src/components/accordion/MapStats.tsx
+++ b/frontend/src/components/accordion/MapStats.tsx
@@ -46,17 +46,18 @@ export const MapStats: FunctionComponent<Props> = ({defaultExpanded, elevation})
     const {statistics} = useStatistics()
 
     // Construct the stats rows to display
-    const rows: StatsRow[] = []
-    rows.push({icon: ExitRelayIcon, title: "Exit relays", value: statistics.relayExitCount})
-    rows.push({icon: GuardRelayIcon, title: "Guard relays", value: statistics.relayGuardCount})
-    rows.push({icon: OtherRelayIcon, title: "Other relays", value: statistics.relayOtherCount})
-    rows.push({
-        icon: TotalRelaysIcon,
-        title: "Total relays",
-        value: statistics.relayExitCount + statistics.relayGuardCount + statistics.relayOtherCount
-    })
-    if (statistics.familyCount) rows.push({icon: RelayFamilyIcon, title: "Families", value: statistics.familyCount})
-    if (statistics.countryCount) rows.push({icon: EarthIcon, title: "Countries", value: statistics.countryCount})
+    const rows: StatsRow[] = [
+        {icon: ExitRelayIcon, title: "Exit relays", value: statistics.relayExitCount},
+        {icon: GuardRelayIcon, title: "Guard relays", value: statistics.relayGuardCount},
+        {icon: OtherRelayIcon, title: "Other relays", value: statistics.relayOtherCount},
+        {
+            icon: TotalRelaysIcon,
+            title: "Total relays",
+            value: statistics.relayExitCount + statistics.relayGuardCount + statistics.relayOtherCount
+        },
+        {icon: RelayFamilyIcon, title: "Families", value: statistics.familyCount},
+        {icon: EarthIcon, title: "Countries", value: statistics.countryCount},
+    ]
 
     return (
         <>
diff --git a/frontend/src/context/statistics-context.tsx b/frontend/src/context/statistics-context.tsx
index 1c5215aa..73561535 100644
--- a/frontend/src/context/statistics-context.tsx
+++ b/frontend/src/context/statistics-context.tsx
@@ -24,6 +24,8 @@ export const StatisticsProvider: FunctionComponent<StatisticsProviderProps> = ({
         relayGuardCount: 0,
         relayExitCount: 0,
         relayOtherCount: 0,
+        countryCount: 0,
+        familyCount: 0,
     })
     return (
         <StatisticsContext.Provider
diff --git a/frontend/src/types/icons.tsx b/frontend/src/types/icons.tsx
index 1ed8ddec..818ae60a 100644
--- a/frontend/src/types/icons.tsx
+++ b/frontend/src/types/icons.tsx
@@ -2,7 +2,7 @@ import DirectionsRunIcon from "@mui/icons-material/DirectionsRun";
 import GroupIcon from "@mui/icons-material/Group";
 import PublicIcon from "@mui/icons-material/Public";
 import SecurityIcon from "@mui/icons-material/Security";
-import SubdirectoryArrowRightIcon from "@mui/icons-material/SubdirectoryArrowRight";
+import FunctionsIcon from '@mui/icons-material/Functions';
 import TimelineIcon from "@mui/icons-material/Timeline";
 import React from "react";
 
@@ -29,6 +29,6 @@ export function getIcon(relayType: RelayType): JSX.Element | null {
 export const ExitRelayIcon = <DirectionsRunIcon sx={{color: Colors.Exit}}/>
 export const GuardRelayIcon = <SecurityIcon sx={{color: Colors.Guard}}/>
 export const OtherRelayIcon = <TimelineIcon sx={{color: Colors.Default}}/>
-export const TotalRelaysIcon = <SubdirectoryArrowRightIcon/>
+export const TotalRelaysIcon = <FunctionsIcon/>
 export const RelayFamilyIcon = <GroupIcon/>
 export const EarthIcon = <PublicIcon/>
diff --git a/frontend/src/types/statistics.ts b/frontend/src/types/statistics.ts
index 68b8d831..f81c11c7 100644
--- a/frontend/src/types/statistics.ts
+++ b/frontend/src/types/statistics.ts
@@ -2,6 +2,6 @@ export interface Statistics {
     relayGuardCount: number
     relayExitCount: number
     relayOtherCount: number
-    familyCount?: number
-    countryCount?: number
-}
\ No newline at end of file
+    familyCount: number
+    countryCount: number
+}
diff --git a/frontend/src/util/aggregate-relays.ts b/frontend/src/util/aggregate-relays.ts
index 9e3a9c16..57325e24 100644
--- a/frontend/src/util/aggregate-relays.ts
+++ b/frontend/src/util/aggregate-relays.ts
@@ -154,6 +154,9 @@ export const buildStatistics = (
     relayFamilyMap: Map<number, RelayLocationDto[]>,
     settings: Settings
 ): Statistics => {
+    let countryCount = relayCountryMap.size
+    let familyCount = relayFamilyMap.size
+
     if (settings.selectedCountry && settings.selectedFamily) {
         filteredRelays = []
         relayFamilyMap.get(settings.selectedFamily)?.forEach(familyRelay => {
@@ -163,21 +166,26 @@ export const buildStatistics = (
                 })
             }
         })
+        countryCount = 1
+        familyCount = 1
     } else if (settings.selectedCountry && relayCountryMap.has(settings.selectedCountry)) {
         filteredRelays = relayCountryMap.get(settings.selectedCountry) ?? []
+        countryCount = 1
+        familyCount = new Set(filteredRelays.map(relay => relay.familyId)).size
     } else if (settings.selectedFamily && relayFamilyMap.has(settings.selectedFamily)) {
         filteredRelays = relayFamilyMap.get(settings.selectedFamily) ?? []
+        familyCount = 1
+        countryCount = new Set(filteredRelays.map(relay => relay.country)).size
     }
 
     const stats: Statistics = {
         relayGuardCount: 0,
         relayExitCount: 0,
         relayOtherCount: 0,
+        countryCount,
+        familyCount,
     }
-    if (!settings.selectedCountry && !settings.selectedFamily) {
-        stats.countryCount = relayCountryMap.size
-        stats.familyCount = relayFamilyMap.size
-    }
+
     filteredRelays.forEach(relay => {
         const type = getRelayType(relay)
         switch (type) {

From f967d4ae7bd8540c39d485e332802e33c18cc74a Mon Sep 17 00:00:00 2001
From: Julius Henke <mail@juliushenke.com>
Date: Tue, 31 Jan 2023 00:08:45 +0100
Subject: [PATCH 3/8] feat: search relays in relay details dialog

---
 frontend/package.json                         |   3 +
 .../src/components/accordion/AppSettings.tsx  |  20 +++-
 .../dialogs/relay/RelayDetailsDialogLarge.tsx |  26 ++--
 .../dialogs/relay/RelayDetailsDialogSmall.tsx |  22 ++--
 .../relay/RelayDetailsSelectionHeader.tsx     |  43 ++++---
 .../components/dialogs/relay/RelayList.tsx    |  73 +++++++----
 .../relay/ResponsiveRelayDetailsDialog.tsx    | 113 +++++++++---------
 .../src/components/leaflet/LeafletLayers.tsx  |  50 ++++----
 frontend/src/util/aggregate-relays.ts         |   9 +-
 frontend/yarn.lock                            |  86 +++++++++++--
 10 files changed, 285 insertions(+), 160 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 7d913310..63b7249c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,11 +17,13 @@
     "@mui/x-date-pickers": "5.0.12",
     "axios": "1.2.1",
     "date-fns": "2.29.3",
+    "jotai": "1.13.1",
     "leaflet": "1.9.3",
     "leaflet.heat": "0.2.0",
     "notistack": "2.0.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-infinite-scroller": "1.2.6",
     "react-leaflet": "3.2.5",
     "react-sliding-pane": "7.3.0"
   },
@@ -32,6 +34,7 @@
     "@types/node": "16.18.6",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
+    "@types/react-infinite-scroller": "^1",
     "@typescript-eslint/eslint-plugin": "5.48.1",
     "@typescript-eslint/parser": "5.48.1",
     "@vitejs/plugin-react-swc": "3.0.1",
diff --git a/frontend/src/components/accordion/AppSettings.tsx b/frontend/src/components/accordion/AppSettings.tsx
index 1058f25b..f2498052 100644
--- a/frontend/src/components/accordion/AppSettings.tsx
+++ b/frontend/src/components/accordion/AppSettings.tsx
@@ -1,9 +1,10 @@
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import SearchIcon from '@mui/icons-material/Search';
 import {
     Accordion,
     AccordionDetails,
     AccordionSummary,
-    Box,
+    Box, Button,
     Checkbox,
     FormControlLabel,
     FormGroup,
@@ -20,6 +21,10 @@ import {RelayFlagLabel, RelayType, RelayTypeLabel, RelayTypeTooltip} from "../..
 import {relayMustIncludeFlagOptions, Settings} from "../../types/settings";
 import {nameOfFactory} from "../../util/util";
 import {ExternalLink} from "../link/ExternalLink";
+import {useAtom} from "jotai";
+import {relaysForDetailsDialogAtom, showRelayDetailsDialogAtom} from "../dialogs/relay/ResponsiveRelayDetailsDialog";
+import {filteredRelaysAtom} from "../leaflet/LeafletLayers";
+import {relayDetailsDialogSearchAtom} from "../dialogs/relay/RelayDetailsSelectionHeader";
 
 interface Props {
     elevation: number
@@ -32,11 +37,24 @@ export const AppSettings: FunctionComponent<Props> = ({elevation = 24}) => {
     // App context
     const {settings, changeSettings} = useSettings()
 
+    // Atom state
+    const [, setShowRelayDetailsDialog] = useAtom(showRelayDetailsDialogAtom)
+    const [, setRelaysForDetailsDialog] = useAtom(relaysForDetailsDialogAtom)
+    const [, setRelayDetailsDialogSearch] = useAtom(relayDetailsDialogSearchAtom)
+    const [filteredRelays] = useAtom(filteredRelaysAtom)
+
     // Util
     const nameOfSetting = nameOfFactory<Settings>()
 
     return (
         <>
+            <Button variant="contained" startIcon={<SearchIcon />} fullWidth={true} sx={{mb: "16px"}} onClick={() => {
+                setRelaysForDetailsDialog(filteredRelays)
+                setShowRelayDetailsDialog(true)
+                setRelayDetailsDialogSearch("")
+            }}>
+                Search {filteredRelays.length} relays
+            </Button>
             <Accordion elevation={elevation} defaultExpanded>
                 <AccordionSummary
                     expandIcon={<ExpandMoreIcon/>}
diff --git a/frontend/src/components/dialogs/relay/RelayDetailsDialogLarge.tsx b/frontend/src/components/dialogs/relay/RelayDetailsDialogLarge.tsx
index 62a05a50..ddaf9883 100644
--- a/frontend/src/components/dialogs/relay/RelayDetailsDialogLarge.tsx
+++ b/frontend/src/components/dialogs/relay/RelayDetailsDialogLarge.tsx
@@ -8,21 +8,20 @@ import {RelayList} from "./RelayList";
 import {DetailsDialogProps} from "./ResponsiveRelayDetailsDialog";
 
 export const RelayDetailsDialogLarge: React.FunctionComponent<DetailsDialogProps> = ({
-                                                                                         shouldShowDialog,
+                                                                                         showDialog,
                                                                                          closeDialog,
                                                                                          relayDetailsMatch,
-                                                                                         sortedRelayMatches,
-                                                                                         sortRelaysBy,
-                                                                                         handleSelectSortByChange,
+                                                                                         filteredRelayMatches,
                                                                                          relayDetailsId,
                                                                                          setRelayDetailsId,
+                                                                                         showRelayList
                                                                                      }) => {
     return (
         <Dialog
-            open={shouldShowDialog}
+            open={showDialog}
             onClose={closeDialog}
             onBackdropClick={closeDialog}
-            maxWidth={sortedRelayMatches.length > 1 ? "lg" : "md"}
+            maxWidth={showRelayList ? "lg" : "md"}
             fullWidth={true}
             PaperProps={{
                 sx: {
@@ -33,15 +32,12 @@ export const RelayDetailsDialogLarge: React.FunctionComponent<DetailsDialogProps
         >
             <DialogTitle>
                 <Grid container>
-                    {sortedRelayMatches.length > 1 && <Grid item xs={12} sm={3}>
+                    {showRelayList && <Grid item xs={12} sm={4}>
                         <Box sx={{mt: 0.5}}>
-                            <RelayDetailsSelectionHeader
-                                sortRelaysBy={sortRelaysBy}
-                                handleSelectSortByChange={handleSelectSortByChange}
-                            />
+                            <RelayDetailsSelectionHeader/>
                         </Box>
                     </Grid>}
-                    <Grid item xs={12} sm={sortedRelayMatches.length > 1 ? 9 : 12}>
+                    <Grid item xs={12} sm={showRelayList ? 8 : 12}>
                         <RelayDetailsHeader
                             closeDialog={closeDialog}
                             relayDetailsMatch={relayDetailsMatch}
@@ -51,14 +47,14 @@ export const RelayDetailsDialogLarge: React.FunctionComponent<DetailsDialogProps
             </DialogTitle>
             <Divider/>
             <Grid container>
-                {sortedRelayMatches.length > 1 && <Grid item xs={12} sm={3} sx={{maxHeight: "70vh", overflow: 'auto'}}>
+                {showRelayList && <Grid item xs={12} sm={4} sx={{maxHeight: "70vh", overflow: 'auto'}}>
                     <RelayList
-                        relayMatches={sortedRelayMatches}
+                        relayMatches={filteredRelayMatches}
                         selectedRelayId={relayDetailsId}
                         setSelectedRelayId={setRelayDetailsId}
                     />
                 </Grid>}
-                <Grid item xs={12} sm={sortedRelayMatches.length > 1 ? 9 : 12}
+                <Grid item xs={12} sm={showRelayList ? 8 : 12}
                       sx={{maxHeight: "70vh", overflow: 'auto'}}>
                     {relayDetailsMatch && <RelayDetailsTable relayDetailsMatch={relayDetailsMatch}/>}
                 </Grid>
diff --git a/frontend/src/components/dialogs/relay/RelayDetailsDialogSmall.tsx b/frontend/src/components/dialogs/relay/RelayDetailsDialogSmall.tsx
index ea9250b3..b67215d6 100644
--- a/frontend/src/components/dialogs/relay/RelayDetailsDialogSmall.tsx
+++ b/frontend/src/components/dialogs/relay/RelayDetailsDialogSmall.tsx
@@ -12,22 +12,21 @@ import {DetailsDialogProps} from "./ResponsiveRelayDetailsDialog";
 
 
 export const RelayDetailsDialogSmall: FunctionComponent<DetailsDialogProps> = ({
-                                                                                   shouldShowDialog,
+                                                                                   showDialog,
                                                                                    closeDialog,
                                                                                    relayDetailsMatch,
-                                                                                   sortedRelayMatches,
-                                                                                   sortRelaysBy,
-                                                                                   handleSelectSortByChange,
+                                                                                   filteredRelayMatches,
                                                                                    relayDetailsId,
                                                                                    setRelayDetailsId,
+                                                                                   showRelayList
                                                                                }) => {
     // Component state
     const [showRelayDetails, setShowRelayDetails] = useState(false)
 
     // Show relay details directly if only one relay is selectable
     useEffect(() => {
-        setShowRelayDetails(sortedRelayMatches.length <= 1)
-    }, [sortedRelayMatches])
+        setShowRelayDetails(filteredRelayMatches.length <= 1)
+    }, [filteredRelayMatches])
 
     const handleSelectDetails = (id: number) => {
         setRelayDetailsId(id)
@@ -37,7 +36,7 @@ export const RelayDetailsDialogSmall: FunctionComponent<DetailsDialogProps> = ({
     return (
         <>
             <Dialog
-                open={shouldShowDialog}
+                open={showDialog}
                 onClose={closeDialog}
                 fullScreen={true}
                 TransitionComponent={SlideUpTransition}
@@ -47,7 +46,7 @@ export const RelayDetailsDialogSmall: FunctionComponent<DetailsDialogProps> = ({
                         {showRelayDetails ?
                             <RelayDetailsHeader
                                 closeDialog={() => {
-                                    if (sortedRelayMatches.length > 1) {
+                                    if (filteredRelayMatches.length > 1) {
                                         setShowRelayDetails(false)
                                     } else {
                                         closeDialog()
@@ -56,10 +55,7 @@ export const RelayDetailsDialogSmall: FunctionComponent<DetailsDialogProps> = ({
                                 finishQuickAction={closeDialog}
                                 relayDetailsMatch={relayDetailsMatch}
                             /> : <>
-                                <RelayDetailsSelectionHeader
-                                    sortRelaysBy={sortRelaysBy}
-                                    handleSelectSortByChange={handleSelectSortByChange}
-                                />
+                                <RelayDetailsSelectionHeader/>
                                 <IconButton aria-label="close" sx={{
                                     position: "absolute",
                                     right: "16px",
@@ -75,7 +71,7 @@ export const RelayDetailsDialogSmall: FunctionComponent<DetailsDialogProps> = ({
                         relayDetailsMatch ? <RelayDetailsTable relayDetailsMatch={relayDetailsMatch}/> :
                             <LoadingAnimation/> :
                         <RelayList
-                            relayMatches={sortedRelayMatches}
+                            relayMatches={filteredRelayMatches}
                             selectedRelayId={relayDetailsId}
                             setSelectedRelayId={handleSelectDetails}
                         />
diff --git a/frontend/src/components/dialogs/relay/RelayDetailsSelectionHeader.tsx b/frontend/src/components/dialogs/relay/RelayDetailsSelectionHeader.tsx
index 7603ba45..540429db 100644
--- a/frontend/src/components/dialogs/relay/RelayDetailsSelectionHeader.tsx
+++ b/frontend/src/components/dialogs/relay/RelayDetailsSelectionHeader.tsx
@@ -1,34 +1,45 @@
-import {Box, FormControl, MenuItem, Select, Typography} from "@mui/material";
-import {SelectChangeEvent} from "@mui/material/Select/SelectInput";
+import {FormControl, InputAdornment, InputLabel, MenuItem, Select, Stack, TextField} from "@mui/material";
 import React, {FunctionComponent} from "react";
-
 import {RelayIdentifierMatch} from "../../../types/relay";
 import {nameOfFactory} from "../../../util/util";
+import {Search} from "@mui/icons-material";
+import {atom, useAtom} from "jotai";
 
-interface Props {
-    sortRelaysBy: keyof RelayIdentifierMatch
-    handleSelectSortByChange: (event: SelectChangeEvent<keyof RelayIdentifierMatch>) => void
-}
+export const relayDetailsDialogSearchAtom = atom("");
+export const relayDetailsDialogOrderAtom = atom<keyof RelayIdentifierMatch>("nickname");
 
-export const RelayDetailsSelectionHeader: FunctionComponent<Props> = ({sortRelaysBy, handleSelectSortByChange}) => {
+export const RelayDetailsSelectionHeader: FunctionComponent = () => {
     const nameOfRelayMatch = nameOfFactory<RelayIdentifierMatch>()
+    const [, setSearchRelaysBy] = useAtom(relayDetailsDialogSearchAtom)
+    const [, setOrderRelaysBy] = useAtom(relayDetailsDialogOrderAtom)
 
     return (
-        <Box display="flex" alignItems={"center"}>
-            <Typography sx={{display: "inline"}} variant="h6">
-                Relays
-            </Typography>
+        <Stack direction={"row"}>
+            <TextField
+                label="Nickname or fingerprint"
+                InputProps={{
+                    startAdornment: (
+                        <InputAdornment position="start">
+                            <Search/>
+                        </InputAdornment>
+                    ),
+                }}
+                variant="standard"
+                onChange={(event) => setSearchRelaysBy(event.target.value)}
+            />
             <FormControl variant="standard" sx={{ml: 3}}>
+                <InputLabel id="select-order-by-label">Order by</InputLabel>
                 <Select
-                    value={sortRelaysBy}
-                    label="Sort by"
-                    onChange={handleSelectSortByChange}
+                    labelId="select-order-by-label"
+                    onChange={(event) => setOrderRelaysBy(event.target.value as keyof RelayIdentifierMatch)}
+                    defaultValue={nameOfRelayMatch("nickname")}
                 >
                     <MenuItem value={nameOfRelayMatch("nickname")}>Nickname</MenuItem>
                     <MenuItem value={nameOfRelayMatch("relayType")}>Type</MenuItem>
                     <MenuItem value={nameOfRelayMatch("familyId")}>Family</MenuItem>
                 </Select>
             </FormControl>
-        </Box>
+        </Stack>
+
     )
 }
diff --git a/frontend/src/components/dialogs/relay/RelayList.tsx b/frontend/src/components/dialogs/relay/RelayList.tsx
index 757b4609..ad1948e7 100644
--- a/frontend/src/components/dialogs/relay/RelayList.tsx
+++ b/frontend/src/components/dialogs/relay/RelayList.tsx
@@ -1,9 +1,11 @@
-import {Box, List, ListItem, ListItemIcon, ListItemText} from "@mui/material";
-import React, {FunctionComponent} from "react";
+import {Box, CircularProgress, List, ListItem, ListItemIcon, ListItemText} from "@mui/material";
+import React, {FunctionComponent, useState} from "react";
+import InfiniteScroll from "react-infinite-scroller";
 
 import {getIcon, RelayFamilyIcon} from "../../../types/icons";
 import {RelayIdentifierMatch} from "../../../types/relay";
 import {calculateFamilyColor} from "../../../util/layer-construction";
+import {LoadingAnimation} from "../../loading/LoadingAnimation";
 
 interface Props {
     /**
@@ -22,33 +24,54 @@ interface Props {
     setSelectedRelayId: (id: number) => void
 }
 
+const MATCHES_PER_SCROLL = 50
+
 export const RelayList: FunctionComponent<Props> = ({
                                                         relayMatches,
                                                         selectedRelayId,
                                                         setSelectedRelayId,
                                                     }) => {
+    // Component state
+    const [numberOfMatchesToDisplay, setNumberOfMatchesToDisplay] = useState(MATCHES_PER_SCROLL)
+
     return (
-        <List>
-            {relayMatches.map((relayMatch) =>
-                (relayMatch.id &&
-                    <ListItem
-                        key={relayMatch.id}
-                        button={true}
-                        selected={relayMatch.id === selectedRelayId}
-                        onClick={() => setSelectedRelayId(relayMatch.id)}
-                    >
-                        <ListItemText primary={relayMatch.nickname}/>
-                        <ListItemIcon sx={{minWidth: "70px"}}>
-                            {getIcon(relayMatch.relayType)}
-                            {relayMatch.familyId &&
-                                <Box sx={{color: calculateFamilyColor(relayMatch.familyId), ml: 2}}>
-                                    {RelayFamilyIcon}
-                                </Box>
-                            }
-                        </ListItemIcon>
-                    </ListItem>
-                )
-            )}
-        </List>
+        <InfiniteScroll
+            pageStart={0}
+            loadMore={() => setNumberOfMatchesToDisplay(numberOfMatchesToDisplay + MATCHES_PER_SCROLL)}
+            hasMore={numberOfMatchesToDisplay < relayMatches.length}
+            loader={<Box sx={{textAlign: "center"}}><CircularProgress
+                color={"inherit"}
+                sx={{
+                    backgroundColor: "transparent",
+                    color: "rgba(255,255,255,.6)",
+                    zIndex: 1000,
+                }}/></Box>}
+            useWindow={false}
+        >
+            {relayMatches.length > 0 ?
+                <List>
+                    {relayMatches.slice(0, numberOfMatchesToDisplay + 1).map(relayMatch =>
+                        (relayMatch.id &&
+                            <ListItem
+                                key={relayMatch.id}
+                                button={true}
+                                selected={relayMatch.id === selectedRelayId}
+                                onClick={() => setSelectedRelayId(relayMatch.id)}
+                            >
+                                <ListItemText primary={relayMatch.nickname}/>
+                                <ListItemIcon sx={{minWidth: "70px"}}>
+                                    {getIcon(relayMatch.relayType)}
+                                    {relayMatch.familyId &&
+                                        <Box sx={{color: calculateFamilyColor(relayMatch.familyId), ml: 2}}>
+                                            {RelayFamilyIcon}
+                                        </Box>
+                                    }
+                                </ListItemIcon>
+                            </ListItem>
+                        )
+                    )}
+                </List>
+                : <Box sx={{textAlign: "center"}}>No results found</Box>}
+        </InfiniteScroll>
     )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/dialogs/relay/ResponsiveRelayDetailsDialog.tsx b/frontend/src/components/dialogs/relay/ResponsiveRelayDetailsDialog.tsx
index 8779fd0c..155ae936 100644
--- a/frontend/src/components/dialogs/relay/ResponsiveRelayDetailsDialog.tsx
+++ b/frontend/src/components/dialogs/relay/ResponsiveRelayDetailsDialog.tsx
@@ -1,5 +1,5 @@
 /**
- * Format number represented as bytes to rounded mega byte string representation
+ * Format number represented as bytes to rounded megabyte string representation
  * @param bandwidthInBytes - number to be formatted
  */
 import {useMediaQuery, useTheme} from "@mui/material";
@@ -14,51 +14,50 @@ import {getRelayType} from "../../../util/aggregate-relays";
 import {backend, nameOfFactory} from "../../../util/util";
 import {RelayDetailsDialogLarge} from "./RelayDetailsDialogLarge";
 import {RelayDetailsDialogSmall} from "./RelayDetailsDialogSmall";
-
-export interface Props {
-    shouldShowDialog: boolean
-    closeDialog: () => void
-    relayLocations: RelayLocationDto[]
-}
+import {atom, useAtom} from "jotai";
+import {relayDetailsDialogOrderAtom, relayDetailsDialogSearchAtom} from "./RelayDetailsSelectionHeader";
 
 export interface DetailsDialogProps {
-    shouldShowDialog: boolean
+    showDialog: boolean
     closeDialog: () => void
     relayDetailsMatch?: RelayDetailsMatch,
-    sortedRelayMatches: RelayIdentifierMatch[]
-    sortRelaysBy: keyof RelayIdentifierMatch
-    handleSelectSortByChange: (event: SelectChangeEvent<keyof RelayIdentifierMatch>) => void
+    filteredRelayMatches: RelayIdentifierMatch[]
     relayDetailsId?: number
     setRelayDetailsId: (id: number) => void
+    showRelayList: boolean
 }
 
-export const ResponsiveRelayDetailsDialog: FunctionComponent<Props> = ({
-                                                                           shouldShowDialog,
-                                                                           closeDialog,
-                                                                           relayLocations,
-                                                                       }) => {
+export const showRelayDetailsDialogAtom = atom(false);
+export const relaysForDetailsDialogAtom = atom<RelayLocationDto[]>([]);
+
+export const ResponsiveRelayDetailsDialog: FunctionComponent = () => {
     // Component state
     const [relayIdentifiers, setRelayIdentifiers] = useState<RelayIdentifierDto[]>([])
     const [relayDetailsId, setRelayDetailsId] = useState<number>()
     const [relayDetailsMatch, setRelayDetailsMatch] = useState<RelayDetailsMatch>()
-    const [sortRelaysBy, setSortRelaysBy] = useState<keyof RelayIdentifierMatch>("nickname")
 
     // App context
     const {enqueueSnackbar} = useSnackbar();
     const theme = useTheme()
     const isLargeScreen = useMediaQuery(theme.breakpoints.up("lg"))
 
+    // Atom state
+    const [showRelayDetailsDialog, setShowRelayDetailsDialog] = useAtom(showRelayDetailsDialogAtom)
+    const [relaysForDetailsDialog] = useAtom(relaysForDetailsDialogAtom)
+    const [searchRelaysBy] = useAtom(relayDetailsDialogSearchAtom)
+    const [orderRelaysBy] = useAtom(relayDetailsDialogOrderAtom)
+
     const nameOfRelayMatch = useMemo(() => nameOfFactory<RelayIdentifierMatch>(), [])
 
     const relayDetailsIdToLocationMap = useMemo(() => {
         const relayDetailsIdToLocationMap = new Map<number, RelayLocationDto>()
-        relayLocations.forEach(relay => {
+        relaysForDetailsDialog.forEach(relay => {
             if (relay.detailsId) {
                 relayDetailsIdToLocationMap.set(relay.detailsId, relay)
             }
         })
         return relayDetailsIdToLocationMap
-    }, [relayLocations])
+    }, [relaysForDetailsDialog])
 
     const relayIdentifierMatches = useMemo(
         () => {
@@ -80,26 +79,44 @@ export const ResponsiveRelayDetailsDialog: FunctionComponent<Props> = ({
         [relayIdentifiers, relayDetailsIdToLocationMap]
     )
 
-    const sortedRelayIdentifierMatches = useMemo(
-        () => relayIdentifierMatches.sort((a, b) => {
-                if (sortRelaysBy === nameOfRelayMatch("familyId")) {
-                    return a[sortRelaysBy]! < b[sortRelaysBy]! ? 1 : -1
+    const orderedRelayIdentifierMatches = useMemo(
+        () => Array.from(relayIdentifierMatches).sort((a, b) => {
+                console.log("test")
+                if (orderRelaysBy === nameOfRelayMatch("familyId")) {
+                    return a[orderRelaysBy]! < b[orderRelaysBy]! ? 1 : -1
                 }
-                return a[sortRelaysBy]! > b[sortRelaysBy]! ? 1 : -1
+                return a[orderRelaysBy]! > b[orderRelaysBy]! ? 1 : -1
             }
         ),
-        [nameOfRelayMatch, relayIdentifierMatches, sortRelaysBy]
+        [nameOfRelayMatch, relayIdentifierMatches]
     )
 
+    const searchedRelayIdentifierMatches = useMemo(
+        () => {
+            const searchLowerCase = searchRelaysBy.toLowerCase()
+            return orderedRelayIdentifierMatches.filter(relay =>
+                relay.nickname.toLowerCase().includes(searchLowerCase) ||
+                relay.fingerprint.toLowerCase() == searchLowerCase
+            )
+        },
+        [orderedRelayIdentifierMatches, searchRelaysBy]
+    )
+
+    useEffect(() => {
+        if (searchedRelayIdentifierMatches.length === 1) {
+            setRelayDetailsId(searchedRelayIdentifierMatches[0].id)
+        }
+    }, [searchedRelayIdentifierMatches])
+
     /**
      * Query relayIdentifiers for relays from backend
      */
     useEffect(() => {
         setRelayDetailsMatch(undefined)
         setRelayIdentifiers([])
-        if (relayLocations.length > 0 && relayDetailsIdToLocationMap.size === 0) {
+        if (relaysForDetailsDialog.length > 0 && relayDetailsIdToLocationMap.size === 0) {
             enqueueSnackbar(SnackbarMessage.NoRelayDetails, {variant: "warning"})
-            closeDialog()
+            setShowRelayDetailsDialog(false)
         } else if (relayDetailsIdToLocationMap.size === 1) {
             setRelayDetailsId(relayDetailsIdToLocationMap.keys().next().value)
         } else if (relayDetailsIdToLocationMap.size > 1) {
@@ -111,18 +128,18 @@ export const ResponsiveRelayDetailsDialog: FunctionComponent<Props> = ({
                 setRelayIdentifiers(response.data)
             }).catch(() => {
                 enqueueSnackbar(SnackbarMessage.ConnectionFailed, {variant: "error"})
-                closeDialog()
+                setShowRelayDetailsDialog(false)
             })
         }
 
-    }, [closeDialog, enqueueSnackbar, relayDetailsIdToLocationMap, relayLocations])
+    }, [enqueueSnackbar, relayDetailsIdToLocationMap, relaysForDetailsDialog, setShowRelayDetailsDialog])
 
     /**
      * Query more information for the selected relay
      */
     useEffect(() => {
-        if (!relayDetailsId && sortedRelayIdentifierMatches.length > 0) {
-            setRelayDetailsId(sortedRelayIdentifierMatches[0].id)
+        if (!relayDetailsId && orderedRelayIdentifierMatches.length > 0) {
+            setRelayDetailsId(orderedRelayIdentifierMatches[0].id)
         } else if (relayDetailsId) {
             backend.get<RelayDetailsDto>(`/relay/details/relay/${relayDetailsId}`).then(response => {
                 const relayLocation = relayDetailsIdToLocationMap.get(relayDetailsId)
@@ -137,42 +154,26 @@ export const ResponsiveRelayDetailsDialog: FunctionComponent<Props> = ({
                 enqueueSnackbar(SnackbarMessage.ConnectionFailed, {variant: "error"})
             })
         }
-    }, [sortedRelayIdentifierMatches, relayDetailsId, relayDetailsIdToLocationMap, enqueueSnackbar])
-
-    const handeSelectSortByChange = useCallback((event: SelectChangeEvent<keyof RelayIdentifierMatch>) => {
-        switch (event.target.value) {
-            case nameOfRelayMatch("relayType"):
-                setSortRelaysBy(nameOfRelayMatch("relayType"))
-                break
-            case nameOfRelayMatch("familyId"):
-                setSortRelaysBy(nameOfRelayMatch("familyId"))
-                break
-            default:
-                setSortRelaysBy(nameOfRelayMatch("nickname"))
-                break
-        }
-    }, [nameOfRelayMatch])
+    }, [orderedRelayIdentifierMatches, relayDetailsId, relayDetailsIdToLocationMap, enqueueSnackbar])
 
     return (isLargeScreen ?
             <RelayDetailsDialogLarge
                 relayDetailsMatch={relayDetailsMatch}
-                shouldShowDialog={shouldShowDialog}
-                closeDialog={closeDialog}
-                sortRelaysBy={sortRelaysBy}
-                handleSelectSortByChange={handeSelectSortByChange}
+                showDialog={showRelayDetailsDialog}
+                closeDialog={() => setShowRelayDetailsDialog(false)}
                 setRelayDetailsId={setRelayDetailsId}
-                sortedRelayMatches={sortedRelayIdentifierMatches}
+                filteredRelayMatches={searchedRelayIdentifierMatches}
                 relayDetailsId={relayDetailsId}
+                showRelayList={relayIdentifierMatches.length > 1}
             />
             : <RelayDetailsDialogSmall
                 relayDetailsMatch={relayDetailsMatch}
-                shouldShowDialog={shouldShowDialog}
-                closeDialog={closeDialog}
-                sortRelaysBy={sortRelaysBy}
-                handleSelectSortByChange={handeSelectSortByChange}
+                showDialog={showRelayDetailsDialog}
+                closeDialog={() => setShowRelayDetailsDialog(false)}
                 setRelayDetailsId={setRelayDetailsId}
-                sortedRelayMatches={sortedRelayIdentifierMatches}
+                filteredRelayMatches={searchedRelayIdentifierMatches}
                 relayDetailsId={relayDetailsId}
+                showRelayList={relayIdentifierMatches.length > 1}
             />
     )
 }
diff --git a/frontend/src/components/leaflet/LeafletLayers.tsx b/frontend/src/components/leaflet/LeafletLayers.tsx
index b59168ea..887092e9 100644
--- a/frontend/src/components/leaflet/LeafletLayers.tsx
+++ b/frontend/src/components/leaflet/LeafletLayers.tsx
@@ -8,7 +8,7 @@ import {useStatistics} from "../../context/statistics-context";
 import {RelayLocationDto} from "../../dto/relay";
 import {SnackbarMessage} from "../../types/ui";
 import {
-    applyRelayFilter,
+    filterRelaysByFlags,
     buildFamilyCoordinatesMap,
     buildRelayCoordinatesMap,
     buildRelayCountryMap,
@@ -25,6 +25,11 @@ import {
     buildSelectedFamilyLayer
 } from "../../util/layer-construction";
 import {LoadingAnimation} from "../loading/LoadingAnimation";
+import {atom, useAtom} from "jotai";
+import {
+    relaysForDetailsDialogAtom,
+    showRelayDetailsDialogAtom
+} from "../dialogs/relay/ResponsiveRelayDetailsDialog";
 
 // Lazy loaded components
 const ResponsiveRelayDetailsDialog = React.lazy(() => import('../dialogs/relay/ResponsiveRelayDetailsDialog'));
@@ -42,35 +47,40 @@ interface Props {
     reloadSelectedDay: () => void
 }
 
+export const filteredRelaysAtom = atom<RelayLocationDto[]>([]);
+
 export const LeafletLayers: FunctionComponent<Props> = ({relays, reloadSelectedDay}) => {
     // Component state
     const [showFamilySelectionDialog, setShowFamilySelectionDialog] = useState(false)
     const [familiesForSelectionDialog, setFamiliesForSelectionDialog] = useState<number[]>([])
-    const [showRelayDetailsDialog, setShowRelayDetailsDialog] = useState(false)
-    const [relaysForDetailsDialog, setRelaysForDetailsDialog] = useState<RelayLocationDto[]>([])
     const [leafletMarkerLayers] = useState<LayerGroup>(new LayerGroup())
 
+    // Atom state
+    const [, setShowRelayDetailsDialog] = useAtom(showRelayDetailsDialogAtom)
+    const [, setRelaysForDetailsDialog] = useAtom(relaysForDetailsDialogAtom)
+    const [, setFilteredRelays] = useAtom(filteredRelaysAtom)
+
     // App context
     const leafletMap = useMap()
     const {settings, setSettings} = useSettings()
     const {setStatistics} = useStatistics()
     const {enqueueSnackbar, closeSnackbar} = useSnackbar();
 
-    const filteredRelays = useMemo(
-        () => relays ? applyRelayFilter(relays, settings) : [],
+    const filteredRelaysByFlags = useMemo(
+        () => relays ? filterRelaysByFlags(relays, settings) : [],
         [relays, settings]
     )
     const relayCoordinatesMap = useMemo(
-        () => buildRelayCoordinatesMap(filteredRelays),
-        [filteredRelays]
+        () => buildRelayCoordinatesMap(filteredRelaysByFlags),
+        [filteredRelaysByFlags]
     )
     const relayCountryMap = useMemo(
-        () => buildRelayCountryMap(filteredRelays),
-        [filteredRelays]
+        () => buildRelayCountryMap(filteredRelaysByFlags),
+        [filteredRelaysByFlags]
     )
     const relayFamilyMap = useMemo(
-        () => buildRelayFamilyMap(filteredRelays),
-        [filteredRelays]
+        () => buildRelayFamilyMap(filteredRelaysByFlags),
+        [filteredRelaysByFlags]
     )
     const relayFamilyCoordinatesMap = useMemo(
         () => buildFamilyCoordinatesMap(relayCoordinatesMap),
@@ -102,8 +112,8 @@ export const LeafletLayers: FunctionComponent<Props> = ({relays, reloadSelectedD
         [relayCountryMap, setSettings, settings]
     )
     const relayLocationHeatmapLayer = useMemo(
-        () => buildRelayHeatmapLayer(filteredRelays),
-        [filteredRelays]
+        () => buildRelayHeatmapLayer(filteredRelaysByFlags),
+        [filteredRelaysByFlags]
     )
     const aggregatedCoordinatesLayer = useMemo(
         () => buildAggregatedCoordinatesLayer(relayCoordinatesMap, openRelayDetailsDialog),
@@ -118,8 +128,8 @@ export const LeafletLayers: FunctionComponent<Props> = ({relays, reloadSelectedD
         [relayFamilyCoordinatesMap, settings, setSettings, setFamiliesForSelectionDialog, setShowFamilySelectionDialog]
     )
     const statistics = useMemo(
-        () => buildStatistics(filteredRelays, relayCountryMap, relayFamilyMap, settings),
-        [filteredRelays, relayCountryMap, relayFamilyMap, settings]
+        () => buildStatistics(filteredRelaysByFlags, relayCountryMap, relayFamilyMap, settings, setFilteredRelays),
+        [filteredRelaysByFlags, relayCountryMap, relayFamilyMap, settings, setFilteredRelays]
     )
 
     /**
@@ -134,7 +144,7 @@ export const LeafletLayers: FunctionComponent<Props> = ({relays, reloadSelectedD
             }
             leafletMarkerLayers.clearLayers()
 
-            if (filteredRelays.length) {
+            if (filteredRelaysByFlags.length) {
                 closeSnackbar(SnackbarMessage.NoRelaysWithFlags)
             } else {
                 enqueueSnackbar(SnackbarMessage.NoRelaysWithFlags, {
@@ -179,15 +189,11 @@ export const LeafletLayers: FunctionComponent<Props> = ({relays, reloadSelectedD
                 closeSnackbar(SnackbarMessage.NoFamilyData)
             }
         }
-    }, [leafletMarkerLayers, relays, statistics, setStatistics, filteredRelays.length, settings, relayFamilyMap, leafletMap, relayCountryMap, closeSnackbar, enqueueSnackbar, setSettings, relayLocationHeatmapLayer, countryBordersLayer, aggregatedCoordinatesLayer, relayCountryLayer, relayLayer, relaySelectedFamilyLayer, relayFamilyCoordinatesLayer])
+    }, [leafletMarkerLayers, relays, statistics, setStatistics, filteredRelaysByFlags.length, settings, relayFamilyMap, leafletMap, relayCountryMap, closeSnackbar, enqueueSnackbar, setSettings, relayLocationHeatmapLayer, countryBordersLayer, aggregatedCoordinatesLayer, relayCountryLayer, relayLayer, relaySelectedFamilyLayer, relayFamilyCoordinatesLayer])
 
     return (
         <Suspense fallback={<LoadingAnimation/>}>
-            <ResponsiveRelayDetailsDialog
-                shouldShowDialog={showRelayDetailsDialog}
-                closeDialog={useCallback(() => setShowRelayDetailsDialog(false), [])}
-                relayLocations={relaysForDetailsDialog}
-            />
+            <ResponsiveRelayDetailsDialog/>
             <FamilySelectionDialog
                 shouldShowDialog={showFamilySelectionDialog}
                 closeDialog={useCallback(() => setShowFamilySelectionDialog(false), [])}
diff --git a/frontend/src/util/aggregate-relays.ts b/frontend/src/util/aggregate-relays.ts
index 57325e24..f039fea9 100644
--- a/frontend/src/util/aggregate-relays.ts
+++ b/frontend/src/util/aggregate-relays.ts
@@ -2,13 +2,15 @@ import {RelayLocationDto} from "../dto/relay";
 import {RelayFlag, RelayFlags, RelayType} from "../types/relay";
 import {Settings} from "../types/settings";
 import {Statistics} from "../types/statistics";
+import {useAtom} from "jotai";
+import {filteredRelaysAtom} from "../components/leaflet/LeafletLayers";
 
 /**
  * Returns a Array of GeoRelayViews that are filtered according to app settings.
  * @param relays - The relays to filter
  * @param settings - The app settings for filtering
  */
-export const applyRelayFilter = (relays: RelayLocationDto[], settings: Settings): RelayLocationDto[] => {
+export const filterRelaysByFlags = (relays: RelayLocationDto[], settings: Settings): RelayLocationDto[] => {
     const filtered: RelayLocationDto[] = []
     relays.forEach(relay => {
         let relayMissesRequiredFlag = false
@@ -147,12 +149,14 @@ export const buildRelayCountryMap = (relays: RelayLocationDto[]): Map<string, Re
  * @param relayCountryMap - A map of relays with the same country
  * @param relayFamilyMap - A map of relays with the same family
  * @param settings - Tha app settings
+ * @param setColoredRelays
  */
 export const buildStatistics = (
     filteredRelays: RelayLocationDto[],
     relayCountryMap: Map<string, RelayLocationDto[]>,
     relayFamilyMap: Map<number, RelayLocationDto[]>,
-    settings: Settings
+    settings: Settings,
+    setColoredRelays: (relays: RelayLocationDto[]) => void
 ): Statistics => {
     let countryCount = relayCountryMap.size
     let familyCount = relayFamilyMap.size
@@ -177,6 +181,7 @@ export const buildStatistics = (
         familyCount = 1
         countryCount = new Set(filteredRelays.map(relay => relay.country)).size
     }
+    setColoredRelays(filteredRelays)
 
     const stats: Statistics = {
         relayGuardCount: 0,
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 1bf07e0c..d99efe97 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1065,6 +1065,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-infinite-scroller@npm:^1":
+  version: 1.2.3
+  resolution: "@types/react-infinite-scroller@npm:1.2.3"
+  dependencies:
+    "@types/react": "*"
+  checksum: ae11063b5e114bff1f06e9d3d2ca0948a3a224f13b4a30fbfe56f84e535ee6232de9667456695bbbb409de51887d701f8558fd28c36a2ea172e8593346de85d1
+  languageName: node
+  linkType: hard
+
 "@types/react-is@npm:^16.7.1 || ^17.0.0":
   version: 17.0.3
   resolution: "@types/react-is@npm:17.0.3"
@@ -3102,6 +3111,49 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jotai@npm:1.13.1":
+  version: 1.13.1
+  resolution: "jotai@npm:1.13.1"
+  peerDependencies:
+    "@babel/core": "*"
+    "@babel/template": "*"
+    jotai-devtools: "*"
+    jotai-immer: "*"
+    jotai-optics: "*"
+    jotai-redux: "*"
+    jotai-tanstack-query: "*"
+    jotai-urql: "*"
+    jotai-valtio: "*"
+    jotai-xstate: "*"
+    jotai-zustand: "*"
+    react: ">=16.8"
+  peerDependenciesMeta:
+    "@babel/core":
+      optional: true
+    "@babel/template":
+      optional: true
+    jotai-devtools:
+      optional: true
+    jotai-immer:
+      optional: true
+    jotai-optics:
+      optional: true
+    jotai-redux:
+      optional: true
+    jotai-tanstack-query:
+      optional: true
+    jotai-urql:
+      optional: true
+    jotai-valtio:
+      optional: true
+    jotai-xstate:
+      optional: true
+    jotai-zustand:
+      optional: true
+  checksum: bc1f88ec1d52dda7c2aa39d278b15c128a6babc91fe9294862feb1b2d8467e47fc37cd193fd1358107212b9a4e5f5a8ae9a5a5ed1e845b74421d4476ce5d9efd
+  languageName: node
+  linkType: hard
+
 "js-sdsl@npm:^4.1.4":
   version: 4.2.0
   resolution: "js-sdsl@npm:4.2.0"
@@ -3858,25 +3910,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.6.2, prop-types@npm:^15.7.2":
-  version: 15.7.2
-  resolution: "prop-types@npm:15.7.2"
+"prop-types@npm:^15.5.8, prop-types@npm:^15.8.1":
+  version: 15.8.1
+  resolution: "prop-types@npm:15.8.1"
   dependencies:
     loose-envify: ^1.4.0
     object-assign: ^4.1.1
-    react-is: ^16.8.1
-  checksum: 5eef82fdda64252c7e75aa5c8cc28a24bbdece0f540adb60ce67c205cf978a5bd56b83e4f269f91c6e4dcfd80b36f2a2dec24d362e278913db2086ca9c6f9430
+    react-is: ^16.13.1
+  checksum: c056d3f1c057cb7ff8344c645450e14f088a915d078dcda795041765047fa080d38e5d626560ccaac94a4e16e3aa15f3557c1a9a8d1174530955e992c675e459
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.8.1":
-  version: 15.8.1
-  resolution: "prop-types@npm:15.8.1"
+"prop-types@npm:^15.6.2, prop-types@npm:^15.7.2":
+  version: 15.7.2
+  resolution: "prop-types@npm:15.7.2"
   dependencies:
     loose-envify: ^1.4.0
     object-assign: ^4.1.1
-    react-is: ^16.13.1
-  checksum: c056d3f1c057cb7ff8344c645450e14f088a915d078dcda795041765047fa080d38e5d626560ccaac94a4e16e3aa15f3557c1a9a8d1174530955e992c675e459
+    react-is: ^16.8.1
+  checksum: 5eef82fdda64252c7e75aa5c8cc28a24bbdece0f540adb60ce67c205cf978a5bd56b83e4f269f91c6e4dcfd80b36f2a2dec24d362e278913db2086ca9c6f9430
   languageName: node
   linkType: hard
 
@@ -3913,6 +3965,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-infinite-scroller@npm:1.2.6":
+  version: 1.2.6
+  resolution: "react-infinite-scroller@npm:1.2.6"
+  dependencies:
+    prop-types: ^15.5.8
+  peerDependencies:
+    react: ^0.14.9 || ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+  checksum: 5f5aae76c484b4039bada87070d5f8c54d2786697ae600be19a68f4e85158ff550122f15dccc5997d8b01fa487da47b9ffbc3e9d9a29f2cf71c77275f72551fd
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1, react-is@npm:^16.7.0, react-is@npm:^16.8.1":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -4522,6 +4585,7 @@ __metadata:
     "@types/node": 16.18.6
     "@types/react": 18.0.26
     "@types/react-dom": 18.0.9
+    "@types/react-infinite-scroller": ^1
     "@typescript-eslint/eslint-plugin": 5.48.1
     "@typescript-eslint/parser": 5.48.1
     "@vitejs/plugin-react-swc": 3.0.1
@@ -4530,11 +4594,13 @@ __metadata:
     eslint: 8.31.0
     eslint-plugin-jsx-a11y: 6.7.1
     eslint-plugin-react: 7.32.0
+    jotai: 1.13.1
     leaflet: 1.9.3
     leaflet.heat: 0.2.0
     notistack: 2.0.8
     react: 18.2.0
     react-dom: 18.2.0
+    react-infinite-scroller: 1.2.6
     react-leaflet: 3.2.5
     react-sliding-pane: 7.3.0
     typescript: 4.9.4

From d046dc2b9ba16403d9177e2b6bdd3fd14bed12ea Mon Sep 17 00:00:00 2001
From: Julius Henke <mail@juliushenke.com>
Date: Wed, 1 Feb 2023 21:28:56 +0100
Subject: [PATCH 4/8] fix(frontend): relay details list order by, unique list
 item key

---
 .../src/components/dialogs/relay/RelayList.tsx     | 14 ++++++--------
 .../dialogs/relay/ResponsiveRelayDetailsDialog.tsx |  8 +++-----
 frontend/src/util/aggregate-relays.ts              |  2 --
 3 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/dialogs/relay/RelayList.tsx b/frontend/src/components/dialogs/relay/RelayList.tsx
index ad1948e7..1c240774 100644
--- a/frontend/src/components/dialogs/relay/RelayList.tsx
+++ b/frontend/src/components/dialogs/relay/RelayList.tsx
@@ -1,11 +1,10 @@
-import {Box, CircularProgress, List, ListItem, ListItemIcon, ListItemText} from "@mui/material";
-import React, {FunctionComponent, useState} from "react";
+import {Box, CircularProgress, List, ListItemButton, ListItemIcon, ListItemText} from "@mui/material";
+import React, {FunctionComponent, useMemo, useState} from "react";
 import InfiniteScroll from "react-infinite-scroller";
 
 import {getIcon, RelayFamilyIcon} from "../../../types/icons";
 import {RelayIdentifierMatch} from "../../../types/relay";
 import {calculateFamilyColor} from "../../../util/layer-construction";
-import {LoadingAnimation} from "../../loading/LoadingAnimation";
 
 interface Props {
     /**
@@ -39,7 +38,7 @@ export const RelayList: FunctionComponent<Props> = ({
             pageStart={0}
             loadMore={() => setNumberOfMatchesToDisplay(numberOfMatchesToDisplay + MATCHES_PER_SCROLL)}
             hasMore={numberOfMatchesToDisplay < relayMatches.length}
-            loader={<Box sx={{textAlign: "center"}}><CircularProgress
+            loader={<Box key={0} sx={{textAlign: "center"}}><CircularProgress
                 color={"inherit"}
                 sx={{
                     backgroundColor: "transparent",
@@ -52,9 +51,8 @@ export const RelayList: FunctionComponent<Props> = ({
                 <List>
                     {relayMatches.slice(0, numberOfMatchesToDisplay + 1).map(relayMatch =>
                         (relayMatch.id &&
-                            <ListItem
+                            <ListItemButton
                                 key={relayMatch.id}
-                                button={true}
                                 selected={relayMatch.id === selectedRelayId}
                                 onClick={() => setSelectedRelayId(relayMatch.id)}
                             >
@@ -67,11 +65,11 @@ export const RelayList: FunctionComponent<Props> = ({
                                         </Box>
                                     }
                                 </ListItemIcon>
-                            </ListItem>
+                            </ListItemButton>
                         )
                     )}
                 </List>
-                : <Box sx={{textAlign: "center"}}>No results found</Box>}
+                : <Box sx={{textAlign: "center", p: "16px"}}>No results found</Box>}
         </InfiniteScroll>
     )
 }
diff --git a/frontend/src/components/dialogs/relay/ResponsiveRelayDetailsDialog.tsx b/frontend/src/components/dialogs/relay/ResponsiveRelayDetailsDialog.tsx
index 155ae936..884d9078 100644
--- a/frontend/src/components/dialogs/relay/ResponsiveRelayDetailsDialog.tsx
+++ b/frontend/src/components/dialogs/relay/ResponsiveRelayDetailsDialog.tsx
@@ -3,9 +3,8 @@
  * @param bandwidthInBytes - number to be formatted
  */
 import {useMediaQuery, useTheme} from "@mui/material";
-import {SelectChangeEvent} from "@mui/material/Select/SelectInput";
 import {useSnackbar} from "notistack";
-import React, {FunctionComponent, useCallback, useEffect, useMemo, useState} from "react";
+import React, {FunctionComponent, useEffect, useMemo, useState} from "react";
 
 import {RelayDetailsDto, RelayIdentifierDto, RelayLocationDto} from "../../../dto/relay";
 import {RelayDetailsMatch, RelayIdentifierMatch} from "../../../types/relay";
@@ -80,15 +79,14 @@ export const ResponsiveRelayDetailsDialog: FunctionComponent = () => {
     )
 
     const orderedRelayIdentifierMatches = useMemo(
-        () => Array.from(relayIdentifierMatches).sort((a, b) => {
-                console.log("test")
+        () => [...relayIdentifierMatches].sort((a, b) => {
                 if (orderRelaysBy === nameOfRelayMatch("familyId")) {
                     return a[orderRelaysBy]! < b[orderRelaysBy]! ? 1 : -1
                 }
                 return a[orderRelaysBy]! > b[orderRelaysBy]! ? 1 : -1
             }
         ),
-        [nameOfRelayMatch, relayIdentifierMatches]
+        [nameOfRelayMatch, relayIdentifierMatches, orderRelaysBy]
     )
 
     const searchedRelayIdentifierMatches = useMemo(
diff --git a/frontend/src/util/aggregate-relays.ts b/frontend/src/util/aggregate-relays.ts
index f039fea9..f52fc85b 100644
--- a/frontend/src/util/aggregate-relays.ts
+++ b/frontend/src/util/aggregate-relays.ts
@@ -2,8 +2,6 @@ import {RelayLocationDto} from "../dto/relay";
 import {RelayFlag, RelayFlags, RelayType} from "../types/relay";
 import {Settings} from "../types/settings";
 import {Statistics} from "../types/statistics";
-import {useAtom} from "jotai";
-import {filteredRelaysAtom} from "../components/leaflet/LeafletLayers";
 
 /**
  * Returns a Array of GeoRelayViews that are filtered according to app settings.

From e729dc305417d47b95b4e7608b1e45fc092ff7f7 Mon Sep 17 00:00:00 2001
From: Julius Henke <mail@juliushenke.com>
Date: Thu, 2 Feb 2023 00:33:50 +0100
Subject: [PATCH 5/8] fix(frontend): align relay details dialog header

---
 .../src/components/dialogs/relay/RelayDetailsDialogLarge.tsx  | 4 +---
 frontend/src/components/dialogs/relay/RelayDetailsHeader.tsx  | 3 +--
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/dialogs/relay/RelayDetailsDialogLarge.tsx b/frontend/src/components/dialogs/relay/RelayDetailsDialogLarge.tsx
index ddaf9883..dc3361c4 100644
--- a/frontend/src/components/dialogs/relay/RelayDetailsDialogLarge.tsx
+++ b/frontend/src/components/dialogs/relay/RelayDetailsDialogLarge.tsx
@@ -33,9 +33,7 @@ export const RelayDetailsDialogLarge: React.FunctionComponent<DetailsDialogProps
             <DialogTitle>
                 <Grid container>
                     {showRelayList && <Grid item xs={12} sm={4}>
-                        <Box sx={{mt: 0.5}}>
-                            <RelayDetailsSelectionHeader/>
-                        </Box>
+                        <RelayDetailsSelectionHeader/>
                     </Grid>}
                     <Grid item xs={12} sm={showRelayList ? 8 : 12}>
                         <RelayDetailsHeader
diff --git a/frontend/src/components/dialogs/relay/RelayDetailsHeader.tsx b/frontend/src/components/dialogs/relay/RelayDetailsHeader.tsx
index e4d3c3ce..455b4978 100644
--- a/frontend/src/components/dialogs/relay/RelayDetailsHeader.tsx
+++ b/frontend/src/components/dialogs/relay/RelayDetailsHeader.tsx
@@ -25,9 +25,8 @@ export const RelayDetailsHeader: FunctionComponent<Props> = ({
     // App context
     const {settings, setSettings} = useSettings()
     const relayType = relayDetailsMatch ? getRelayType(relayDetailsMatch) : undefined
-
     return (
-        <Box display="flex" alignItems={"center"}>
+        <Box display="flex" alignItems={"center"} sx={{mt: 0.5}}>
             {relayDetailsMatch && relayType != undefined ? <>
                 <Tooltip title={`Relay's nickname`}>
                     <Typography sx={{display: "inline"}}

From f5609a1b94658831d9e961b6143abc31ebbb3252 Mon Sep 17 00:00:00 2001
From: Julius Henke <mail@juliushenke.com>
Date: Sun, 5 Feb 2023 15:08:23 +0100
Subject: [PATCH 6/8] fix(frontend): updating filtered relays

---
 frontend/src/components/App.tsx               | 16 ++++----
 .../dialogs/relay/RelayDetailsDialogSmall.tsx |  7 ++--
 .../src/components/leaflet/LeafletLayers.tsx  | 16 ++++++--
 frontend/src/util/aggregate-relays.ts         | 38 +++++++++----------
 4 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index 5fe1adc2..07c66174 100644
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -61,17 +61,17 @@ export const App: FunctionComponent = () => {
                         bottom: "2px",
                         fontSize: ".7rem",
                     }}>
-                    <span>
-                        <ExternalLink href="https://leafletjs.com" label={"Leaflet"}/>
-                        {" | © "}
-                        <ExternalLink href="https://www.openstreetmap.org/copyright" label={"OpenStreetMap"}/>
-                        {" contributors © "}
-                        <ExternalLink href="https://carto.com/attributions" label={"CARTO"}/>
-                    </span>
+                        <span>
+                            <ExternalLink href="https://leafletjs.com" label={"Leaflet"}/>
+                            {" | © "}
+                            <ExternalLink href="https://www.openstreetmap.org/copyright" label={"OpenStreetMap"}/>
+                            {" contributors © "}
+                            <ExternalLink href="https://carto.com/attributions" label={"CARTO"}/>
+                        </span>
                     </Box>
                     <AboutInformation/>
                 </React.StrictMode>
             </Suspense>
         </>
     )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/dialogs/relay/RelayDetailsDialogSmall.tsx b/frontend/src/components/dialogs/relay/RelayDetailsDialogSmall.tsx
index b67215d6..40925ce9 100644
--- a/frontend/src/components/dialogs/relay/RelayDetailsDialogSmall.tsx
+++ b/frontend/src/components/dialogs/relay/RelayDetailsDialogSmall.tsx
@@ -46,7 +46,7 @@ export const RelayDetailsDialogSmall: FunctionComponent<DetailsDialogProps> = ({
                         {showRelayDetails ?
                             <RelayDetailsHeader
                                 closeDialog={() => {
-                                    if (filteredRelayMatches.length > 1) {
+                                    if (showRelayList) {
                                         setShowRelayDetails(false)
                                     } else {
                                         closeDialog()
@@ -84,11 +84,10 @@ export const RelayDetailsDialogSmall: FunctionComponent<DetailsDialogProps> = ({
                 }}>
                     <Button
                         onClick={() => {
-                            if (showRelayDetails) {
-                                setShowRelayDetails(false)
-                            } else {
+                            if (!showRelayDetails || !showRelayList) {
                                 closeDialog()
                             }
+                            setShowRelayDetails(false)
                         }}
                         variant={"contained"}
                         size={"large"}
diff --git a/frontend/src/components/leaflet/LeafletLayers.tsx b/frontend/src/components/leaflet/LeafletLayers.tsx
index 887092e9..92294845 100644
--- a/frontend/src/components/leaflet/LeafletLayers.tsx
+++ b/frontend/src/components/leaflet/LeafletLayers.tsx
@@ -13,7 +13,7 @@ import {
     buildRelayCoordinatesMap,
     buildRelayCountryMap,
     buildRelayFamilyMap,
-    buildStatistics
+    buildStatistics, buildFilteredRelays
 } from "../../util/aggregate-relays";
 import {
     buildAggregatedCoordinatesLayer,
@@ -30,6 +30,7 @@ import {
     relaysForDetailsDialogAtom,
     showRelayDetailsDialogAtom
 } from "../dialogs/relay/ResponsiveRelayDetailsDialog";
+import {relayDetailsDialogSearchAtom} from "../dialogs/relay/RelayDetailsSelectionHeader";
 
 // Lazy loaded components
 const ResponsiveRelayDetailsDialog = React.lazy(() => import('../dialogs/relay/ResponsiveRelayDetailsDialog'));
@@ -58,6 +59,7 @@ export const LeafletLayers: FunctionComponent<Props> = ({relays, reloadSelectedD
     // Atom state
     const [, setShowRelayDetailsDialog] = useAtom(showRelayDetailsDialogAtom)
     const [, setRelaysForDetailsDialog] = useAtom(relaysForDetailsDialogAtom)
+    const [, setRelayDetailsDialogSearch] = useAtom(relayDetailsDialogSearchAtom)
     const [, setFilteredRelays] = useAtom(filteredRelaysAtom)
 
     // App context
@@ -86,6 +88,10 @@ export const LeafletLayers: FunctionComponent<Props> = ({relays, reloadSelectedD
         () => buildFamilyCoordinatesMap(relayCoordinatesMap),
         [relayCoordinatesMap]
     )
+    const filteredRelays = useMemo(
+        () => buildFilteredRelays(filteredRelaysByFlags, relayCountryMap, relayFamilyMap, settings),
+        [filteredRelaysByFlags, relayCountryMap, relayFamilyMap, settings, setFilteredRelays]
+    )
 
     /**
      * After a marker was clicked on the map the corresponding relays are passed to the details dialog
@@ -96,6 +102,7 @@ export const LeafletLayers: FunctionComponent<Props> = ({relays, reloadSelectedD
             const relaysAtCoordinate = relayCoordinatesMap?.get(event.target.options.className) ?? []
             setRelaysForDetailsDialog(relaysAtCoordinate)
             setShowRelayDetailsDialog(true)
+            setRelayDetailsDialogSearch("")
         }
     }, [relayCoordinatesMap, relays])
 
@@ -128,8 +135,8 @@ export const LeafletLayers: FunctionComponent<Props> = ({relays, reloadSelectedD
         [relayFamilyCoordinatesMap, settings, setSettings, setFamiliesForSelectionDialog, setShowFamilySelectionDialog]
     )
     const statistics = useMemo(
-        () => buildStatistics(filteredRelaysByFlags, relayCountryMap, relayFamilyMap, settings, setFilteredRelays),
-        [filteredRelaysByFlags, relayCountryMap, relayFamilyMap, settings, setFilteredRelays]
+        () => buildStatistics(filteredRelays, relayCountryMap, relayFamilyMap, settings),
+        [filteredRelays, relayCountryMap, relayFamilyMap, settings]
     )
 
     /**
@@ -138,6 +145,7 @@ export const LeafletLayers: FunctionComponent<Props> = ({relays, reloadSelectedD
     useEffect(() => {
         if (relays) {
             setStatistics(statistics)
+            setFilteredRelays(filteredRelays)
 
             if (!leafletMap.hasLayer(leafletMarkerLayers)) {
                 leafletMap.addLayer(leafletMarkerLayers)
@@ -189,7 +197,7 @@ export const LeafletLayers: FunctionComponent<Props> = ({relays, reloadSelectedD
                 closeSnackbar(SnackbarMessage.NoFamilyData)
             }
         }
-    }, [leafletMarkerLayers, relays, statistics, setStatistics, filteredRelaysByFlags.length, settings, relayFamilyMap, leafletMap, relayCountryMap, closeSnackbar, enqueueSnackbar, setSettings, relayLocationHeatmapLayer, countryBordersLayer, aggregatedCoordinatesLayer, relayCountryLayer, relayLayer, relaySelectedFamilyLayer, relayFamilyCoordinatesLayer])
+    }, [filteredRelays, leafletMarkerLayers, relays, statistics, setStatistics, filteredRelaysByFlags.length, settings, relayFamilyMap, leafletMap, relayCountryMap, closeSnackbar, enqueueSnackbar, setSettings, relayLocationHeatmapLayer, countryBordersLayer, aggregatedCoordinatesLayer, relayCountryLayer, relayLayer, relaySelectedFamilyLayer, relayFamilyCoordinatesLayer])
 
     return (
         <Suspense fallback={<LoadingAnimation/>}>
diff --git a/frontend/src/util/aggregate-relays.ts b/frontend/src/util/aggregate-relays.ts
index f52fc85b..cbf8ff22 100644
--- a/frontend/src/util/aggregate-relays.ts
+++ b/frontend/src/util/aggregate-relays.ts
@@ -141,45 +141,43 @@ export const buildRelayCountryMap = (relays: RelayLocationDto[]): Map<string, Re
     return countryMap
 }
 
-/**
- * Returns a Statistics-Object for given parameters
- * @param filteredRelays - The already filtered relays
- * @param relayCountryMap - A map of relays with the same country
- * @param relayFamilyMap - A map of relays with the same family
- * @param settings - Tha app settings
- * @param setColoredRelays
- */
+export const buildFilteredRelays = (
+    filteredRelaysByFlags: RelayLocationDto[],
+    relayCountryMap: Map<string, RelayLocationDto[]>,
+    relayFamilyMap: Map<number, RelayLocationDto[]>,
+    settings: Settings,
+): RelayLocationDto[] => {
+    if (settings.selectedCountry && settings.selectedFamily) {
+        return relayCountryMap.get(settings.selectedCountry)?.filter(
+            countryRelay => countryRelay.familyId === settings.selectedFamily
+        ) ?? []
+    } else if (settings.selectedCountry && relayCountryMap.has(settings.selectedCountry)) {
+        return relayCountryMap.get(settings.selectedCountry) ?? []
+    } else if (settings.selectedFamily && relayFamilyMap.has(settings.selectedFamily)) {
+        return relayFamilyMap.get(settings.selectedFamily) ?? []
+    }
+    return filteredRelaysByFlags
+}
+
 export const buildStatistics = (
     filteredRelays: RelayLocationDto[],
     relayCountryMap: Map<string, RelayLocationDto[]>,
     relayFamilyMap: Map<number, RelayLocationDto[]>,
     settings: Settings,
-    setColoredRelays: (relays: RelayLocationDto[]) => void
 ): Statistics => {
     let countryCount = relayCountryMap.size
     let familyCount = relayFamilyMap.size
 
     if (settings.selectedCountry && settings.selectedFamily) {
-        filteredRelays = []
-        relayFamilyMap.get(settings.selectedFamily)?.forEach(familyRelay => {
-            if (settings.selectedCountry) {
-                relayCountryMap.get(settings.selectedCountry)?.forEach(countryRelay => {
-                    if (familyRelay.detailsId === countryRelay.detailsId) filteredRelays.push(familyRelay)
-                })
-            }
-        })
         countryCount = 1
         familyCount = 1
     } else if (settings.selectedCountry && relayCountryMap.has(settings.selectedCountry)) {
-        filteredRelays = relayCountryMap.get(settings.selectedCountry) ?? []
         countryCount = 1
         familyCount = new Set(filteredRelays.map(relay => relay.familyId)).size
     } else if (settings.selectedFamily && relayFamilyMap.has(settings.selectedFamily)) {
-        filteredRelays = relayFamilyMap.get(settings.selectedFamily) ?? []
         familyCount = 1
         countryCount = new Set(filteredRelays.map(relay => relay.country)).size
     }
-    setColoredRelays(filteredRelays)
 
     const stats: Statistics = {
         relayGuardCount: 0,

From ea970c4557ab1a266542c01b13a85584e084760d Mon Sep 17 00:00:00 2001
From: Julius Henke <mail@juliushenke.com>
Date: Sun, 5 Feb 2023 18:09:58 +0100
Subject: [PATCH 7/8] fix(frontend): small relay details dialog visibility

---
 .../dialogs/relay/RelayDetailsDialogLarge.tsx | 12 +++----
 .../dialogs/relay/RelayDetailsDialogSmall.tsx | 33 +++++++++----------
 .../relay/RelayDetailsSelectionHeader.tsx     |  7 ++--
 .../relay/ResponsiveRelayDetailsDialog.tsx    |  6 ++--
 4 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/dialogs/relay/RelayDetailsDialogLarge.tsx b/frontend/src/components/dialogs/relay/RelayDetailsDialogLarge.tsx
index dc3361c4..6277a17d 100644
--- a/frontend/src/components/dialogs/relay/RelayDetailsDialogLarge.tsx
+++ b/frontend/src/components/dialogs/relay/RelayDetailsDialogLarge.tsx
@@ -14,14 +14,14 @@ export const RelayDetailsDialogLarge: React.FunctionComponent<DetailsDialogProps
                                                                                          filteredRelayMatches,
                                                                                          relayDetailsId,
                                                                                          setRelayDetailsId,
-                                                                                         showRelayList
+                                                                                         canShowRelayList
                                                                                      }) => {
     return (
         <Dialog
             open={showDialog}
             onClose={closeDialog}
             onBackdropClick={closeDialog}
-            maxWidth={showRelayList ? "lg" : "md"}
+            maxWidth={canShowRelayList ? "lg" : "md"}
             fullWidth={true}
             PaperProps={{
                 sx: {
@@ -32,10 +32,10 @@ export const RelayDetailsDialogLarge: React.FunctionComponent<DetailsDialogProps
         >
             <DialogTitle>
                 <Grid container>
-                    {showRelayList && <Grid item xs={12} sm={4}>
+                    {canShowRelayList && <Grid item xs={12} sm={4}>
                         <RelayDetailsSelectionHeader/>
                     </Grid>}
-                    <Grid item xs={12} sm={showRelayList ? 8 : 12}>
+                    <Grid item xs={12} sm={canShowRelayList ? 8 : 12}>
                         <RelayDetailsHeader
                             closeDialog={closeDialog}
                             relayDetailsMatch={relayDetailsMatch}
@@ -45,14 +45,14 @@ export const RelayDetailsDialogLarge: React.FunctionComponent<DetailsDialogProps
             </DialogTitle>
             <Divider/>
             <Grid container>
-                {showRelayList && <Grid item xs={12} sm={4} sx={{maxHeight: "70vh", overflow: 'auto'}}>
+                {canShowRelayList && <Grid item xs={12} sm={4} sx={{maxHeight: "70vh", overflow: 'auto'}}>
                     <RelayList
                         relayMatches={filteredRelayMatches}
                         selectedRelayId={relayDetailsId}
                         setSelectedRelayId={setRelayDetailsId}
                     />
                 </Grid>}
-                <Grid item xs={12} sm={showRelayList ? 8 : 12}
+                <Grid item xs={12} sm={canShowRelayList ? 8 : 12}
                       sx={{maxHeight: "70vh", overflow: 'auto'}}>
                     {relayDetailsMatch && <RelayDetailsTable relayDetailsMatch={relayDetailsMatch}/>}
                 </Grid>
diff --git a/frontend/src/components/dialogs/relay/RelayDetailsDialogSmall.tsx b/frontend/src/components/dialogs/relay/RelayDetailsDialogSmall.tsx
index 40925ce9..e134a4b6 100644
--- a/frontend/src/components/dialogs/relay/RelayDetailsDialogSmall.tsx
+++ b/frontend/src/components/dialogs/relay/RelayDetailsDialogSmall.tsx
@@ -18,21 +18,28 @@ export const RelayDetailsDialogSmall: FunctionComponent<DetailsDialogProps> = ({
                                                                                    filteredRelayMatches,
                                                                                    relayDetailsId,
                                                                                    setRelayDetailsId,
-                                                                                   showRelayList
+                                                                                   canShowRelayList
                                                                                }) => {
     // Component state
     const [showRelayDetails, setShowRelayDetails] = useState(false)
 
-    // Show relay details directly if only one relay is selectable
     useEffect(() => {
-        setShowRelayDetails(filteredRelayMatches.length <= 1)
-    }, [filteredRelayMatches])
+        setShowRelayDetails(!canShowRelayList)
+    }, [canShowRelayList, showDialog])
 
     const handleSelectDetails = (id: number) => {
         setRelayDetailsId(id)
         setShowRelayDetails(true)
     }
 
+    function closeDialogOrOnlyRelayDetails() {
+        if (canShowRelayList && showRelayDetails) {
+            setShowRelayDetails(false)
+        } else {
+            closeDialog()
+        }
+    }
+
     return (
         <>
             <Dialog
@@ -45,16 +52,11 @@ export const RelayDetailsDialogSmall: FunctionComponent<DetailsDialogProps> = ({
                     <Toolbar>
                         {showRelayDetails ?
                             <RelayDetailsHeader
-                                closeDialog={() => {
-                                    if (showRelayList) {
-                                        setShowRelayDetails(false)
-                                    } else {
-                                        closeDialog()
-                                    }
-                                }}
+                                closeDialog={closeDialogOrOnlyRelayDetails}
                                 finishQuickAction={closeDialog}
                                 relayDetailsMatch={relayDetailsMatch}
-                            /> : <>
+                            /> :
+                            <>
                                 <RelayDetailsSelectionHeader/>
                                 <IconButton aria-label="close" sx={{
                                     position: "absolute",
@@ -83,12 +85,7 @@ export const RelayDetailsDialogSmall: FunctionComponent<DetailsDialogProps> = ({
                     right: 5,
                 }}>
                     <Button
-                        onClick={() => {
-                            if (!showRelayDetails || !showRelayList) {
-                                closeDialog()
-                            }
-                            setShowRelayDetails(false)
-                        }}
+                        onClick={closeDialogOrOnlyRelayDetails}
                         variant={"contained"}
                         size={"large"}
                     >
diff --git a/frontend/src/components/dialogs/relay/RelayDetailsSelectionHeader.tsx b/frontend/src/components/dialogs/relay/RelayDetailsSelectionHeader.tsx
index 540429db..6de210cc 100644
--- a/frontend/src/components/dialogs/relay/RelayDetailsSelectionHeader.tsx
+++ b/frontend/src/components/dialogs/relay/RelayDetailsSelectionHeader.tsx
@@ -10,8 +10,8 @@ export const relayDetailsDialogOrderAtom = atom<keyof RelayIdentifierMatch>("nic
 
 export const RelayDetailsSelectionHeader: FunctionComponent = () => {
     const nameOfRelayMatch = nameOfFactory<RelayIdentifierMatch>()
-    const [, setSearchRelaysBy] = useAtom(relayDetailsDialogSearchAtom)
-    const [, setOrderRelaysBy] = useAtom(relayDetailsDialogOrderAtom)
+    const [searchRelaysBy, setSearchRelaysBy] = useAtom(relayDetailsDialogSearchAtom)
+    const [orderRelaysBy, setOrderRelaysBy] = useAtom(relayDetailsDialogOrderAtom)
 
     return (
         <Stack direction={"row"}>
@@ -26,13 +26,14 @@ export const RelayDetailsSelectionHeader: FunctionComponent = () => {
                 }}
                 variant="standard"
                 onChange={(event) => setSearchRelaysBy(event.target.value)}
+                value={searchRelaysBy}
             />
             <FormControl variant="standard" sx={{ml: 3}}>
                 <InputLabel id="select-order-by-label">Order by</InputLabel>
                 <Select
                     labelId="select-order-by-label"
                     onChange={(event) => setOrderRelaysBy(event.target.value as keyof RelayIdentifierMatch)}
-                    defaultValue={nameOfRelayMatch("nickname")}
+                    value={orderRelaysBy}
                 >
                     <MenuItem value={nameOfRelayMatch("nickname")}>Nickname</MenuItem>
                     <MenuItem value={nameOfRelayMatch("relayType")}>Type</MenuItem>
diff --git a/frontend/src/components/dialogs/relay/ResponsiveRelayDetailsDialog.tsx b/frontend/src/components/dialogs/relay/ResponsiveRelayDetailsDialog.tsx
index 884d9078..f9c35354 100644
--- a/frontend/src/components/dialogs/relay/ResponsiveRelayDetailsDialog.tsx
+++ b/frontend/src/components/dialogs/relay/ResponsiveRelayDetailsDialog.tsx
@@ -23,7 +23,7 @@ export interface DetailsDialogProps {
     filteredRelayMatches: RelayIdentifierMatch[]
     relayDetailsId?: number
     setRelayDetailsId: (id: number) => void
-    showRelayList: boolean
+    canShowRelayList: boolean
 }
 
 export const showRelayDetailsDialogAtom = atom(false);
@@ -162,7 +162,7 @@ export const ResponsiveRelayDetailsDialog: FunctionComponent = () => {
                 setRelayDetailsId={setRelayDetailsId}
                 filteredRelayMatches={searchedRelayIdentifierMatches}
                 relayDetailsId={relayDetailsId}
-                showRelayList={relayIdentifierMatches.length > 1}
+                canShowRelayList={relayIdentifierMatches.length > 1}
             />
             : <RelayDetailsDialogSmall
                 relayDetailsMatch={relayDetailsMatch}
@@ -171,7 +171,7 @@ export const ResponsiveRelayDetailsDialog: FunctionComponent = () => {
                 setRelayDetailsId={setRelayDetailsId}
                 filteredRelayMatches={searchedRelayIdentifierMatches}
                 relayDetailsId={relayDetailsId}
-                showRelayList={relayIdentifierMatches.length > 1}
+                canShowRelayList={relayIdentifierMatches.length > 1}
             />
     )
 }

From fc6febb771d93e91b9492469bf6760ace75f3b8a Mon Sep 17 00:00:00 2001
From: Julius Henke <mail@juliushenke.com>
Date: Sat, 11 Feb 2023 00:33:39 +0100
Subject: [PATCH 8/8] chore: bump minor version

---
 backend/build.gradle.kts | 2 +-
 frontend/package.json    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/build.gradle.kts b/backend/build.gradle.kts
index 96344f55..5c817cb2 100644
--- a/backend/build.gradle.kts
+++ b/backend/build.gradle.kts
@@ -1,7 +1,7 @@
 import org.jetbrains.kotlin.gradle.tasks.KotlinCompile
 
 group = "org.tormap"
-version = "1.0.1"
+version = "1.1.0"
 java.sourceCompatibility = JavaVersion.VERSION_11
 
 plugins {
diff --git a/frontend/package.json b/frontend/package.json
index 63b7249c..86baf4a1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tormap",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "start": "vite --port 3000",