diff --git a/components/cal/map.vue b/components/cal/map.vue
index 15ad0f0..b366f90 100644
--- a/components/cal/map.vue
+++ b/components/cal/map.vue
@@ -43,8 +43,8 @@ import { type Stop, stopToStopCsv } from '~/src/stop'
 import { type Route, routeToRouteCsv } from '~/src/route'
 import type { Bbox, Feature, PopupFeature, MarkerFeature } from '~/src/geom'
 import { colors, routeTypes } from '~/src/constants'
-import type { CensusGeography } from '~/src/census'
-import type { ScenarioFilterResult } from '~/src/scenario/scenario'
+import type { ScenarioConfig, ScenarioFilterResult } from '~/src/scenario/scenario'
+import type { UIConfig } from '~/pages/tne.vue'
 
 const emit = defineEmits<{
   setBbox: [value: Bbox]
@@ -54,15 +54,37 @@ const emit = defineEmits<{
 }>()
 
 const props = defineProps<{
-  bbox: Bbox
-  dataDisplayMode: string
-  colorKey: string
-  displayEditBboxMode?: boolean
-  hideUnmarked: boolean
-  censusGeographiesSelected: CensusGeography[]
+  // bbox: Bbox
+  // dataDisplayMode: string
+  // colorKey: string
+  // displayEditBboxMode?: boolean
+  // hideUnmarked: boolean
+  // censusGeographiesSelected: CensusGeography[]
   scenarioFilterResult?: ScenarioFilterResult
 }>()
 
+const scenarioConfig = defineModel<ScenarioConfig | null>('scenarioConfig')
+const uiConfig = defineModel<UIConfig>('uiConfig')
+
+const bbox = computed(() => {
+  return scenarioConfig.value?.bbox || { valid: false, ne: { lon: 0, lat: 0 }, sw: { lon: 0, lat: 0 } }
+})
+const displayEditBboxMode = computed(() => {
+  return uiConfig.value?.displayEditBboxMode || false
+})
+const dataDisplayMode = computed(() => {
+  return uiConfig.value?.dataDisplayMode || 'default'
+})
+const colorKey = computed(() => {
+  return uiConfig.value?.colorKey || 'default'
+})
+const hideUnmarked = computed(() => {
+  return uiConfig.value?.hideUnmarked || false
+})
+const censusGeographiesSelected = computed(() => {
+  return []
+})
+
 const showShareMenu = ref(false)
 const toggleShareMenu = useToggle(showShareMenu)
 
@@ -71,15 +93,15 @@ const toggleShareMenu = useToggle(showShareMenu)
 
 // Compute initial center point; do not update
 const centerPoint = {
-  lon: (props.bbox.sw.lon + props.bbox.ne.lon) / 2,
-  lat: (props.bbox.sw.lat + props.bbox.ne.lat) / 2
+  lon: (bbox.value.sw.lon + bbox.value.ne.lon) / 2,
+  lat: (bbox.value.sw.lat + bbox.value.ne.lat) / 2
 }
 
 // Polygon for drawing bbox area
 const bboxArea = computed(() => {
   const f: Feature[] = []
-  if (props.bbox.valid && props.displayEditBboxMode) {
-    const p = props.bbox
+  if (bbox.value.valid && displayEditBboxMode.value) {
+    const p = bbox.value
     const coords = [[
       [p.sw.lon, p.sw.lat],
       [p.sw.lon, p.ne.lat],
@@ -104,7 +126,7 @@ const bboxArea = computed(() => {
 const bboxMarkers = computed(() => {
   const ret: MarkerFeature[] = []
 
-  if (!props.displayEditBboxMode) {
+  if (!displayEditBboxMode.value) {
     return ret
   }
 
@@ -116,14 +138,14 @@ const bboxMarkers = computed(() => {
   swElement.appendChild(swIconElement)
 
   ret.push({
-    point: props.bbox.sw,
+    point: bbox.value.sw,
     color: '#ff0000',
     draggable: true,
     element: swElement,
     onDragEnd: (c: any) => {
       emit('setBbox', {
         valid: true,
-        ne: props.bbox.ne,
+        ne: bbox.value.ne,
         sw: {
           lon: c.target.getLngLat().lng,
           lat: c.target.getLngLat().lat,
@@ -140,14 +162,14 @@ const bboxMarkers = computed(() => {
   neElement.appendChild(neIconElement)
 
   ret.push({
-    point: props.bbox.ne,
+    point: bbox.value.ne,
     color: '#00ff00',
     draggable: true,
     element: neElement,
     onDragEnd: (c: any) => {
       emit('setBbox', {
         valid: true,
-        sw: props.bbox.sw,
+        sw: bbox.value.sw,
         ne: {
           lon: c.target.getLngLat().lng,
           lat: c.target.getLngLat().lat,
diff --git a/components/cal/query.vue b/components/cal/query.vue
index 09b1629..cbe25d7 100644
--- a/components/cal/query.vue
+++ b/components/cal/query.vue
@@ -8,7 +8,7 @@
       Specify your desired date range and geographic bounds. Then click <em>Run Query</em>.
     </tl-msg-info>
 
-    <div class="cal-body">
+    <div v-if="scenarioConfig && uiConfig" class="cal-body">
       <tl-msg-box variant="text" title="Date range">
         <o-field>
           <template #label>
@@ -17,7 +17,7 @@
               <o-icon icon="information" />
             </o-tooltip>
           </template>
-          <o-datepicker v-model="startDate" />
+          <o-datepicker v-model="scenarioConfig.startDate" />
         </o-field>
         <o-field addons>
           <template #label>
@@ -26,7 +26,7 @@
               <o-icon icon="information" />
             </o-tooltip>
           </template>
-          <o-datepicker v-if="!selectSingleDay" v-model="endDate" />
+          <o-datepicker v-if="!selectSingleDay" v-model="scenarioConfig.endDate" />
           <o-button @click="toggleSelectSingleDay()">
             {{ selectSingleDay ? 'Set an end date' : 'Remove end date' }}
           </o-button>
@@ -36,7 +36,7 @@
       <tl-msg-box variant="text" title="Geographic Bounds">
         <tl-msg-warning v-if="debugMenu" class="mt-4" style="width:400px" title="Debug menu">
           <o-field label="Preset bounding box">
-            <o-select v-model="cannedBbox">
+            <o-select v-model="uiConfig.cannedBbox">
               <option v-for="[cannedBboxName, cannedBboxDetails] of cannedBboxes.entries()" :key="cannedBboxName" :value="cannedBboxName">
                 {{ cannedBboxDetails.label }}
               </option>
@@ -48,7 +48,7 @@
           <br>
           <o-field label="Data options">
             <o-checkbox
-              v-model="scheduleEnabled"
+              v-model="scenarioConfig.scheduleEnabled"
               :true-value="true"
               :false-value="false"
             >
@@ -67,32 +67,32 @@
                 </o-tooltip>
               </template>
               <o-select
-                v-model="geomSource"
+                v-model="uiConfig.geomSource"
                 :options="geomSources"
               />
             </o-field>
           </div>
 
-          <div class="column is-half" :class="{ 'is-hidden': geomSource !== 'adminBoundary' }">
+          <div class="column is-half" :class="{ 'is-hidden': uiConfig.geomSource !== 'adminBoundary' }">
             <o-field>
               <template #label>
                 Boundary Type
               </template>
               <o-select
-                v-model="geomLayer"
-                :options="props.censusGeographyLayerOptions"
+                v-model="uiConfig.geomLayer"
+                :options="uiConfig.censusGeographyLayerOptions"
               />
             </o-field>
           </div>
         </div>
 
-        <div class="container is-max-tablet" :class="{ 'is-hidden': geomSource !== 'adminBoundary' }">
+        <div class="container is-max-tablet" :class="{ 'is-hidden': uiConfig.geomSource !== 'adminBoundary' }">
           <o-field>
             <template #label>
               Include Boundaries
             </template>
             <o-taginput
-              v-model="geographyIds"
+              v-model="scenarioConfig.geographyIds"
               v-model:input="geomSearch"
               :open-on-focus="true"
               :options="selectedGeographyTagOptions"
@@ -124,9 +124,10 @@
 <script setup lang="ts">
 import { useToggle } from '@vueuse/core'
 import { useLazyQuery } from '@vue/apollo-composable'
-import type { Bbox, Point } from '~/src/geom'
+import type { UIConfig } from '~/pages/tne.vue'
 import { cannedBboxes, geomSources } from '~/src/constants'
 import { type CensusDataset, type CensusGeography, geographySearchQuery } from '~/src/census'
+import type { ScenarioConfig } from '~/src/scenario/scenario'
 
 const emit = defineEmits([
   'setBbox',
@@ -135,34 +136,24 @@ const emit = defineEmits([
 ])
 
 const loadExampleData = async () => {
-  emit('loadExampleData', cannedBbox.value)
+  emit('loadExampleData', uiConfig.value?.cannedBbox)
 }
 
-const props = defineProps<{
-  censusGeographyLayerOptions: { label: string, value: string }[]
-  mapExtentCenter: Point | null
-}>()
+const scenarioConfig = defineModel<ScenarioConfig | null>('scenarioConfig')
+const uiConfig = defineModel<UIConfig>('uiConfig')
 
-const bbox = defineModel<Bbox>('bbox', { default: null })
-const geographyIds = defineModel<number[]>('geographyIds')
-const censusGeographiesSelected = defineModel<CensusGeography[]>('censusGeographiesSelected', { default: [] })
-const cannedBbox = defineModel<string>('cannedBbox', { default: null })
+// Local state
 const debugMenu = useDebugMenu()
-const endDate = defineModel<Date>('endDate')
-const geomLayer = defineModel<string>('geomLayer')
 const geomSearch = ref('')
-const geomSource = defineModel<string>('geomSource')
-const scheduleEnabled = defineModel<boolean>('scheduleEnabled')
 const selectSingleDay = ref(true)
-const startDate = defineModel<Date>('startDate')
 const toggleSelectSingleDay = useToggle(selectSingleDay)
 
 const geomSearchVars = computed(() => {
   return {
-    layer: geomLayer.value,
+    layer: uiConfig.value?.geomLayer,
     search: geomSearch.value,
     limit: 10,
-    focus: props.mapExtentCenter,
+    focus: uiConfig.value?.mapExtentCenter,
   }
 })
 
@@ -181,8 +172,8 @@ const {
 )
 
 watch(geomSearchVars, () => {
-  if ((geomSearch.value || '').length >= 2 && geomLayer.value) {
-    if (geomSearch.value && geomLayer.value) {
+  if ((geomSearch.value || '').length >= 2 && uiConfig.value?.geomLayer) {
+    if (geomSearch.value && uiConfig.value.geomLayer) {
       geomLoad(geographySearchQuery)
     } else {
       geomRefetch()
@@ -193,7 +184,7 @@ watch(geomSearchVars, () => {
 const selectedGeographyTagOptions = computed((): { value: number, label: string }[] => {
   // Combine both the selected geographies and the search results
   const geogs: CensusGeography[] = []
-  for (const geo of censusGeographiesSelected.value || []) {
+  for (const geo of uiConfig.value?.censusGeographiesSelected || []) {
     geogs.push({
       ...geo,
     })
@@ -232,7 +223,7 @@ const selectedGeographyTagOptions = computed((): { value: number, label: string
 /////////////////////////////////////////
 
 const validQueryParams = computed(() => {
-  return startDate.value && bbox?.value?.valid
+  return scenarioConfig?.value?.startDate && scenarioConfig?.value?.bbox
 })
 </script>
 
diff --git a/pages/tne.vue b/pages/tne.vue
index 443e52c..3b5761d 100644
--- a/pages/tne.vue
+++ b/pages/tne.vue
@@ -56,64 +56,33 @@
       <div style="position:relative">
         <div v-if="activeTab.tab === 'query'" class="cal-overlay">
           <cal-query
-            v-model:start-date="startDate"
-            v-model:end-date="endDate"
-            v-model:geom-source="geomSource"
-            v-model:geom-layer="geomLayer"
-            v-model:schedule-enabled="scheduleEnabled"
-            v-model:geography-ids="geographyIds"
-            v-model:canned-bbox="cannedBbox"
-            :census-geography-layer-options="censusGeographyLayerOptions"
-            :bbox="bbox"
-            :map-extent-center="mapExtentCenter"
-            :census-geographies-selected="censusGeographiesSelected"
-            @set-bbox="bbox = $event"
+            v-model:scenario-config="scenarioConfig"
+            v-model:scenario-filter="scenarioFilter"
+            v-model:ui-config="uiConfig"
             @explore="runQuery()"
             @load-example-data="loadExampleData"
           />
         </div>
 
         <div v-if="activeTab.tab === 'filter'" class="cal-overlay">
-          <cal-filter
-            v-model:start-date="startDate"
-            v-model:end-date="endDate"
-            v-model:start-time="startTime"
-            v-model:end-time="endTime"
-            v-model:base-map="baseMap"
-            v-model:data-display-mode="dataDisplayMode"
-            v-model:color-key="colorKey"
-            v-model:unit-system="unitSystem"
-            v-model:hide-unmarked="hideUnmarked"
-            v-model:selected-days="selectedDays"
-            v-model:selected-route-types="selectedRouteTypes"
-            v-model:selected-agencies="selectedAgencies"
-            v-model:selected-day-of-week-mode="selectedDayOfWeekMode"
-            v-model:selected-time-of-day-mode="selectedTimeOfDayMode"
-            v-model:frequency-under-enabled="frequencyUnderEnabled"
-            v-model:frequency-under="frequencyUnder"
-            v-model:frequency-over-enabled="frequencyOverEnabled"
-            v-model:frequency-over="frequencyOver"
-            v-model:calculate-frequency-mode="calculateFrequencyMode"
-            v-model:max-fare-enabled="maxFareEnabled"
-            v-model:max-fare="maxFare"
-            v-model:min-fare-enabled="minFareEnabled"
-            v-model:min-fare="minFare"
+          <!-- <cal-filter
+            v-model:scenario-config="scenarioConfig"
+            v-model:scenario-filter="scenarioFilter"
+            v-model:ui-config="uiConfig"
             :scenario-filter-result="scenarioFilterResult"
             :active-tab="activeTab.sub"
             @reset-filters="resetFilters"
-          />
+          /> -->
         </div>
 
         <div v-if="activeTab.tab === 'report'" class="cal-overlay">
-          <cal-report
-            v-model:data-display-mode="dataDisplayMode"
-            v-model:aggregate-mode="geomLayer"
-            :census-geography-layer-options="censusGeographyLayerOptions"
-            :scenario-filter-result="scenarioFilterResult"
-            :export-features="exportFeatures"
-            :filter-summary="filterSummary"
+          <!-- <cal-report
+            v-model:ui-config="uiConfig"
+            v-model:scenario-config="scenarioConfig"
+            v-model:scenario-filter="scenarioFilter"
+            v-model:scenario-filter-result="scenarioFilterResult"
             @click-filter-link="setTab({ tab: 'filter', sub: 'data-display' })"
-          />
+          /> -->
         </div>
 
         <div v-if="activeTab.tab === 'analysis'" class="cal-overlay">
@@ -127,16 +96,10 @@
 
         <!-- This is a component for displaying the map and legend -->
         <cal-map
-          :bbox="bbox"
-          :census-geographies-selected="censusGeographiesSelected"
-          :scenario-filter-result="scenarioFilterResult"
-          :display-edit-bbox-mode="displayEditBboxMode"
-          :data-display-mode="dataDisplayMode"
-          :color-key="colorKey"
-          :hide-unmarked="hideUnmarked"
-          @set-bbox="bbox = $event"
-          @set-map-extent="setMapExtent"
-          @set-export-features="exportFeatures = $event"
+          v-model:ui-config="uiConfig"
+          v-model:scenario-config="scenarioConfig"
+          v-model:scenario-filter="scenarioFilter"
+          v-model:scenario-filter-result="scenarioFilterResult"
         />
       </div>
 
@@ -158,19 +121,37 @@
   </NuxtLayout>
 </template>
 
+<script lang="ts">
+</script>
+
 <script lang="ts" setup>
-import { computed } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
 import { navigateTo } from '#imports'
 import { type CensusDataset, type CensusGeography, geographyLayerQuery } from '~/src/census'
-import { type Bbox, type Point, type Feature, parseBbox, bboxString } from '~/src/geom'
+import { type Bbox, type Point, parseBbox, bboxString } from '~/src/geom'
 import { fmtDate, fmtTime, parseDate, parseTime, getLocalDateNoTime } from '~/src/datetime'
 import { type dow, dowValues, routeTypes, cannedBboxes } from '~/src/constants'
-import type { ScenarioConfig, ScenarioData, ScenarioFilter, ScenarioFilterResult } from '~/src/scenario/scenario'
+import type { ScenarioData, ScenarioFilterResult } from '~/src/scenario/scenario'
 import { applyScenarioResultFilter } from '~/src/scenario/scenario'
 import { ScenarioStreamReceiver } from '~/src/scenario/scenario-streamer'
 import { ScenarioDataReceiver, type ScenarioProgress } from '~/src/scenario/scenario-fetcher'
 
+// User interface configuration values
+export interface UIConfig {
+  cannedBbox: string
+  mapExtentCenter: Point | null
+  geomSource: string
+  geomLayer: string
+  unitSystem: string
+  dataDisplayMode: string
+  colorKey: string
+  baseMap: string
+  hideUnmarked: boolean
+  censusGeographyLayerOptions: { value: string, label: string }[]
+  censusGeographiesSelected: CensusGeography[]
+  displayEditBboxMode: boolean
+}
+
 definePageMeta({
   layout: false
 })
@@ -182,8 +163,6 @@ const route = useRoute()
 /////////////////
 
 const runCount = ref(0)
-const scheduleEnabled = ref(true)
-const cannedBbox = ref('downtown-portland')
 const error = ref(null)
 
 // Runs on explore event from query (when user clicks "Run Query")
@@ -193,172 +172,114 @@ function runQuery () {
   fetchScenario('')
 }
 
-const geomSource = computed({
-  get () {
-    return route.query.geomSource?.toString() || 'bbox'
-  },
-  set (v: string) {
-    setQuery({ ...route.query, geomSource: v })
-  }
-})
-
-const geomLayer = computed({
-  get () {
-    return route.query.geomLayer ? route.query.geomLayer?.toString() : 'place'
+// Replace the individual computed properties with a single reactive config object
+const scenarioConfig = reactive({
+  get bbox () {
+    const defaultBbox = cannedBboxes.get(uiConfig.cannedBbox)?.bboxString || ''
+    const bbox = route.query.bbox?.toString() ?? defaultBbox
+    return parseBbox(bbox)
   },
-  set (v: string) {
-    setQuery({ ...route.query, geomLayer: v })
-  }
-})
-
-const geographyIds = computed({
-  get () {
-    return route.query.geographyIds?.toString().split(',').map(p => (parseInt(p))) || []
+  set bbox (v: Bbox) {
+    setQuery({ ...route.query, bbox: bboxString(v) })
   },
-  set (v: number[]) {
-    setQuery({ ...route.query, geographyIds: v.map(String).join(',') })
-  }
-})
 
-const startDate = computed({
-  get () {
+  get startDate () {
     return parseDate(route.query.startDate?.toString() || '') || getLocalDateNoTime()
   },
-  set (v: Date) {
+  set startDate (v: Date) {
     setQuery({ ...route.query, startDate: fmtDate(v) })
-  }
-})
+  },
 
-const endDate = computed({
-  get () {
+  get endDate () {
     if (route.query?.endDate) {
       return parseDate(route.query.endDate?.toString() || '') || getLocalDateNoTime()
     }
-    const n = new Date(startDate.value.valueOf())
+    const n = new Date(this.startDate.valueOf())
     n.setDate(n.getDate() + 6)
     return n
   },
-  set (v: Date) {
+  set endDate (v: Date) {
     setQuery({ ...route.query, endDate: fmtDate(v) })
-  }
-})
-
-const startTime = computed({
-  get () {
-    return parseTime(route.query.startTime?.toString() || '') || parseTime('00:00:00')
   },
-  set (v: Date | undefined) {
-    setQuery({ ...route.query, startTime: fmtTime(v) })
-  }
-})
 
-const endTime = computed({
-  get () {
-    return parseTime(route.query.endTime?.toString() || '') || parseTime('23:59:00')
+  get scheduleEnabled () {
+    return true
   },
-  set (v: Date | undefined) {
-    setQuery({ ...route.query, endTime: fmtTime(v) })
-  }
-})
-
-const bbox = computed({
-  get () {
-    const defaultBbox = cannedBboxes.get(cannedBbox.value)?.bboxString || ''
-    const bbox = route.query.bbox?.toString() ?? defaultBbox
-    return parseBbox(bbox)
+  set scheduleEnabled (v: boolean) {
+    // scheduleEnabled.value = v
   },
-  set (v: Bbox) {
-    setQuery({ ...route.query, bbox: bboxString(v) })
-  }
-})
 
-const unitSystem = computed({
-  get () {
-    return route.query.unitSystem?.toString() || 'us'
+  get geographyIds () {
+    return route.query.geographyIds?.toString().split(',').map(p => (parseInt(p))) || []
   },
-  set (v: string) {
-    setQuery({ ...route.query, unitSystem: v })
-  }
-})
-
-const hideUnmarked = computed({
-  get () {
-    return route.query.hideUnmarked?.toString() === 'true'
+  set geographyIds (v: number[]) {
+    setQuery({ ...route.query, geographyIds: v.map(String).join(',') })
   },
-  set (v: boolean) {
-    setQuery({ ...route.query, hideUnmarked: v ? 'true' : '' })
-  }
-})
 
-const dataDisplayMode = computed({
-  get () {
-    return route.query.dataDisplayMode?.toString() || 'Route'
+  get geomSource () {
+    return route.query.geomSource?.toString() || 'bbox'
+  },
+  set geomSource (v: string) {
+    setQuery({ ...route.query, geomSource: v })
   },
-  set (v: string) {
-    setQuery({ ...route.query, dataDisplayMode: v })
-  }
-})
 
-const colorKey = computed({
-  get () {
-    return route.query.colorKey?.toString() || 'Mode'
+  get geomLayer () {
+    return route.query.geomLayer ? route.query.geomLayer?.toString() : 'place'
+  },
+  set geomLayer (v: string) {
+    setQuery({ ...route.query, geomLayer: v })
   },
-  set (v: string) {
-    setQuery({ ...route.query, colorKey: v })
-  }
-})
 
-const baseMap = computed({
-  get () {
-    return route.query.baseMap?.toString() || 'Streets'
+  get stopLimit () {
+    return parseInt(route.query.stopLimit?.toString() || '') || 100
   },
-  set (v: string) {
-    setQuery({ ...route.query, baseMap: v })
+  set stopLimit (v: number) {
+    setQuery({ ...route.query, stopLimit: v.toString() })
   }
 })
 
-const selectedDayOfWeekMode = computed({
-  get () {
+const scenarioFilter = reactive({
+  get startTime () {
+    return parseTime(route.query.startTime?.toString() || '') || parseTime('00:00:00')
+  },
+  set startTime (v: Date | undefined) {
+    setQuery({ ...route.query, startTime: fmtTime(v) })
+  },
+  get endTime () {
+    return parseTime(route.query.endTime?.toString() || '') || parseTime('23:59:00')
+  },
+  set endTime (v: Date | undefined) {
+    setQuery({ ...route.query, endTime: fmtTime(v) })
+  },
+  get selectedDayOfWeekMode () {
     return route.query.selectedDayOfWeekMode?.toString() || 'Any'
   },
-  set (v: string) {
+  set selectedDayOfWeekMode (v: string) {
     setQuery({ ...route.query, selectedDayOfWeekMode: v === 'Any' ? '' : v })
-  }
-})
-
-const selectedTimeOfDayMode = computed({
-  get () {
+  },
+  get selectedTimeOfDayMode () {
     return route.query.selectedTimeOfDayMode?.toString() || 'All'
   },
-  set (v: string) {
+  set selectedTimeOfDayMode (v: string) {
     setQuery({ ...route.query, selectedTimeOfDayMode: v === 'All' ? '' : v })
-  }
-})
-
-const selectedRouteTypes = computed({
-  get (): number[] {
+  },
+  get selectedRouteTypes (): number[] {
     const d = arrayParam('selectedRouteTypes', [])
     if (d.length) {
       return d.map(p => parseInt(p))
     }
     return Array.from(routeTypes.keys())
   },
-  set (v: string[]) {
+  set selectedRouteTypes (v: string[]) {
     setQuery({ ...route.query, selectedRouteTypes: v.join(',') })
-  }
-})
-
-const selectedAgencies = computed({
-  get (): string[] {
+  },
+  get selectedAgencies (): string[] {
     return arrayParam('selectedAgencies', [])
   },
-  set (v: string[]) {
+  set selectedAgencies (v: string[]) {
     setQuery({ ...route.query, selectedAgencies: v.join(',') })
-  }
-})
-
-const selectedDays = computed({
-  get (): dow[] {
+  },
+  get selectedDays (): dow[] {
     if (!Object.prototype.hasOwnProperty.call(route.query, 'selectedDays')) {
       // if no `selectedDays` param present, check them all
       return dowValues.slice()
@@ -366,92 +287,139 @@ const selectedDays = computed({
       return arrayParam('selectedDays', []) as dow[]
     }
   },
-  set (v: string[]) {
+  set selectedDays (v: string[]) {
     // if all days are checked, just omit the param
     const days = new Set(v)
     const omit = dowValues.every(day => days.has(day))
     setQuery({ ...route.query, selectedDays: omit ? '' : v.join(',') })
-  }
-})
-
-const frequencyUnderEnabled = computed({
-  get () {
+  },
+  get frequencyUnderEnabled () {
     return route.query.frequencyUnderEnabled?.toString() === 'true'
   },
-  set (v: boolean) {
+  set frequencyUnderEnabled (v: boolean) {
     setQuery({ ...route.query, frequencyUnderEnabled: v ? 'true' : '' })
-  }
-})
-
-const frequencyUnder = computed({
-  get () {
+  },
+  get frequencyUnder () {
     return parseInt(route.query.frequencyUnder?.toString() || '') || 15
   },
-  set (v: number) {
+  set frequencyUnder (v: number) {
     setQuery({ ...route.query, frequencyUnder: v.toString() })
-  }
-})
-
-const frequencyOverEnabled = computed({
-  get () {
+  },
+  get frequencyOverEnabled () {
     return route.query.frequencyOverEnabled?.toString() === 'true'
   },
-  set (v: boolean) {
+  set frequencyOverEnabled (v: boolean) {
     setQuery({ ...route.query, frequencyOverEnabled: v ? 'true' : '' })
-  }
-})
-
-const frequencyOver = computed({
-  get () {
+  },
+  get frequencyOver () {
     return parseInt(route.query.frequencyOver?.toString() || '') || 15
   },
-  set (v: number) {
+  set frequencyOver (v: number) {
     setQuery({ ...route.query, frequencyOver: v.toString() })
-  }
-})
-
-const calculateFrequencyMode = computed({
-  get () {
+  },
+  get calculateFrequencyMode () {
     return route.query.calculateFrequencyMode?.toString() === 'true'
   },
-  set (v: boolean) {
+  set calculateFrequencyMode (v: boolean) {
     setQuery({ ...route.query, calculateFrequencyMode: v ? 'true' : '' })
-  }
-})
-
-const maxFareEnabled = computed({
-  get () {
+  },
+  get maxFareEnabled () {
     return route.query.maxFareEnabled?.toString() === 'true'
   },
-  set (v: boolean) {
+  set maxFareEnabled (v: boolean) {
     setQuery({ ...route.query, maxFareEnabled: v ? 'true' : '' })
-  }
-})
-
-const maxFare = computed({
-  get () {
+  },
+  get maxFare () {
     return parseInt(route.query.maxFare?.toString() || '') || 0
   },
-  set (v: number) {
+  set maxFare (v: number) {
     setQuery({ ...route.query, maxFare: v.toString() })
-  }
-})
-
-const minFareEnabled = computed({
-  get () {
+  },
+  get  minFareEnabled () {
     return route.query.minFareEnabled?.toString() === 'true'
   },
-  set (v: string) {
+  set minFareEnabled (v: boolean) {
     setQuery({ ...route.query, minFareEnabled: v ? 'true' : '' })
+  },
+  get minFare () {
+    return parseInt(route.query.minFare?.toString() || '') || 0
+  },
+  set minFare (v: number) {
+    setQuery({ ...route.query, minFare: v.toString() })
   }
 })
 
-const minFare = computed({
-  get () {
-    return parseInt(route.query.minFare?.toString() || '') || 0
+const uiConfig = reactive({
+  get geomSource () {
+    return route.query.geomSource?.toString() || 'bbox'
   },
-  set (v: string) {
-    setQuery({ ...route.query, minFare: v.toString() })
+  set geomSource (v: string) {
+    setQuery({ ...route.query, geomSource: v })
+  },
+  get geomLayer () {
+    return route.query.geomLayer ? route.query.geomLayer?.toString() : 'place'
+  },
+  set geomLayer (v: string) {
+    setQuery({ ...route.query, geomLayer: v })
+  },
+  get unitSystem () {
+    return route.query.unitSystem?.toString() || 'us'
+  },
+  set unitSystem (v: string) {
+    setQuery({ ...route.query, unitSystem: v })
+  },
+  get dataDisplayMode () {
+    return route.query.dataDisplayMode?.toString() || 'Route'
+  },
+  set dataDisplayMode (v: string) {
+    setQuery({ ...route.query, dataDisplayMode: v })
+  },
+  get colorKey () {
+    return route.query.colorKey?.toString() || 'Mode'
+  },
+  set colorKey (v: string) {
+    setQuery({ ...route.query, colorKey: v })
+  },
+  get baseMap () {
+    return route.query.baseMap?.toString() || 'Streets'
+  },
+  set baseMap (v: string) {
+    setQuery({ ...route.query, baseMap: v })
+  },
+  get hideUnmarked () {
+    return route.query.hideUnmarked?.toString() === 'true'
+  },
+  set hideUnmarked (v: boolean) {
+    setQuery({ ...route.query, hideUnmarked: v ? 'true' : '' })
+  },
+  get censusGeographyLayerOptions () {
+    const geomDatasets = censusGeographyResult.value?.census_datasets || []
+    const options = []
+    for (const ds of geomDatasets || []) {
+      for (const layer of ds.layers || []) {
+        const label = `${ds.description || ds.name}: ${layer.description || layer.name}`
+        options.push({ value: layer.name, label: label })
+      }
+    }
+    return options
+  },
+  get censusGeographiesSelected () {
+    const ret: CensusGeography[] = []
+    for (const ds of censusGeographyResult.value?.census_datasets || []) {
+      for (const geo of ds.geographies || []) {
+        ret.push(geo)
+      }
+    }
+    return ret
+  },
+  get cannedBbox () {
+    return route.query.cannedBbox?.toString() || 'downtown-portland'
+  },
+  set cannedBbox (v: string) {
+    setQuery({ ...route.query, cannedBbox: v })
+  },
+  get mapExtentCenter () {
+    return { lon: -122, lat: 37 } as Point | null
   }
 })
 
@@ -464,33 +432,11 @@ const {
 } = useQuery<{ census_datasets: CensusDataset[] }>(
   geographyLayerQuery,
   () => ({
-    geography_ids: geographyIds.value,
-    include_geographies: geographyIds.value.length > 0,
+    geography_ids: scenarioConfig.geographyIds,
+    include_geographies: scenarioConfig.geographyIds.length > 0,
   })
 )
 
-const censusGeographyLayerOptions = computed(() => {
-  const geomDatasets = censusGeographyResult.value?.census_datasets || []
-  const options = []
-  for (const ds of geomDatasets || []) {
-    for (const layer of ds.layers || []) {
-      const label = `${ds.description || ds.name}: ${layer.description || layer.name}`
-      options.push({ value: layer.name, label: label })
-    }
-  }
-  return options
-})
-
-const censusGeographiesSelected = computed((): CensusGeography[] => {
-  const ret: CensusGeography[] = []
-  for (const ds of censusGeographyResult.value?.census_datasets || []) {
-    for (const geo of ds.geographies || []) {
-      ret.push(geo)
-    }
-  }
-  return ret
-})
-
 /////////////////////////
 // Event passing
 /////////////////////////
@@ -498,8 +444,8 @@ const censusGeographiesSelected = computed((): CensusGeography[] => {
 // Tab handling
 const activeTab = ref({ tab: 'query', sub: '' })
 
-watch([activeTab, geomSource], () => {
-  if (activeTab.value.tab === 'query' && geomSource.value === 'bbox') {
+watch([activeTab, uiConfig.geomSource], () => {
+  if (activeTab.value.tab === 'query' && uiConfig.geomSource === 'bbox') {
     displayEditBboxMode.value = true
   } else {
     displayEditBboxMode.value = false
@@ -522,69 +468,13 @@ function setTab (v: Tab) {
   activeTab.value = v
 }
 
-/////////////////////////////
-// Other setters
-/////////////////////////////
-
-// We need to keep reference to the map extent
-const mapExtent = ref<Bbox | null>(null)
-
-const mapExtentCenter = computed((): Point | null => {
-  const bbox = mapExtent.value
-  if (bbox?.valid) {
-    return {
-      lon: (bbox.ne.lon + bbox.sw.lon) / 2,
-      lat: (bbox.ne.lat + bbox.sw.lat) / 2
-    }
-  }
-  return null
-})
-
-watch(geomSource, () => {
-  if (geomSource.value === 'mapExtent' && mapExtent.value) {
-    bbox.value = mapExtent.value
-  }
-})
-
-async function setMapExtent (v: Bbox) {
-  mapExtent.value = v
-  if (geomSource.value === 'mapExtent') {
-    bbox.value = mapExtent.value
-  }
-}
-
 ////////////////////////////
 // Scenario
 ////////////////////////////
 
-// Computed properties for config and filter to avoid duplication
-const scenarioConfig = computed((): ScenarioConfig => ({
-  bbox: bbox.value,
-  scheduleEnabled: scheduleEnabled.value,
-  startDate: startDate.value,
-  endDate: endDate.value,
-  geographyIds: geographyIds.value,
-  stopLimit: 100
-}))
-
-const scenarioFilter = computed((): ScenarioFilter => ({
-  startTime: startTime.value,
-  endTime: endTime.value,
-  selectedRouteTypes: selectedRouteTypes.value || [],
-  selectedDays: selectedDays.value || [],
-  selectedAgencies: selectedAgencies.value || [],
-  selectedDayOfWeekMode: selectedDayOfWeekMode.value || '',
-  selectedTimeOfDayMode: '', // Not used in the original component
-  frequencyUnder: frequencyUnder.value,
-  frequencyOver: frequencyOver.value,
-  frequencyUnderEnabled: frequencyUnderEnabled.value || false,
-  frequencyOverEnabled: frequencyOverEnabled.value || false
-}))
-
 // Internal state for streaming scenario data
 const scenarioData = ref<ScenarioData | null>(null)
 const scenarioFilterResult = ref<ScenarioFilterResult | undefined>(undefined)
-const exportFeatures = shallowRef<Feature[]>([])
 
 // Loading progress tracking for modal
 const loadingProgress = ref<ScenarioProgress | null>(null)
@@ -600,7 +490,7 @@ const loadExampleData = async (exampleName: string) => {
 // Scenario fetching logic
 const fetchScenario = async (loadExample: string) => {
   console.log('fetchScenario:', loadExample)
-  const config = scenarioConfig.value
+  const config = scenarioConfig
   if (!loadExample && !config.bbox && (!config.geographyIds || config.geographyIds.length === 0)) {
     return // Need either bbox or geography IDs, unless loading example
   }
@@ -675,7 +565,7 @@ const fetchScenario = async (loadExample: string) => {
 // Apply filters and emit results when data or filters change
 watch(() => [
   scenarioData.value,
-  scenarioFilter.value,
+  scenarioFilter,
 ], () => {
   if (!scenarioData.value) {
     return
@@ -689,90 +579,90 @@ watch(() => [
 
 // Each result in the filter summary will be a string to be used as a bullet point.
 // We will only include results if the filter is set to something interesting (not default)
-const filterSummary = computed((): string[] => {
-  // const mode = dataDisplayMode.value
-  const results: string[] = []
-
-  // route types
-  const rtypes = scenarioFilter.value.selectedRouteTypes.map(val => toTitleCase(routeTypes.get(val) || '')).filter(Boolean)
-  if (rtypes.length !== routeTypes.size) {
-    results.push('with route types ' + rtypes.join(', '))
-  }
-
-  // agencies
-  const agencies = scenarioFilter.value.selectedAgencies
-  if (agencies.length) {
-    results.push('operated by ' + agencies.join(', '))
-  }
-
-  // date range
-  const today = fmtDate(getLocalDateNoTime(), 'P')
-  const sdate = fmtDate(scenarioConfig.value.startDate, 'P') || today
-  const edate = fmtDate(scenarioConfig.value.endDate, 'P') || today
-  if (sdate !== today && edate !== today && sdate !== edate) {
-    results.push('operating between ' + sdate + ' and ' + edate)
-  } else if (sdate !== today && edate !== today && sdate === edate) {
-    results.push('operating on ' + sdate)
-  } else if (sdate !== today && edate === today) {
-    results.push('operating after ' + sdate)
-  }
-
-  // days of week  (always show something here)
-  const days = scenarioFilter.value.selectedDays.map(val => toTitleCase(val))
-  const dowMode = scenarioFilter.value.selectedDayOfWeekMode
-  if (dowMode === 'All' /* && days.length !== 7 */) {
-    results.push('operating all of ' + days.join(', '))
-  } else if (dowMode === 'Any') {
-    results.push('operating any of ' + days.join(', '))
-  }
-
-  // time range
-  if (scenarioFilter.value.selectedTimeOfDayMode !== 'All') {
-    const stime = fmtTime(scenarioFilter.value.startTime, 'p')
-    const etime = fmtTime(scenarioFilter.value.endTime, 'p')
-    if (stime && etime && stime !== etime) {
-      results.push('operating between ' + stime + ' and ' + etime)
-    } else if (stime && etime && stime === etime) {
-      results.push('operating at ' + stime)
-    } else if (stime && !etime) {
-      results.push('operating after ' + stime)
-    } else if (etime && !stime) {
-      results.push('operating before ' + etime)
-    }
-  }
-
-  // frequencies
-  const hasMinFreq = scenarioFilter.value.frequencyOverEnabled
-  const minFreq = scenarioFilter.value.frequencyOver
-  const hasMaxFreq = scenarioFilter.value.frequencyUnderEnabled
-  const maxFreq = scenarioFilter.value.frequencyUnder
-  if (hasMinFreq && hasMaxFreq && minFreq !== maxFreq) {
-    results.push('with frequency between ' + minFreq + ' and ' + maxFreq + ' minutes')
-  } else if (hasMinFreq && hasMaxFreq && minFreq === maxFreq) {
-    results.push('with frequency exactly ' + minFreq + ' minutes')
-  } else if (hasMinFreq && !hasMaxFreq) {
-    results.push('with frequency at least ' + minFreq + ' minutes')
-  } else if (hasMaxFreq && !hasMinFreq) {
-    results.push('with frequency less than ' + maxFreq + ' minutes')
-  }
-
-  // fares
-  const hasMinFare = minFareEnabled.value
-  const minDollar = minFare.value
-  const hasMaxFare = maxFareEnabled.value
-  const maxDollar = maxFare.value
-  if (hasMinFare && hasMaxFare && minDollar !== maxDollar) {
-    results.push('with fare between $' + minDollar + ' and $' + maxDollar)
-  } else if (hasMinFare && hasMaxFare && minDollar === maxDollar) {
-    results.push('with fare exactly $' + minDollar)
-  } else if (hasMinFare && !hasMaxFare) {
-    results.push('with fare at least $' + minDollar)
-  } else if (hasMaxFare && !hasMinFare) {
-    results.push('with fare less than $' + maxDollar)
-  }
-
-  return results
-})
+// const filterSummary = computed((): string[] => {
+//   // const mode = dataDisplayMode.value
+//   const results: string[] = []
+
+//   // route types
+//   const rtypes = scenarioFilter.value.selectedRouteTypes.map(val => toTitleCase(routeTypes.get(val) || '')).filter(Boolean)
+//   if (rtypes.length !== routeTypes.size) {
+//     results.push('with route types ' + rtypes.join(', '))
+//   }
+
+//   // agencies
+//   const agencies = scenarioFilter.value.selectedAgencies
+//   if (agencies.length) {
+//     results.push('operated by ' + agencies.join(', '))
+//   }
+
+//   // date range
+//   const today = fmtDate(getLocalDateNoTime(), 'P')
+//   const sdate = fmtDate(scenarioConfig.value.startDate, 'P') || today
+//   const edate = fmtDate(scenarioConfig.value.endDate, 'P') || today
+//   if (sdate !== today && edate !== today && sdate !== edate) {
+//     results.push('operating between ' + sdate + ' and ' + edate)
+//   } else if (sdate !== today && edate !== today && sdate === edate) {
+//     results.push('operating on ' + sdate)
+//   } else if (sdate !== today && edate === today) {
+//     results.push('operating after ' + sdate)
+//   }
+
+//   // days of week  (always show something here)
+//   const days = scenarioFilter.value.selectedDays.map(val => toTitleCase(val))
+//   const dowMode = scenarioFilter.value.selectedDayOfWeekMode
+//   if (dowMode === 'All' /* && days.length !== 7 */) {
+//     results.push('operating all of ' + days.join(', '))
+//   } else if (dowMode === 'Any') {
+//     results.push('operating any of ' + days.join(', '))
+//   }
+
+//   // time range
+//   if (scenarioFilter.value.selectedTimeOfDayMode !== 'All') {
+//     const stime = fmtTime(scenarioFilter.value.startTime, 'p')
+//     const etime = fmtTime(scenarioFilter.value.endTime, 'p')
+//     if (stime && etime && stime !== etime) {
+//       results.push('operating between ' + stime + ' and ' + etime)
+//     } else if (stime && etime && stime === etime) {
+//       results.push('operating at ' + stime)
+//     } else if (stime && !etime) {
+//       results.push('operating after ' + stime)
+//     } else if (etime && !stime) {
+//       results.push('operating before ' + etime)
+//     }
+//   }
+
+//   // frequencies
+//   const hasMinFreq = scenarioFilter.value.frequencyOverEnabled
+//   const minFreq = scenarioFilter.value.frequencyOver
+//   const hasMaxFreq = scenarioFilter.value.frequencyUnderEnabled
+//   const maxFreq = scenarioFilter.value.frequencyUnder
+//   if (hasMinFreq && hasMaxFreq && minFreq !== maxFreq) {
+//     results.push('with frequency between ' + minFreq + ' and ' + maxFreq + ' minutes')
+//   } else if (hasMinFreq && hasMaxFreq && minFreq === maxFreq) {
+//     results.push('with frequency exactly ' + minFreq + ' minutes')
+//   } else if (hasMinFreq && !hasMaxFreq) {
+//     results.push('with frequency at least ' + minFreq + ' minutes')
+//   } else if (hasMaxFreq && !hasMinFreq) {
+//     results.push('with frequency less than ' + maxFreq + ' minutes')
+//   }
+
+//   // fares
+//   const hasMinFare = minFareEnabled.value
+//   const minDollar = minFare.value
+//   const hasMaxFare = maxFareEnabled.value
+//   const maxDollar = maxFare.value
+//   if (hasMinFare && hasMaxFare && minDollar !== maxDollar) {
+//     results.push('with fare between $' + minDollar + ' and $' + maxDollar)
+//   } else if (hasMinFare && hasMaxFare && minDollar === maxDollar) {
+//     results.push('with fare exactly $' + minDollar)
+//   } else if (hasMinFare && !hasMaxFare) {
+//     results.push('with fare at least $' + minDollar)
+//   } else if (hasMaxFare && !hasMinFare) {
+//     results.push('with fare less than $' + maxDollar)
+//   }
+
+//   return results
+// })
 
 //////////////////////
 // Helpers