Fix authenticated City Analysis queries

web/src/css/Result.css

@@ -10,6 +10,10 @@
   margin: 0;
 }
 
+.queryError {
+  margin-top: 16px;
+}
+
 .grid-view {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

web/src/pages/cities/result/QueryView.tsx

@@ -1,5 +1,5 @@
 import moment from 'moment'
-import { Accessor, Component, createResource, createSignal } from "solid-js";
+import { Accessor, Component, createResource, createSignal, Show } from "solid-js";
 
 import "../../../css/Result.css"
 import { FETCH_DELAY_MS, apiHost } from "../../../consts";
@@ -20,12 +20,47 @@ export const QueryView: Component<{
     const queryEnd = () => moment(props.getEnd()).format("YYYYMMDD_HHmm"); 
     const [getTimestamp, setTimestamp] = createSignal<number>(0);
 
-    const fetchQuery = async (timestamp: number) => {
+    const fetchQuery = async (_timestamp: number) => {
         if (cities() === "") return undefined;
         await new Promise(resolve => setTimeout(resolve, FETCH_DELAY_MS))
-        const response = await fetch(`${apiHost}/api/query/city/${cities()}/${queryStart()}-${queryEnd()}/${props.getGranularity()}/${props.getField()}/${props.getKey()}`);
-        const json = await response.json();
-        return json;
+
+        const controller = new AbortController();
+        const timeout = window.setTimeout(() => controller.abort(), 30_000);
+
+        try {
+            const response = await fetch(
+                `${apiHost}/api/query/city/${cities()}/${queryStart()}-${queryEnd()}/${props.getGranularity()}/${props.getField()}/${props.getKey()}`,
+                {
+                    credentials: "same-origin",
+                    headers: { Accept: "application/json" },
+                    signal: controller.signal,
+                },
+            );
+
+            if (response.status === 401 || response.status === 403 || response.redirected) {
+                throw new Error("Your login session has expired. Refresh the page and sign in again.");
+            }
+            if (!response.ok) {
+                throw new Error(`The query failed (HTTP ${response.status}). Please try again.`);
+            }
+
+            const contentType = response.headers.get("content-type") ?? "";
+            if (!contentType.includes("application/json")) {
+                throw new Error("The server returned an unexpected response. Refresh the page and sign in again.");
+            }
+
+            return await response.json();
+        } catch (error) {
+            if (error instanceof DOMException && error.name === "AbortError") {
+                throw new Error("The query took too long. Please try again.");
+            }
+            if (error instanceof TypeError) {
+                throw new Error("Could not reach the data service. Refresh the page and try again.");
+            }
+            throw error;
+        } finally {
+            window.clearTimeout(timeout);
+        }
     }
 
     const [queryResource] = createResource(getTimestamp, fetchQuery);
@@ -40,12 +75,17 @@ export const QueryView: Component<{
                 onClick={() => setTimestamp(Date.now())}
             />
             { queryResource.loading && <LoadingSpinner text="Loading query" /> }
-            { queryResource.error && (
-                <div>Error while querying: ${queryResource.error}</div>
-            )}
+            <Show when={queryResource.error}>
+                <div class="emptyState queryError" role="alert">
+                    <strong>Could not load city data</strong>
+                    <span>{queryResource.error instanceof Error ? queryResource.error.message : "Please try again."}</span>
+                </div>
+            </Show>
             { cities() === "" && <div class="emptyState"><strong>Select at least one city</strong><span>Your results and map options will appear here after you choose cities and run the query.</span></div> }
             { queryResource() && isQueryResult( queryResource() ) &&
-                <ResultView result={queryResource} />
+                (Object.keys(queryResource()!.result).length > 0
+                    ? <ResultView result={queryResource} />
+                    : <div class="emptyState"><strong>No observations found</strong><span>Choose a time range covered by the available data and run the query again.</span></div>)
             }
         </div>
     );