City selection with display on a map

web/src/cities/Cities.tsx

@@ -2,11 +2,12 @@ import moment from "moment";
 import { createSignal } from "solid-js";
 import { QueryResult } from "./result/QueryResult";
 
-import { SelectCity } from "./SelectCity";
+import { SelectCity } from "../components/SelectCity";
+import { SelectTimeRange } from "../components/SelectTimeRange";
+
 import { SelectField } from "./SelectField";
 import { SelectGranularity } from "./SelectGranularity";
 import { SelectKey } from "./SelectKey";
-import { SelectTimeRange } from "../components/SelectTimeRange";
 
 const nowRounded = new Date(new Date().setMinutes(30));
 const dayAgo = moment(nowRounded).subtract(1, "days").subtract(30, "minutes").toDate();
@@ -21,7 +22,6 @@ export function Cities() {
 
     return (
         <div class="aggregator">
-            <h2>Cities</h2>
             <div class="container">
                 <div class="column">
                     <SelectCity getCities={getCities} setCities={setCities} />

web/src/cities/SelectCity.tsx

@@ -1,52 +0,0 @@
-import { Accessor, Component, createEffect, Setter } from "solid-js";
-import { cityList } from "../consts";
-
-export const SelectCity: Component<{
-    getCities: Accessor<Set<string>>,
-    setCities: Setter<Set<string>>,
-}> = ({ getCities, setCities }) => {
-    function handleSelect(e: MouseEvent) {
-        if (!e.target) return;
-        const target = e.target as HTMLInputElement;
-        const { checked: selected, value: city } = target;
-        const selectedCities = new Set([...getCities()]);
-        if (selected) selectedCities.add(city);
-        else selectedCities.delete(city);
-
-        setCities(selectedCities);
-    }
-
-    function selectAll(e: MouseEvent) {
-        if (!e.target) return;
-        const target = e.target as HTMLInputElement;
-        const selectedCities = target.checked
-            ? new Set([...cityList])
-            : new Set([]);
-
-        setCities(selectedCities);
-    }
-
-    return (
-        <div>
-            Select all <input
-                type="checkbox"
-                onClick={selectAll}
-            />
-            <ul>{cityList.map(city =>
-                <li>
-                    <label>
-                    <input
-                        type="checkbox"
-                        name="city"
-                        value={city}
-                        checked={getCities().has(city)}
-                        onClick={handleSelect}
-                    />
-                    {city}
-                    </label>
-                </li>
-                )}
-            </ul>
-        </div>
-    );
-};