Add dashboard UI foundation and map export workflow

web/src/pages/cities/Cities.tsx

@@ -21,12 +21,15 @@ export function Cities() {
     const [getGranularity, setGranularity] = createSignal("hour");
 
     return (
-        <div class="aggregator">
+        <div class="aggregator pageWorkspace">
+            <div class="pageHeading"><div><span class="eyebrow">Historical observations</span><h1>City analysis</h1><p>Choose stations and a calculation, then compare results or prepare a map graphic.</p></div><div class="selectionCount">{getCities().size} cities selected</div></div>
             <div class="container">
-                <div class="column">
+                <aside class="column panel cityPanel">
+                    <h2>1. Choose cities</h2>
                     <SelectCity getCities={getCities} setCities={setCities} />
-                </div>
-                <div class="column">
+                </aside>
+                <aside class="column panel queryPanel">
+                    <h2>2. Configure query</h2>
                     <div>
                         <SelectTimeRange
                             getStart={getStart}
@@ -43,8 +46,8 @@ export function Cities() {
                         <SelectKey getKey={getKey} setKey={setKey} />
                         <SelectGranularity getGranularity={getGranularity} setGranularity={setGranularity} />
                     </div>
-                </div>
-                <div class="column">
+                </aside>
+                <section class="column resultsPanel">
                     <QueryView
                         getCities={getCities}
                         getStart={getStart}
@@ -53,8 +56,8 @@ export function Cities() {
                         getKey={getKey}
                         getGranularity={getGranularity}
                     />
-                </div>
+                </section>
             </div>
         </div>
     );
-}
+}