Merge pull request #70 from TorMap/development

Update master
TorMap · Feb 17, 2022 · 1d2b508 · 1d2b508
2 parents c44d802 + 6914f15
commit 1d2b508
Show file tree

Hide file tree

Showing 33 changed files with 601 additions and 456 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ database. Currently, the required archive part makes up 33 GB for the available
 . Processing of a descriptor type only starts after all descriptors of the same type have been downloaded and saved to
 disk. Processed data can instantly be fetched by the frontend to be displayed on the world map.
 
-![UI screenshot](docs/UI-screenshot.jpg)
+![UI screenshot](docs/UI-screenshot.png)
 
 ## Development
 

diff --git a/backend/build.gradle.kts b/backend/build.gradle.kts
@@ -37,8 +37,8 @@ dependencies {
     kapt("org.springframework.boot:spring-boot-configuration-processor")
 
     // OpenAPI generation and Swagger UI https://springdoc.org/
-    implementation("org.springdoc:springdoc-openapi-ui:1.6.5")
-    implementation("org.springdoc:springdoc-openapi-kotlin:1.6.5")
+    implementation("org.springdoc:springdoc-openapi-ui:1.6.6")
+    implementation("org.springdoc:springdoc-openapi-kotlin:1.6.6")
 
     // Serialization
     implementation("com.fasterxml.jackson.module:jackson-module-kotlin:2.13.1")
@@ -47,7 +47,7 @@ dependencies {
     runtimeOnly("com.h2database:h2:1.4.200")
 
     // Run Flyway DB migration tool on startup https://flywaydb.org/
-    implementation("org.flywaydb:flyway-core:8.4.3")
+    implementation("org.flywaydb:flyway-core:8.4.4")
 
     // Read .mmdb (MaxMind) DB files for IP lookups https://maxmind.github.io/MaxMind-DB/
     implementation("com.maxmind.geoip2:geoip2:3.0.0")

diff --git a/backend/gradle/wrapper/gradle-wrapper.properties b/backend/gradle/wrapper/gradle-wrapper.properties
@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.3-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.4-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
diff --git a/backend/src/main/resources/static/favicon-16x16.png b/backend/src/main/resources/static/favicon-16x16.png
diff --git a/backend/src/main/resources/static/favicon-32x32.png b/backend/src/main/resources/static/favicon-32x32.png
diff --git a/backend/src/main/resources/static/favicon.ico b/backend/src/main/resources/static/favicon.ico
diff --git a/docs/UI-screenshot.png b/docs/UI-screenshot.png
diff --git a/frontend/package.json b/frontend/package.json
@@ -5,18 +5,18 @@
   "dependencies": {
     "@emotion/react": "11.7.1",
     "@emotion/styled": "11.6.0",
-    "@mui/icons-material": "5.3.1",
-    "@mui/lab": "5.0.0-alpha.66",
-    "@mui/material": "5.3.1",
-    "@mui/styles": "5.3.0",
+    "@mui/icons-material": "5.4.1",
+    "@mui/lab": "5.0.0-alpha.68",
+    "@mui/material": "5.4.1",
+    "@mui/styles": "5.4.1",
     "@react-leaflet/core": "1.1.1",
-    "@testing-library/jest-dom": "5.16.1",
+    "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
     "@testing-library/user-event": "13.5.0",
     "@types/geojson": "7946.0.8",
     "@types/jest": "27.4.0",
-    "@types/node": "16.11.21",
-    "@types/react": "17.0.38",
+    "@types/node": "16.11.24",
+    "@types/react": "17.0.39",
     "@types/react-dom": "17.0.11",
     "axios": "0.25.0",
     "date-fns": "2.28.0",
@@ -53,7 +53,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.7",
     "@types/leaflet": "1.7.9",
-    "css-loader": "6.5.1",
+    "css-loader": "6.6.0",
     "style-loader": "3.3.1"
   },
   "packageManager": "yarn@3.1.1"

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -35,6 +35,10 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
+    <link rel="preconnect" href="https://a.basemaps.cartocdn.com">
+    <link rel="preconnect" href="https://b.basemaps.cartocdn.com">
+    <link rel="preconnect" href="https://c.basemaps.cartocdn.com">
+    <link rel="preconnect" href="https://api.tormap.org">
 
     <title>TorMap</title>
 </head>

diff --git a/frontend/src/components/accordion/AppSettings.tsx b/frontend/src/components/accordion/AppSettings.tsx
@@ -13,7 +13,7 @@ import {
 } from "@mui/material";
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import {relayMustIncludeFlagOptions, Settings} from "../../types/settings";
-import {RelayFlagLabel, RelayType, RelayTypeLabel} from "../../types/relay";
+import {RelayFlagLabel, RelayType, RelayTypeLabel, RelayTypeTooltip} from "../../types/relay";
 import {tooltipTimeDelay} from "../../config";
 import {getIcon} from "../../types/icons";
 import {nameOfFactory} from "../../util/util";
@@ -36,7 +36,7 @@ export const AppSettings: FunctionComponent<Props> = ({elevation = 24}) => {
 
     return (
         <>
-            <Accordion elevation={elevation}>
+            <Accordion elevation={elevation} defaultExpanded>
                 <AccordionSummary
                     expandIcon={<ExpandMoreIcon/>}
                     aria-controls="panel2a-content"
@@ -46,34 +46,62 @@ export const AppSettings: FunctionComponent<Props> = ({elevation = 24}) => {
                 </AccordionSummary>
                 <AccordionDetails sx={{padding: "0px 8px 20px 8px"}}>
                     <FormGroup>
-                        <FormControlLabel
+                        <Tooltip
                             key={"Family"}
-                            control={<Switch checked={settings.sortFamily} onChange={changeSettings}/>}
-                            label={"Family"}
-                            name={nameOfSetting("sortFamily")}
-                        />
-                        <FormControlLabel
+                            title={"Every verified relay family gets a somewhat unique looking color assigned. A circle's size is relative to the amount of relays located at it's center. Click a circle, to see details."}
+                            placement={"left"}
+                            enterDelay={tooltipTimeDelay}
+                        >
+                            <FormControlLabel
+                                key={"Family"}
+                                control={<Switch checked={settings.sortFamily} onChange={changeSettings}/>}
+                                label={"Family"}
+                                name={nameOfSetting("sortFamily")}
+                            />
+                        </Tooltip>
+                        <Tooltip
                             key={"Country"}
-                            control={<Switch checked={settings.sortCountry} onChange={changeSettings}/>}
-                            label={"Country"}
-                            name={nameOfSetting("sortCountry")}
-                        />
-                        <FormControlLabel
+                            title={"Relays, which are located in the same country, will be painted in the same color. Select a country, to see specific stats for it."}
+                            placement={"left"}
+                            enterDelay={tooltipTimeDelay}
+                        >
+                            <FormControlLabel
+                                key={"Country"}
+                                control={<Switch checked={settings.sortCountry} onChange={changeSettings}/>}
+                                label={"Country"}
+                                name={nameOfSetting("sortCountry")}
+                            />
+                        </Tooltip>
+                        <Tooltip
                             key={"Coordinates"}
-                            control={<Switch checked={settings.aggregateCoordinates} onChange={changeSettings}/>}
-                            label={"Coordinates"}
-                            name={nameOfSetting("aggregateCoordinates")}
-                        />
-                        <FormControlLabel
+                            title={"A circle is placed on the map when multiple relays are located at the same coordinates. A circle's size is relative to the amount of relays located at it's center. Click a circle, to see details."}
+                            placement={"left"}
+                            enterDelay={tooltipTimeDelay}
+                        >
+                            <FormControlLabel
+                                key={"Coordinates"}
+                                control={<Switch checked={settings.aggregateCoordinates} onChange={changeSettings}/>}
+                                label={"Coordinates"}
+                                name={nameOfSetting("aggregateCoordinates")}
+                            />
+                        </Tooltip>
+                        <Tooltip
                             key={"Density heatmap"}
-                            control={<Switch checked={settings.heatMap} onChange={changeSettings}/>}
-                            label={"Density heatmap"}
-                            name={nameOfSetting("heatMap")}
-                        />
+                            title={"This heatmap visualizes how many relays are present in an area relative to others."}
+                            placement={"left"}
+                            enterDelay={tooltipTimeDelay}
+                        >
+                            <FormControlLabel
+                                key={"Density heatmap"}
+                                control={<Switch checked={settings.heatMap} onChange={changeSettings}/>}
+                                label={"Density heatmap"}
+                                name={nameOfSetting("heatMap")}
+                            />
+                        </Tooltip>
                     </FormGroup>
                 </AccordionDetails>
             </Accordion>
-            <Accordion elevation={elevation}>
+            <Accordion elevation={elevation} defaultExpanded>
                 <AccordionSummary
                     expandIcon={<ExpandMoreIcon/>}
                     aria-controls="panel2a-content"
@@ -84,26 +112,33 @@ export const AppSettings: FunctionComponent<Props> = ({elevation = 24}) => {
                 <AccordionDetails sx={{padding: "0px 8px 20px 8px"}}>
                     <FormGroup>
                         {[RelayType.Exit, RelayType.Guard, RelayType.Other].map(relayType =>
-                            <FormControlLabel
+                            <Tooltip
                                 key={relayType}
-                                control={
-                                    <Checkbox
-                                        id={relayType.toString()}
-                                        checked={settings.showRelayTypes[relayType]}
-                                        onChange={changeSettings}
-                                    />
-                                }
-                                label={
-                                    <Box
-                                        display="flex"
-                                        alignItems="center"
-                                    >
-                                        <span style={{paddingRight: "10px"}}>{RelayTypeLabel[relayType]}</span>
-                                        {getIcon(relayType)}
-                                    </Box>
-                                }
-                                name={showRelayTypesInput}
-                            />
+                                title={RelayTypeTooltip[relayType]}
+                                placement={"left"}
+                                enterDelay={tooltipTimeDelay}
+                            >
+                                <FormControlLabel
+                                    key={relayType}
+                                    control={
+                                        <Checkbox
+                                            id={relayType.toString()}
+                                            checked={settings.showRelayTypes[relayType]}
+                                            onChange={changeSettings}
+                                        />
+                                    }
+                                    label={
+                                        <Box
+                                            display="flex"
+                                            alignItems="center"
+                                        >
+                                            <span style={{paddingRight: "10px"}}>{RelayTypeLabel[relayType]}</span>
+                                            {getIcon(relayType)}
+                                        </Box>
+                                    }
+                                    name={showRelayTypesInput}
+                                />
+                            </Tooltip>
                         )}
                     </FormGroup>
                 </AccordionDetails>
@@ -114,7 +149,7 @@ export const AppSettings: FunctionComponent<Props> = ({elevation = 24}) => {
                     aria-controls="panel2a-content"
                     id="panel2a-header"
                 >
-                    <Typography className={"heading"}>Relays must include flag</Typography>
+                    <Typography className={"heading"}>Relays must have flag</Typography>
                 </AccordionSummary>
                 <AccordionDetails sx={{padding: "0px 8px 20px 8px"}}>
                     <FormGroup>
@@ -123,12 +158,13 @@ export const AppSettings: FunctionComponent<Props> = ({elevation = 24}) => {
                                 key={option.relayFlag}
                                 title={option.tooltip}
                                 placement={"left"}
-                                enterDelay={tooltipTimeDelay}>
+                                enterDelay={tooltipTimeDelay}
+                            >
                                 <FormControlLabel
                                     control={
                                         <Checkbox
                                             id={option.relayFlag.toString()}
-                                            checked={settings.relaysMustIncludeFlag[option.relayFlag]}
+                                            checked={settings.relaysMustHaveFlag[option.relayFlag]}
                                             onChange={changeSettings}
                                         />
                                     }
@@ -141,7 +177,7 @@ export const AppSettings: FunctionComponent<Props> = ({elevation = 24}) => {
                     <Box sx={{margin: "8px 8px"}}>
                         <ExternalLink
                             href={"https://github.com/torproject/torspec/blob/main/dir-spec.txt"}
-                            label={"More information about flags"}
+                            label={"Learn more"}
                         />
                     </Box>
                 </AccordionDetails>

diff --git a/frontend/src/components/buttons/SelectFamilyButton.tsx b/frontend/src/components/buttons/SelectFamilyButton.tsx
@@ -2,27 +2,34 @@ import React, {FunctionComponent} from "react";
 import {IconButton} from "@mui/material";
 import {RelayFamilyIcon} from "../../types/icons";
 import {useSettings} from "../../context/settings-context";
+import {calculateFamilyColor} from "../../util/layer-construction";
 
 interface Props {
-    newFamilyId: number,
+    familyId: number,
     furtherAction?: () => void,
 }
 
-export const SelectFamilyButton: FunctionComponent<Props> = ({newFamilyId, furtherAction}) => {
+export const SelectFamilyButton: FunctionComponent<Props> = ({familyId, furtherAction}) => {
     // App context
     const {settings, setSettings} = useSettings()
 
     return (
-        <IconButton aria-label="select family" onClick={() => {
-            setSettings({
-                ...settings,
-                selectedFamily: newFamilyId,
-                sortFamily: true
-            })
-            if (furtherAction) {
-                furtherAction()
-            }
-        }}>
+        <IconButton
+            aria-label="select family"
+            onClick={() => {
+                setSettings({
+                    ...settings,
+                    selectedFamily: familyId,
+                    sortFamily: true
+                })
+                if (furtherAction) {
+                    furtherAction()
+                }
+            }}
+            sx={{
+                color: calculateFamilyColor(familyId)
+            }}
+        >
             {RelayFamilyIcon}
         </IconButton>
     )

diff --git a/frontend/src/components/date/DateSlider.tsx b/frontend/src/components/date/DateSlider.tsx
@@ -1,6 +1,7 @@
 import React, {FunctionComponent, useEffect, useState} from "react";
 import {useDebounce} from "../../util/util";
-import {Mark, Slider} from "@mui/material";
+import {Slider} from "@mui/material";
+import {Mark} from "@mui/base";
 import {useDate} from "../../context/date-context";
 import {format} from "date-fns";
 

diff --git a/frontend/src/components/dialogs/family/FamiliesTable.tsx b/frontend/src/components/dialogs/family/FamiliesTable.tsx
@@ -33,8 +33,8 @@ export const FamiliesTable: FunctionComponent<Props> = ({
                             <TableCell scope="row">
                                 <Typography sx={{fontWeight: "bold",}}>Relay nicknames</Typography>
                             </TableCell>
-                            <TableCell scope="" sx={{minWidth: "150px",}}>
-                                <Typography sx={{fontWeight: "bold",}}>Member count</Typography>
+                            <TableCell scope="" sx={{minWidth: "75px",}}>
+                                <Typography sx={{fontWeight: "bold",}}>Count</Typography>
                             </TableCell>
                             <TableCell scope="row">
                                 <Typography sx={{fontWeight: "bold",}}>Autonomous Systems</Typography>
@@ -59,7 +59,7 @@ export const FamiliesTable: FunctionComponent<Props> = ({
                                 <TableCell scope="row">
                                     <Typography>{family.nicknames}</Typography>
                                 </TableCell>
-                                <TableCell scope="row" sx={{minWidth: "150px",}}>
+                                <TableCell scope="row" sx={{minWidth: "75px",}}>
                                     <Typography>{family.memberCount}</Typography>
                                 </TableCell>
                                 <TableCell scope="row">

diff --git a/frontend/src/components/dialogs/family/FamilySelectionDialog.tsx b/frontend/src/components/dialogs/family/FamilySelectionDialog.tsx
@@ -11,7 +11,7 @@ interface FamilySelectionProps {
     /**
      * Whether the modal should currently be visible
      */
-    showDialog: boolean
+    shouldShowDialog: boolean
 
     /**
      * Hide the modal
@@ -29,13 +29,15 @@ interface FamilySelectionProps {
     familyIds: number[]
 }
 
-export interface FamilySelectionDialogProps extends Omit<FamilySelectionProps, "reloadSelectedDay"> {
+export interface FamilySelectionDialogProps {
+    shouldShowDialog: boolean
+    closeDialog: () => void
     isLoading: boolean
     familyIdentifiers?: RelayFamilyIdentifier[]
 }
 
 export const FamilySelectionDialog: FunctionComponent<FamilySelectionProps> = ({
-                                                                                  showDialog,
+                                                                                  shouldShowDialog,
                                                                                   closeDialog,
                                                                                   reloadSelectedDay,
                                                                                   familyIds,
@@ -79,16 +81,14 @@ export const FamilySelectionDialog: FunctionComponent<FamilySelectionProps> = ({
 
     return (isLargeScreen ?
             <FamilySelectionDialogLarge
-                showDialog={showDialog}
+                shouldShowDialog={shouldShowDialog}
                 closeDialog={closeDialog}
-                familyIds={familyIds}
                 isLoading={isLoading}
                 familyIdentifiers={familyIdentifiers}
             />
             : <FamilySelectionDialogSmall
-                showDialog={showDialog}
+                shouldShowDialog={shouldShowDialog}
                 closeDialog={closeDialog}
-                familyIds={familyIds}
                 isLoading={isLoading}
                 familyIdentifiers={familyIdentifiers}
             />