Merge pull request #174 from TorMap/dev

Relay search feature
TorMap · Feb 10, 2023 · 84ac5b1 · 84ac5b1
2 parents 2ab41fe + fc6febb
commit 84ac5b1
Show file tree

Hide file tree

Showing 19 changed files with 370 additions and 239 deletions.
diff --git 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/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/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",
@@ -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/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>
         </>
     )
-}
+}
diff --git 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/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/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:[email protected]"} 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={{

diff --git 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,
+                                                                                         canShowRelayList
                                                                                      }) => {
     return (
         <Dialog
-            open={shouldShowDialog}
+            open={showDialog}
             onClose={closeDialog}
             onBackdropClick={closeDialog}
-            maxWidth={sortedRelayMatches.length > 1 ? "lg" : "md"}
+            maxWidth={canShowRelayList ? "lg" : "md"}
             fullWidth={true}
             PaperProps={{
                 sx: {
@@ -33,15 +32,10 @@ export const RelayDetailsDialogLarge: React.FunctionComponent<DetailsDialogProps
         >
             <DialogTitle>
                 <Grid container>
-                    {sortedRelayMatches.length > 1 && <Grid item xs={12} sm={3}>
-                        <Box sx={{mt: 0.5}}>
-                            <RelayDetailsSelectionHeader
-                                sortRelaysBy={sortRelaysBy}
-                                handleSelectSortByChange={handleSelectSortByChange}
-                            />
-                        </Box>
+                    {canShowRelayList && <Grid item xs={12} sm={4}>
+                        <RelayDetailsSelectionHeader/>
                     </Grid>}
-                    <Grid item xs={12} sm={sortedRelayMatches.length > 1 ? 9 : 12}>
+                    <Grid item xs={12} sm={canShowRelayList ? 8 : 12}>
                         <RelayDetailsHeader
                             closeDialog={closeDialog}
                             relayDetailsMatch={relayDetailsMatch}
@@ -51,14 +45,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'}}>
+                {canShowRelayList && <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={canShowRelayList ? 8 : 12}
                       sx={{maxHeight: "70vh", overflow: 'auto'}}>
                     {relayDetailsMatch && <RelayDetailsTable relayDetailsMatch={relayDetailsMatch}/>}
                 </Grid>