@redus/georedus-ui 0.2.0 → 0.3.0

package/dist/main.js

@@ -7,33 +7,33 @@ import { mdiHelpCircleOutline, mdiDownload, mdiDotsVertical, mdiOpacity, mdiFilt
 import { Tabs, Tooltip, IconButton, Theme, Heading, Text, Dialog, Portal, Popover } from '@radix-ui/themes';
 import styled, { keyframes } from 'styled-components';
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { __makeTemplateObject, __assign, __awaiter, __generator, __spreadArray } from 'tslib';
+import { __makeTemplateObject, __assign, __spreadArray, __awaiter, __generator } from 'tslib';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import 'katex/dist/katex.min.css';
-import { isPlainObject, pick, omit, set, get as get$1, uniqBy, groupBy, uniq } from 'lodash';
+import { isPlainObject, pick, omit, set, get, uniqBy, groupBy, uniq } from 'lodash';
 import { useDebounce } from 'react-use';
 import { createDialogSystem, DIALOGS } from '@orioro/react-dialogs';
 import { CsvImportDialog } from '@orioro/react-csv';
 import Highlighter from 'react-highlight-words';
 import { makeSortableMultiList } from '@orioro/react-sortable';
-import { makeSyncedMaps, LayeredMap, HoverTooltip, ControlContainer, MapWindow, TerrainControl, fitGeometry } from '@orioro/react-maplibre-util';
+import { makeSyncedMaps, LayeredMap, HoverTooltip, ControlContainer, InspectControl, MapWindow, TerrainControl, fitGeometry } from '@orioro/react-maplibre-util';
 import { Legend } from '@orioro/react-chart-util';
 import 'maplibre-gl/dist/maplibre-gl.css';
-import { useQuery, useQueries } from '@tanstack/react-query';
-import { makeResolve, $$literal, withExpressionResolvers, expressions, ALL_EXPR, fetchExpr, resolve, resolveAsync } from '@orioro/resolve';
-import queryString from 'query-string';
-import { wrap } from 'comlink';
-import { get } from '@orioro/get';
+import { useQueries, useQuery } from '@tanstack/react-query';
 import { AttributionControl, GeolocateControl, FullscreenControl, NavigationControl, ScaleControl } from 'react-map-gl/maplibre';
 import { slugify, dataJoin } from '@orioro/util';
 import { schemeTableau10, schemeSet3, schemeSet2, schemeSet1, schemePastel2, schemePastel1, schemePaired, schemeObservable10, schemeDark2, schemeAccent, schemeCategory10, schemeSpectral, schemeRdYlGn, schemeRdYlBu, schemeRdGy, schemeRdBu, schemePuOr, schemePiYG, schemePRGn, schemeBrBG, schemeYlOrRd, schemeYlOrBr, schemeYlGn, schemeYlGnBu, schemeRdPu, schemePuRd, schemePuBu, schemePuBuGn, schemeOrRd, schemeGnBu, schemeBuPu, schemeBuGn, schemeReds, schemePurples, schemeOranges, schemeGreys, schemeGreens, schemeBlues } from 'd3-scale-chromatic';
+import { makeResolve, $$literal, withExpressionResolvers, expressions, ALL_EXPR, fetchExpr, resolve, resolveAsync } from '@orioro/resolve';
 import { saveAs } from 'file-saver';
 import initGdalJs from 'gdal3.js';
+import queryString from 'query-string';
+import { wrap } from 'comlink';
 import { validate } from '@orioro/validate';
 import { buffer } from '@turf/turf';
 import { csvParse } from 'd3-dsv';
 import { strAutoCast } from '@orioro/cast';
+import { get as get$1 } from '@orioro/get';
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -582,6 +582,8 @@ function ViewConfTabs(_ref) {
     viewConf = _ref.viewConf,
     resolvedView = _ref.resolvedView,
     onSetView = _ref.onSetView;
+  var CONF_SCHEMA = viewSpec.confSchema;
+
   //
   // Debounce updating view conf. Prevent's fast changing controls
   // from accidentally triggering map view re-renders unnecessarily
@@ -595,9 +597,9 @@ function ViewConfTabs(_ref) {
   }, 500, [immediateViewConf]);
   var enabledTabs = useMemo(function () {
     return CONF_TAB_ORDER.map(function (tabId) {
-      return viewSpec.conf && isPlainObject(viewSpec.conf[tabId]) && Object.values(viewSpec.conf[tabId]).some(Boolean) ? CONF_TABS[tabId] : null;
+      return CONF_SCHEMA && isPlainObject(CONF_SCHEMA[tabId]) && Object.values(CONF_SCHEMA[tabId]).some(Boolean) ? CONF_TABS[tabId] : null;
     }).filter(Boolean);
-  }, [viewSpec]);
+  }, [CONF_SCHEMA]);
   var dialogs = useDialogs();
   return /*#__PURE__*/React.createElement(Tabs.Root, {
     defaultValue: ((_enabledTabs$ = enabledTabs[0]) === null || _enabledTabs$ === void 0 ? void 0 : _enabledTabs$.id) || null
@@ -715,7 +717,7 @@ function ViewConfTabs(_ref) {
     //
     // Omit null confs
     //
-    Object.entries(viewSpec.conf[tab.id]).filter(function (_ref4) {
+    Object.entries(CONF_SCHEMA[tab.id]).filter(function (_ref4) {
       var _ref5 = _slicedToArray(_ref4, 2);
         _ref5[0];
         var value = _ref5[1];
@@ -757,8 +759,8 @@ var Summary = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemp
   var $active = _ref2.$active;
   return $active ? 'color-mix(in srgb, var(--redus-bege) 80%, white)' : 'var(--redus-bege)';
 });
-function resolveDefaultConf(viewSpec) {
-  return Object.fromEntries(Object.entries(viewSpec.conf || {}).map(function (_ref3) {
+function _resolveDefaultConf(confSchema) {
+  return Object.fromEntries(Object.entries(confSchema || {}).map(function (_ref3) {
     var _ref4 = _slicedToArray(_ref3, 2),
       confScopeId = _ref4[0],
       confSet = _ref4[1];
@@ -809,7 +811,7 @@ function ViewControl(_ref8) {
     return onDeactivateView();
   }, [onDeactivateView]);
   var setView = useCallback(function (layoutIndex) {
-    return onSetView(resolveDefaultConf(viewSpec), layoutIndex);
+    return onSetView(_resolveDefaultConf(viewSpec.confSchema), layoutIndex);
   }, [viewSpec, onSetView]);
   var toggleView = useCallback(function () {
     return active ? deactivateView() : setView();
@@ -1609,193 +1611,6 @@ function ViewLayoutPopover(_ref) {
   }))))));
 }
 
-var worker = typeof Worker !== 'undefined' && new Worker(new URL('./GeoReDUSWorker.worker.js', import.meta.url), {
-  type: 'module'
-});
-var GeoReDUSWorker = worker ? wrap(worker) : null;
-
-// export const $workerGet: ExpressionSpec<[any, any?]> = {
-//   parseArgs: ([arg1, arg2], { parseNodeInput }) =>
-//     typeof arg2 === 'undefined'
-//       ? [parseNodeInput(arg1)]
-//       : [parseNodeInput(arg1), parseNodeInput(arg2)],
-//   fn: (args, context) => {
-//     const path = args[0]
-//     const src = args.length === 1 ? context : args[1]
-//     return path === '' ? src : GeoReDUSWorker.get(src, path)
-//   },
-// }
-var $naturalBreaks = function $naturalBreaks(_a) {
-  var values = _a[0],
-    opt = _a[1];
-  var breaks = GeoReDUSWorker.scaleNaturalBreaks(__assign({
-    values: values
-  }, isPlainObject(opt) ? pick(opt, ['scalesByK', 'k', 'minK', 'maxK', 'defaultColor']) : {}));
-  return breaks;
-};
-// export const $test = ()
-var $urlSearch = function $urlSearch(_a) {
-  var searchParams = _a[0];
-  return Array.isArray(searchParams) ? queryString.stringify(searchParams[0], searchParams[1]) : queryString.stringify(
-  //
-  // By default, stringify non primitive values using
-  // JSON.stringify before passing on to queryString,
-  // as by default queryString ignores non-primitive values.
-  //
-  // This still allows for custom formatting, throgh the array
-  // searchParams input, w/ second arg as options passed
-  // to queryString
-  //
-  Object.fromEntries(Object.entries(searchParams).map(function (_a) {
-    var key = _a[0],
-      value = _a[1];
-    return [key, _typeof(value) === 'object' && value !== null ? JSON.stringify(value) : value];
-  })));
-};
-
-var CUSTOM_EXPR = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  $naturalBreaks: $naturalBreaks,
-  $urlSearch: $urlSearch
-});
-
-function isFetchAllowed(resource, options) {
-  return __awaiter(this, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-      console.error('isFetchAllowed must be defined');
-      return [2 /*return*/, true
-      // const conf = await apiConf()
-      // return fetchExpr.allowOrigins({
-      //   [conf.GEO_METADATA_API_ENDPOINT]: ['GET', 'POST'],
-      // })(resource, options)
-      ];
-    });
-  });
-}
-var _a = makeResolve({
-    resolvers: withExpressionResolvers(expressions.syntaxArrayExpr({
-      name: '$$logical',
-      symbol: Symbol["for"]('$$logical'),
-      // @ts-ignore
-      exps: __assign(__assign(__assign({}, ALL_EXPR), CUSTOM_EXPR), {
-        $fetch: fetchExpr({
-          isFetchAllowed: isFetchAllowed
-        })
-      })
-    }).resolver),
-    defaultResolver: $$literal
-  }),
-  resolveExprAsync = _a.resolveAsync,
-  resolveExpr = _a.resolve;
-
-function resolveView(viewSpec, viewConf, viewContext) {
-  return __awaiter(this, void 0, void 0, function () {
-    var VIEW_AT_METADATA_STAGE, metadata, VIEW_AT_SOURCES_STAGE, sources, VIEW_AT_LAYERS_STAGE, layersBase, layers, legends, VIEW_AT_DOWNLOAD_STAGE, download;
-    return __generator(this, function (_a) {
-      switch (_a.label) {
-        case 0:
-          VIEW_AT_METADATA_STAGE = {
-            conf: viewConf
-          };
-          return [4 /*yield*/, resolveExprAsync(viewSpec.metadata, __assign(__assign({}, viewContext), {
-            view: VIEW_AT_METADATA_STAGE
-          }))];
-        case 1:
-          metadata = _a.sent();
-          if (viewSpec.debug) {
-            console.log('resolveView / metadata', metadata, {
-              viewSpec: viewSpec,
-              viewConf: viewConf,
-              viewContext: viewContext
-            });
-          }
-          VIEW_AT_SOURCES_STAGE = __assign(__assign({}, VIEW_AT_METADATA_STAGE), {
-            metadata: metadata
-          });
-          return [4 /*yield*/, resolveExprAsync(viewSpec.sources, __assign(__assign({}, viewContext), {
-            view: VIEW_AT_SOURCES_STAGE
-          }))];
-        case 2:
-          sources = _a.sent();
-          if (viewSpec.debug) {
-            console.log('resolveView / sources', sources, {
-              viewSpec: viewSpec,
-              viewConf: viewConf,
-              viewContext: viewContext
-            });
-          }
-          VIEW_AT_LAYERS_STAGE = __assign(__assign({}, VIEW_AT_SOURCES_STAGE), {
-            sources: sources
-          });
-          return [4 /*yield*/, resolveExprAsync(viewSpec.layers, __assign(__assign({}, viewContext), {
-            view: VIEW_AT_LAYERS_STAGE
-          }))
-          //
-          // Provide function that will resolve a tooltip
-          // for a specific feature
-          //
-          ];
-        case 3:
-          layersBase = _a.sent();
-          layers = Object.fromEntries(Object.entries(layersBase).filter(function (_a) {
-            _a[0];
-              var layerBase = _a[1];
-            return isPlainObject(layerBase) && !layerBase.hidden;
-          }).map(function (_a) {
-            var layerId = _a[0],
-              layerBase = _a[1];
-            return [layerId, __assign(__assign({}, layerBase), {
-              tooltip: layerBase.interactive !== false && layerBase.tooltip ? function (_a) {
-                var feature = _a.feature;
-                return resolveExpr(layerBase.tooltip, {
-                  feature: feature,
-                  view: VIEW_AT_LAYERS_STAGE
-                });
-              } : null
-            })];
-          }));
-          if (viewSpec.debug) {
-            console.log('resolveView / layers', layers, {
-              viewSpec: viewSpec,
-              viewConf: viewConf,
-              viewContext: viewContext
-            });
-          }
-          legends = get(Object.values(layers), '[].legends[]').filter(Boolean).map(function (legend, index) {
-            return __assign(__assign({}, legend), {
-              id: "".concat(viewSpec.id, "_").concat(index)
-            });
-          });
-          if (viewSpec.debug) {
-            console.log('resolveView / legends', legends, {
-              viewSpec: viewSpec,
-              viewConf: viewConf,
-              viewContext: viewContext
-            });
-          }
-          VIEW_AT_DOWNLOAD_STAGE = __assign(__assign({}, VIEW_AT_LAYERS_STAGE), {
-            layers: layers,
-            legends: legends
-          });
-          return [4 /*yield*/, resolveExprAsync(viewSpec.download, __assign(__assign({}, viewContext), {
-            view: VIEW_AT_DOWNLOAD_STAGE
-          }))];
-        case 4:
-          download = _a.sent();
-          return [2 /*return*/, {
-            id: viewSpec.id,
-            keywords: viewSpec.keywords,
-            metadata: metadata,
-            sources: sources,
-            layers: layers,
-            legends: legends,
-            download: download
-          }];
-      }
-    });
-  });
-}
-
 var BASE_MAP_LAYERS = [
 // {
 //   "id": "Background",
@@ -4381,6 +4196,85 @@ function _ogr2ogr() {
   return _ogr2ogr.apply(this, arguments);
 }
 
+var worker = typeof Worker !== 'undefined' && new Worker(new URL('./GeoReDUSWorker.worker.js', import.meta.url), {
+  type: 'module'
+});
+var GeoReDUSWorker = worker ? wrap(worker) : null;
+
+// export const $workerGet: ExpressionSpec<[any, any?]> = {
+//   parseArgs: ([arg1, arg2], { parseNodeInput }) =>
+//     typeof arg2 === 'undefined'
+//       ? [parseNodeInput(arg1)]
+//       : [parseNodeInput(arg1), parseNodeInput(arg2)],
+//   fn: (args, context) => {
+//     const path = args[0]
+//     const src = args.length === 1 ? context : args[1]
+//     return path === '' ? src : GeoReDUSWorker.get(src, path)
+//   },
+// }
+var $naturalBreaks = function $naturalBreaks(_a) {
+  var values = _a[0],
+    opt = _a[1];
+  var breaks = GeoReDUSWorker.scaleNaturalBreaks(__assign({
+    values: values
+  }, isPlainObject(opt) ? pick(opt, ['scalesByK', 'k', 'minK', 'maxK', 'defaultColor']) : {}));
+  return breaks;
+};
+// export const $test = ()
+var $urlSearch = function $urlSearch(_a) {
+  var searchParams = _a[0];
+  return Array.isArray(searchParams) ? queryString.stringify(searchParams[0], searchParams[1]) : queryString.stringify(
+  //
+  // By default, stringify non primitive values using
+  // JSON.stringify before passing on to queryString,
+  // as by default queryString ignores non-primitive values.
+  //
+  // This still allows for custom formatting, throgh the array
+  // searchParams input, w/ second arg as options passed
+  // to queryString
+  //
+  Object.fromEntries(Object.entries(searchParams).map(function (_a) {
+    var key = _a[0],
+      value = _a[1];
+    return [key, _typeof(value) === 'object' && value !== null ? JSON.stringify(value) : value];
+  })));
+};
+
+var CUSTOM_EXPR = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  $naturalBreaks: $naturalBreaks,
+  $urlSearch: $urlSearch
+});
+
+var _a;
+//
+// TODO: set dynamic values
+//
+var HARD_CODED_ALLOW_FETCH_SOURCES = (_a = {}, _a['https://dev-geoapi-metadata.orioro.design'] = ['GET', 'POST'], _a['http://localhost:6001'] = ['GET', 'POST'], _a);
+console.warn('TODO: remove HARD_CODED_ALLOW_FETCH_SOURCES');
+function isFetchAllowed(resource, options) {
+  return __awaiter(this, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+      return [2 /*return*/, fetchExpr.allowOrigins(HARD_CODED_ALLOW_FETCH_SOURCES)(resource, options)];
+    });
+  });
+}
+var _b = makeResolve({
+    resolvers: withExpressionResolvers(expressions.syntaxArrayExpr({
+      name: '$$logical',
+      symbol: Symbol["for"]('$$logical'),
+      // @ts-ignore
+      exps: __assign(__assign(__assign({}, ALL_EXPR), CUSTOM_EXPR), {
+        $fetch: fetchExpr({
+          isFetchAllowed: isFetchAllowed
+        })
+      })
+    }).resolver),
+    defaultResolver: $$literal
+  }),
+  resolveExprAsync = _b.resolveAsync,
+  resolveExpr = _b.resolve;
+
 var EXTENSIONS_BY_FORMAT = {
   GeoJSON: 'geojson',
   GPKG: 'gpkg',
@@ -4546,6 +4440,25 @@ function downloadResolver(downloadConf) {
   });
 }
 
+function zoomSensitiveLinearSizes(_a) {
+  var variable = _a.variable,
+    minValue = _a.minValue,
+    maxValue = _a.maxValue,
+    minSize = _a.minSize,
+    maxSize = _a.maxSize,
+    _b = _a.zoomBreakpoint,
+    zoomBreakpoint = _b === void 0 ? 12 : _b;
+  var hasMinAndMaxValues =
+  //
+  // Accept minValue expressions or actual numbers,
+  // must check for 0 explicitly
+  //
+  (minValue || minValue === 0) && (maxValue || maxValue === 0);
+  var defaultSize = hasMinAndMaxValues ? ['interpolate', ['linear'], variable, minValue, minSize / 2, maxValue, maxSize / 2] : minSize;
+  var largerSize = hasMinAndMaxValues ? ['interpolate', ['linear'], variable, minValue, minSize, maxValue, maxSize] : maxSize;
+  return ['step', ['zoom'], defaultSize, zoomBreakpoint, largerSize];
+}
+
 var _excluded = ["version"];
 function tableVectorSource(context, tableId) {
   var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
@@ -4645,16 +4558,20 @@ function numerical_choropleth$1(base, _ref) {
   var TABLE_ID = collection_id;
   var VECTOR_SOURCE_ID = "".concat(TABLE_ID, ".geom");
   var _color_scheme = COLOR_SCHEMES[color_scheme];
+  var $circleColor = ['$if', ['$empty', ['$get', 'view.metadata.colorScaleStops']], INSUFFICIENT_DATA_COLOR$1, ['$flat', [['step', ['coalesce', ['get', variable_id], -1]], ['$get', 'view.metadata.colorScaleStops']]]];
   return _objectSpread2(_objectSpread2({}, base), {}, {
-    metadata: ['$let', base.metadata, {
-      variableValues: ['$get', 'variableValues'],
-      sizingValues: ['$get', 'sizingValues'],
-      colorScaleStops: ['$naturalBreaks', ['$get', 'variableValues'], ['$merge', _color_scheme, {
-        minK: 5
-      }]]
-    }],
-    layers: _objectSpread2(_objectSpread2({}, base.layers), {}, _defineProperty({}, "".concat(VECTOR_SOURCE_ID, "_circle"), vectorLayer(VECTOR_SOURCE_ID, {
-      zIndex: ABOVE_BASE_MAP_LAYERS_Z_INDEX_BASE,
+    metadata: {
+      _value: ['$let', base.metadata._value, {
+        variableValues: ['$get', 'variableValues'],
+        sizingValues: ['$get', 'sizingValues'],
+        influenceArea: ['$get', 'influenceArea'],
+        colorScaleStops: ['$naturalBreaks', ['$get', 'variableValues'], ['$merge', _color_scheme, {
+          minK: 5
+        }]]
+      }]
+    },
+    layers: _objectSpread2(_objectSpread2({}, base.layers), {}, _defineProperty(_defineProperty({}, "".concat(VECTOR_SOURCE_ID, "_circle"), vectorLayer(VECTOR_SOURCE_ID, {
+      zIndex: ABOVE_BASE_MAP_LAYERS_Z_INDEX_BASE + 2,
       type: 'circle',
       legends: [{
         type: 'SequentialColorLegend',
@@ -4675,8 +4592,12 @@ function numerical_choropleth$1(base, _ref) {
         'circle-radius': $circleRadius,
         'circle-stroke-width': 1,
         'circle-stroke-color': '#000000',
-        'circle-color': ['$if', ['$empty', ['$get', 'view.metadata.colorScaleStops']], INSUFFICIENT_DATA_COLOR$1, ['$flat', [['step', ['coalesce', ['get', variable_id], -1]], ['$get', 'view.metadata.colorScaleStops']]]]
+        'circle-color': $circleColor
       }
+    })), "influenceArea_fill", _objectSpread2(_objectSpread2({}, base.layers.influenceArea_fill), {}, {
+      paint: _objectSpread2(_objectSpread2({}, base.layers.influenceArea_fill.paint), {}, {
+        'fill-color': $circleColor
+      })
     })))
   });
 }
@@ -4696,7 +4617,7 @@ function numerical_size$1(base, _ref) {
   var SIZE_MIN = 6;
   return _objectSpread2(_objectSpread2({}, base), {}, {
     layers: _objectSpread2(_objectSpread2({}, base.layers), {}, _defineProperty({}, "".concat(VECTOR_SOURCE_ID, "_circle"), vectorLayer(VECTOR_SOURCE_ID, {
-      zIndex: ABOVE_BASE_MAP_LAYERS_Z_INDEX_BASE,
+      zIndex: ABOVE_BASE_MAP_LAYERS_Z_INDEX_BASE + 2,
       type: 'circle',
       legends: [{
         type: 'ProportionalSymbolLegend',
@@ -4717,13 +4638,14 @@ function numerical_size$1(base, _ref) {
         'circle-opacity': 1,
         'circle-stroke-width': 1,
         'circle-stroke-color': '#000000',
-        'circle-radius': ['$if', ['$gt', ['$get', 'length', ['$get', 'view.metadata.variableValues']], 1], ['interpolate', ['linear'], ['get', variable_id],
-        // Replace "density" with your property name
-        ['$min', ['$get', 'view.metadata.variableValues']], SIZE_MIN,
-        // When qt_mat_fund_ai is 0, radius is 6
-        ['$max', ['$get', 'view.metadata.variableValues']], SIZE_MAX // When qt_mat_fund_ai is 100, radius is 20
-        ], 10],
-        'circle-color': get$1(COLOR_SCHEMES, color_scheme) || color_scheme
+        'circle-radius': ['$if', ['$gt', ['$get', 'length', ['$get', 'view.metadata.variableValues']], 1], zoomSensitiveLinearSizes({
+          variable: ['get', variable_id],
+          minValue: ['$min', ['$get', 'view.metadata.variableValues']],
+          maxValue: ['$max', ['$get', 'view.metadata.variableValues']],
+          minSize: SIZE_MIN,
+          maxSize: SIZE_MAX
+        }), 10],
+        'circle-color': get(COLOR_SCHEMES, color_scheme) || color_scheme
       }
     })))
   });
@@ -4744,12 +4666,12 @@ function categorical$1(base, _ref) {
   var VECTOR_SOURCE_ID = "".concat(TABLE_ID, ".geom");
   categories = categories ? categories.map(function (category) {
     return _objectSpread2(_objectSpread2({}, category), {}, {
-      color: get$1(COLOR_SCHEMES, category.color) || category.color
+      color: get(COLOR_SCHEMES, category.color) || category.color
     });
   }) : null;
   return _objectSpread2(_objectSpread2({}, base), {}, {
     layers: _objectSpread2(_objectSpread2({}, base.layers), {}, _defineProperty({}, "".concat(VECTOR_SOURCE_ID, "_circle"), vectorLayer(VECTOR_SOURCE_ID, {
-      zIndex: ABOVE_BASE_MAP_LAYERS_Z_INDEX_BASE,
+      zIndex: ABOVE_BASE_MAP_LAYERS_Z_INDEX_BASE + 2,
       type: 'circle',
       legends: [].concat(_toConsumableArray(categories ? [{
         type: 'ColorLegend',
@@ -4796,6 +4718,7 @@ var BY_TYPE$1 = {
   boolean_categorical: boolean_categorical$1,
   categorical: categorical$1
 };
+var DEFAULT_BUFFER_SIZE$1 = 200;
 function cem_escolas_2022(config, allViewSpecs, context) {
   var collection_id = config.collection_id,
     variable_id = config.variable_id,
@@ -4846,7 +4769,7 @@ function cem_escolas_2022(config, allViewSpecs, context) {
     path: indicator_path,
     metodology: metodology,
     keywords: [indicator_path, $sourceLabel, 'educação', keywords].filter(Boolean),
-    conf: {
+    confSchema: {
       data: {
         variantId: {
           label: 'Rede de ensino:',
@@ -4867,38 +4790,148 @@ function cem_escolas_2022(config, allViewSpecs, context) {
           type: 'booleanCheckbox',
           description: 'Tamanho proporcional à quantidade de matrículas',
           defaultValue: true
-        } : null
+        } : null,
+        showInfluenceArea: {
+          type: 'booleanCheckbox',
+          label: 'Área de influência',
+          description: 'Visualizar área de influência',
+          defaultValue: true
+        },
+        influenceAreaRadius: {
+          type: 'slider',
+          inactive: resolve.literal(resolve.fn(function (context) {
+            var _context$value;
+            return !((_context$value = context.value) !== null && _context$value !== void 0 && _context$value.showInfluenceArea);
+          })),
+          label: resolve.literal(resolve.fn(function (context) {
+            var _context$value2;
+            return "Raio de influ\xEAncia (".concat(((_context$value2 = context.value) === null || _context$value2 === void 0 ? void 0 : _context$value2.influenceAreaRadius) || DEFAULT_BUFFER_SIZE$1, "m)");
+          })),
+          helperText: 'Raio de influência da escola',
+          min: 0,
+          max: 2000,
+          step: 50,
+          defaultValue: DEFAULT_BUFFER_SIZE$1
+        },
+        dissolveOverlappingGeometries: {
+          inactive: resolve.literal(resolve.fn(function (context) {
+            var _context$value3;
+            return !((_context$value3 = context.value) !== null && _context$value3 !== void 0 && _context$value3.showInfluenceArea);
+          })),
+          type: 'booleanCheckbox',
+          label: 'Dissolver geometrias',
+          description: 'Unir geometrias sobrepostas',
+          defaultValue: false
+        }
       }
     },
     metadata: {
-      variableValues: ['$get', ['$template', '[].${0}', VARIABLE_ID], ['$fetch', {
-        href: METADATA_API_ENDPOINT,
-        pathname: collection_id,
-        searchParams: ['$merge', {
-          select: VARIABLE_ID,
-          id_municipio: _id_municipio_apiFilterExpr
-        }, _fetchMetadataApiFilterExpResolver]
-      }]],
-      sizingValues: sizing_variable_id ? ['$if', ['$get', 'view.conf.data.showSize'], ['$filter', ['$get', ['$template', '[].${0}', sizing_variable_id], ['$fetch', {
-        href: METADATA_API_ENDPOINT,
-        pathname: collection_id,
-        searchParams: ['$merge', {
-          select: sizing_variable_id,
-          id_municipio: _id_municipio_apiFilterExpr
-        }, _fetchMetadataApiFilterExpResolver]
-      }]], ['$and', ['$not', ['$empty', ['$iterator', 'item']]], ['$gt', ['$iterator', 'item'], 0]]], null] : null
+      _value: ['$let', {
+        rawData: ['$fetch', {
+          href: METADATA_API_ENDPOINT,
+          pathname: collection_id,
+          searchParams: ['$merge', {
+            select: [VARIABLE_ID, 'geom'].join(','),
+            id_municipio: _id_municipio_apiFilterExpr
+          }, _fetchMetadataApiFilterExpResolver]
+        }]
+      }, {
+        variableValues: ['$get', ['$template', 'rawData[].${0}', VARIABLE_ID]],
+        sizingValues: sizing_variable_id ? ['$if', ['$get', 'view.conf.data.showSize'], ['$filter', ['$get', ['$template', '[].${0}', sizing_variable_id], ['$fetch', {
+          href: METADATA_API_ENDPOINT,
+          pathname: collection_id,
+          searchParams: ['$merge', {
+            select: sizing_variable_id,
+            id_municipio: _id_municipio_apiFilterExpr
+          }, _fetchMetadataApiFilterExpResolver]
+        }]], ['$and', ['$not', ['$empty', ['$iterator', 'item']]], ['$gt', ['$iterator', 'item'], 0]]], null] : null,
+        influenceArea: resolveAsync.fn(/*#__PURE__*/function () {
+          var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(context) {
+            var _ref2, influenceAreaRadius, showInfluenceArea, dissolveOverlappingGeometries, influenceArea;
+            return _regeneratorRuntime().wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  _ref2 = get(context, 'view.conf.data') || {}, influenceAreaRadius = _ref2.influenceAreaRadius, showInfluenceArea = _ref2.showInfluenceArea, dissolveOverlappingGeometries = _ref2.dissolveOverlappingGeometries;
+                  if (!(showInfluenceArea && typeof influenceAreaRadius === 'number' && influenceAreaRadius > 0 && context.rawData)) {
+                    _context.next = 12;
+                    break;
+                  }
+                  _context.prev = 2;
+                  _context.next = 5;
+                  return GeoReDUSWorker.buffer({
+                    type: 'FeatureCollection',
+                    features: context.rawData.map(function (entry) {
+                      return {
+                        type: 'Feature',
+                        geometry: entry.geom,
+                        properties: omit(entry, ['geom'])
+                      };
+                    })
+                  }, influenceAreaRadius, {
+                    units: 'meters',
+                    dissolve: dissolveOverlappingGeometries
+                  });
+                case 5:
+                  influenceArea = _context.sent;
+                  return _context.abrupt("return", influenceArea);
+                case 9:
+                  _context.prev = 9;
+                  _context.t0 = _context["catch"](2);
+                  return _context.abrupt("return", null);
+                case 12:
+                  return _context.abrupt("return", null);
+                case 13:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee, null, [[2, 9]]);
+          }));
+          return function (_x) {
+            return _ref.apply(this, arguments);
+          };
+        }())
+      }]
     },
-    sources: _objectSpread2(_objectSpread2({}, globalRes.sources), {}, _defineProperty({}, VECTOR_SOURCE_ID, tableVectorSource(context, collection_id, {
+    sources: _objectSpread2(_objectSpread2({}, globalRes.sources), {}, _defineProperty(_defineProperty({}, VECTOR_SOURCE_ID, tableVectorSource(context, collection_id, {
       attribution: $sourceLabel,
+      promoteId: 'id_escola',
       version: 2,
       minzoom: 8,
       maxzoom: 20
-    }))),
-    layers: _objectSpread2({}, globalRes.layers),
-    download: downloadResolver({
-      fileNameBase: ['$template', '${0}_${1}_georedus_edu', [VARIABLE_ID, ['$get', 'municipioId']]],
-      mainVariableId: VARIABLE_ID,
-      availableVariableIds: uniqBy(allViewSpecs.filter(function (spec) {
+    })), "influenceArea", ['$if', [['$empty', ['$get', 'view.metadata.influenceArea']]], null, resolve.fn(function (context) {
+      return {
+        type: 'geojson',
+        data: context.view.metadata.influenceArea
+      };
+    })])),
+    layers: _objectSpread2(_objectSpread2({}, globalRes.layers), {}, {
+      influenceArea_fill: {
+        zIndex: ABOVE_BASE_MAP_LAYERS_Z_INDEX_BASE + 1,
+        hidden: ['$empty', ['$get', 'view.metadata.influenceArea']],
+        source: 'influenceArea',
+        type: 'fill',
+        paint: {
+          'fill-color': get(COLOR_SCHEMES, 'schemeSet1.colors[1]'),
+          'fill-opacity': 0.3
+        }
+      },
+      influenceArea_boundaries: {
+        zIndex: ABOVE_BASE_MAP_LAYERS_Z_INDEX_BASE + 1,
+        hidden: ['$empty', ['$get', 'view.metadata.influenceArea']],
+        source: 'influenceArea',
+        type: 'line',
+        paint: {
+          'line-color': get(COLOR_SCHEMES, 'schemeSet1.colors[1]'),
+          'line-opacity': 0.8,
+          'line-width': 2,
+          'line-dasharray': [2, 2]
+        }
+      }
+    }),
+    download: downloadResolver({
+      fileNameBase: ['$template', '${0}_${1}_georedus_edu', [VARIABLE_ID, ['$get', 'municipioId']]],
+      mainVariableId: VARIABLE_ID,
+      availableVariableIds: uniqBy(allViewSpecs.filter(function (spec) {
         return Boolean(spec.variable_id);
       }).map(function (spec) {
         return {
@@ -4910,13 +4943,13 @@ function cem_escolas_2022(config, allViewSpecs, context) {
       }),
       fetchData: resolve.fn(function (context) {
         return /*#__PURE__*/function () {
-          var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
+          var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref3) {
             var variableIds;
-            return _regeneratorRuntime().wrap(function _callee$(_context) {
-              while (1) switch (_context.prev = _context.next) {
+            return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+              while (1) switch (_context2.prev = _context2.next) {
                 case 0:
-                  variableIds = _ref.variableIds, _ref.options;
-                  _context.next = 3;
+                  variableIds = _ref3.variableIds, _ref3.options;
+                  _context2.next = 3;
                   return resolveExprAsync(['$fetch', {
                     href: METADATA_API_ENDPOINT,
                     pathname: collection_id,
@@ -4926,15 +4959,15 @@ function cem_escolas_2022(config, allViewSpecs, context) {
                     }, _fetchMetadataApiFilterExpResolver]
                   }], context);
                 case 3:
-                  return _context.abrupt("return", _context.sent);
+                  return _context2.abrupt("return", _context2.sent);
                 case 4:
                 case "end":
-                  return _context.stop();
+                  return _context2.stop();
               }
-            }, _callee);
+            }, _callee2);
           }));
-          return function (_x) {
-            return _ref2.apply(this, arguments);
+          return function (_x2) {
+            return _ref4.apply(this, arguments);
           };
         }();
       })
@@ -4956,12 +4989,13 @@ function cem_escolas_2022(config, allViewSpecs, context) {
     var filter = variantId ? variantSpec.filter : null;
     return ['all', ['==', ['get', 'id_municipio'], ['$get', 'municipioId']]].concat(_toConsumableArray(isPlainObject(filter) ? fmtMaplibreGlFilterExp(filter) : []));
   });
-  var $circleRadius = sizing_variable_id ? ['$if', ['$and', ['$get', 'view.conf.data.showSize'], ['$gt', ['$get', 'length', ['$get', 'view.metadata.sizingValues']], 1]], ['interpolate', ['linear'], ['get', sizing_variable_id],
-  // Replace "density" with your property name
-  ['$min', ['$get', 'view.metadata.sizingValues']], SIZE_MIN,
-  // When qt_mat_fund_ai is 0, radius is 6
-  ['$max', ['$get', 'view.metadata.sizingValues']], SIZE_MAX // When qt_mat_fund_ai is 100, radius is 20
-  ], SIZE_DEFAULT] : SIZE_DEFAULT;
+  var $circleRadius = sizing_variable_id ? ['$if', ['$and', ['$get', 'view.conf.data.showSize'], ['$gt', ['$get', 'length', ['$get', 'view.metadata.sizingValues']], 1]], zoomSensitiveLinearSizes({
+    variable: ['get', sizing_variable_id],
+    minValue: ['$min', ['$get', 'view.metadata.sizingValues']],
+    maxValue: ['$max', ['$get', 'view.metadata.sizingValues']],
+    minSize: SIZE_MIN,
+    maxSize: SIZE_MAX
+  }), SIZE_DEFAULT] : SIZE_DEFAULT;
   var $tooltip = {
     title: ['$literal', ['$get', 'feature.properties.no_escola']],
     entries: [[indicator_label, ['$literal', ['$coalesce', ['$get', "feature.properties.".concat(VARIABLE_ID, "::string({\n                number: ").concat(JSON.stringify(number_format), ",\n                boolean: {\n                  true: 'Sim',\n                  false: 'N\xE3o'\n                }\n              })")], 'Sem dados']]], sizing_variable_id ? [sizing_variable_label, ['$literal', ['$get', "feature.properties.".concat(sizing_variable_id, "::string")]]] : null, ['Etapas de ensino', ['$literal', resolve.fn(function (context) {
@@ -4972,16 +5006,16 @@ function cem_escolas_2022(config, allViewSpecs, context) {
         in_fund_af: 'Fundamental II',
         in_med: 'Ensino Médio'
       };
-      return Object.entries(ETAPAS).filter(function (_ref3) {
+      return Object.entries(ETAPAS).filter(function (_ref5) {
         var _context$feature, _context$feature2;
-        var _ref4 = _slicedToArray(_ref3, 2),
-          key = _ref4[0];
-          _ref4[1];
+        var _ref6 = _slicedToArray(_ref5, 2),
+          key = _ref6[0];
+          _ref6[1];
         return (context === null || context === void 0 || (_context$feature = context.feature) === null || _context$feature === void 0 ? void 0 : _context$feature.properties) && (context === null || context === void 0 || (_context$feature2 = context.feature) === null || _context$feature2 === void 0 ? void 0 : _context$feature2.properties[key]);
-      }).map(function (_ref5) {
-        var _ref6 = _slicedToArray(_ref5, 2);
-          _ref6[0];
-          var label = _ref6[1];
+      }).map(function (_ref7) {
+        var _ref8 = _slicedToArray(_ref7, 2);
+          _ref8[0];
+          var label = _ref8[1];
         return label;
       }).join(', ');
     })]], ['Rede de ensino', ['$literal', ['$get', 'feature.properties.tp_dependencia']]]].filter(Boolean)
@@ -5182,7 +5216,7 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
     sourceLabel: sourceLabel,
     viewType: VIEW_TYPE_SURFACE_CHOROPLETH,
     keywords: [indicator_path, sourceLabel, variant_path, variant_label, variable_id, keywords].filter(Boolean),
-    conf: {
+    confSchema: {
       data: {
         variableId: {
           label: 'Recorte:',
@@ -5206,11 +5240,11 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
           'TIFF/GeoTIFF (.tif/.tiff)', 'GeoJSON (.json/.geojson)', 'ESRI Shapefile (armazenar arquivos .shp, .shx, .dbf, etc. em um arquivo .zip único)'].join(', ')
         },
         pointsDisplayMode: {
-          inactive: resolve.fn(function (context) {
+          inactive: resolve.literal(resolve.fn(function (context) {
             var _context$value;
             var geometryTypes = (_context$value = context.value) === null || _context$value === void 0 || (_context$value = _context$value.customSpatialAggregationUnit) === null || _context$value === void 0 || (_context$value = _context$value.GEO_FILE_METADATA) === null || _context$value === void 0 ? void 0 : _context$value.geometryTypes;
             return !Array.isArray(geometryTypes) || !geometryTypes.includes('Point');
-          }),
+          })),
           clearable: false,
           type: 'treeSelect',
           label: 'Visualizar pontos',
@@ -5227,26 +5261,26 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
         },
         bufferSize: {
           type: 'slider',
-          label: resolve.fn(function (context) {
+          label: resolve.literal(resolve.fn(function (context) {
             var _context$value2;
             return "Raio de influ\xEAncia (".concat(((_context$value2 = context.value) === null || _context$value2 === void 0 ? void 0 : _context$value2.bufferSize) || DEFAULT_BUFFER_SIZE, "m)");
-          }),
+          })),
           helperText: 'Raio de influência do ponto',
           min: 0,
           max: 2000,
           step: 50,
           defaultValue: DEFAULT_BUFFER_SIZE,
-          inactive: resolve.fn(function (context) {
+          inactive: resolve.literal(resolve.fn(function (context) {
             var _context$value3, _context$value4;
             var geometryTypes = (_context$value3 = context.value) === null || _context$value3 === void 0 || (_context$value3 = _context$value3.customSpatialAggregationUnit) === null || _context$value3 === void 0 || (_context$value3 = _context$value3.GEO_FILE_METADATA) === null || _context$value3 === void 0 ? void 0 : _context$value3.geometryTypes;
             return !Array.isArray(geometryTypes) || !geometryTypes.includes('Point') && !geometryTypes.includes('LineString') || ((_context$value4 = context.value) === null || _context$value4 === void 0 ? void 0 : _context$value4.pointsDisplayMode) === 'heatmap';
-          })
+          }))
         },
         dissolveOverlappingGeometries: {
-          inactive: resolve.fn(function (context) {
+          inactive: resolve.literal(resolve.fn(function (context) {
             var _context$value5, _context$value6;
             return !Boolean((_context$value5 = context.value) === null || _context$value5 === void 0 || (_context$value5 = _context$value5.customSpatialAggregationUnit) === null || _context$value5 === void 0 ? void 0 : _context$value5.GEO_FILE_METADATA) || ((_context$value6 = context.value) === null || _context$value6 === void 0 ? void 0 : _context$value6.pointsDisplayMode) === 'heatmap';
-          }),
+          })),
           type: 'booleanCheckbox',
           label: 'Dissolver geometrias',
           description: 'Unir geometrias sobrepostas',
@@ -5265,119 +5299,150 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
         }
       }
     },
-    metadata: ['$let', {
-      customGeoJSON: ['$if', ['$empty', ['$get', 'view.conf.data.customSpatialAggregationUnit']], null, resolveAsync.fn(/*#__PURE__*/function () {
-        var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(context) {
-          var contents, BASE, POINTS, LINE_STRINGS, AREAS_FEATURES, AREAS_BASE, AREAS;
-          return _regeneratorRuntime().wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                _context.next = 2;
-                return fileReadAs(context.view.conf.data.customSpatialAggregationUnit, 'text');
-              case 2:
-                contents = _context.sent;
-                BASE = JSON.parse(contents); //
-                // Generate a layer with points only
-                //
-                POINTS = _objectSpread2(_objectSpread2({}, BASE), {}, {
-                  features: BASE.features.filter(function (feat) {
-                    var _feat$geometry;
-                    return ((_feat$geometry = feat.geometry) === null || _feat$geometry === void 0 ? void 0 : _feat$geometry.type) === 'Point';
-                  })
-                });
-                LINE_STRINGS = _objectSpread2(_objectSpread2({}, BASE), {}, {
-                  features: BASE.features.filter(function (feat) {
-                    var _feat$geometry2;
-                    return ((_feat$geometry2 = feat.geometry) === null || _feat$geometry2 === void 0 ? void 0 : _feat$geometry2.type) === 'LineString';
-                  })
-                }); //
-                // Layer with areas
-                //
-                AREAS_FEATURES = context.view.conf.data.pointsDisplayMode === 'heatmap' ?
-                //
-                // If points are set to be displayed as heatmap,
-                // remove them from area calculation
-                //
-                BASE.features.filter(function (feat) {
-                  var _feat$geometry3;
-                  return ((_feat$geometry3 = feat.geometry) === null || _feat$geometry3 === void 0 ? void 0 : _feat$geometry3.type) !== 'Point';
-                }) : BASE.features;
-                AREAS_BASE = _objectSpread2(_objectSpread2({}, BASE), {}, {
-                  features: AREAS_FEATURES.map(function (feat) {
-                    return _objectSpread2(_objectSpread2({}, feat), {}, {
-                      geometry: _applyBuffers(feat.geometry, pick(context.view.conf.data, ['bufferSize']))
-                    });
-                  })
-                });
-                if (!(context.view.conf.data.pointsDisplayMode === 'heatmap')) {
-                  _context.next = 12;
+    metadata: {
+      _dependencies: function _dependencies(_ref2) {
+        _ref2.viewConfState;
+        // console.log('run dependencies', omit(viewConfState.byId, [viewId]))
+
+        // return omit(viewConfState.byId, [viewId])
+        return 'STABLE';
+
+        // return omit(viewConfState.byId, [viewId])
+      },
+      _value: ['$let', {
+        customGeoJSON: ['$if', ['$empty', ['$get', 'view.conf.data.customSpatialAggregationUnit']], null, resolveAsync.fn(/*#__PURE__*/function () {
+          var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(context) {
+            var contents, BASE, POINTS, LINE_STRINGS, AREAS_FEATURES, AREAS_BASE, AREAS;
+            return _regeneratorRuntime().wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  _context.prev = 0;
+                  _context.next = 3;
+                  return fileReadAs(context.view.conf.data.customSpatialAggregationUnit, 'text');
+                case 3:
+                  contents = _context.sent;
+                  BASE = JSON.parse(contents); //
+                  // Generate a layer with points only
+                  //
+                  POINTS = _objectSpread2(_objectSpread2({}, BASE), {}, {
+                    features: BASE.features.filter(function (feat) {
+                      var _feat$geometry;
+                      return ((_feat$geometry = feat.geometry) === null || _feat$geometry === void 0 ? void 0 : _feat$geometry.type) === 'Point';
+                    })
+                  });
+                  LINE_STRINGS = _objectSpread2(_objectSpread2({}, BASE), {}, {
+                    features: BASE.features.filter(function (feat) {
+                      var _feat$geometry2;
+                      return ((_feat$geometry2 = feat.geometry) === null || _feat$geometry2 === void 0 ? void 0 : _feat$geometry2.type) === 'LineString';
+                    })
+                  }); //
+                  // Layer with areas
+                  //
+                  AREAS_FEATURES = context.view.conf.data.pointsDisplayMode === 'heatmap' ?
+                  //
+                  // If points are set to be displayed as heatmap,
+                  // remove them from area calculation
+                  //
+                  BASE.features.filter(function (feat) {
+                    var _feat$geometry3;
+                    return ((_feat$geometry3 = feat.geometry) === null || _feat$geometry3 === void 0 ? void 0 : _feat$geometry3.type) !== 'Point';
+                  }) : BASE.features;
+                  AREAS_BASE = _objectSpread2(_objectSpread2({}, BASE), {}, {
+                    features: AREAS_FEATURES.map(function (feat) {
+                      return _objectSpread2(_objectSpread2({}, feat), {}, {
+                        geometry: _applyBuffers(feat.geometry, pick(context.view.conf.data, ['bufferSize']))
+                      });
+                    })
+                  });
+                  if (!(context.view.conf.data.pointsDisplayMode === 'heatmap')) {
+                    _context.next = 13;
+                    break;
+                  }
+                  _context.t0 = null;
+                  _context.next = 21;
                   break;
-                }
-                _context.t0 = null;
-                _context.next = 20;
-                break;
-              case 12:
-                if (!(context.view.conf.data.dissolveOverlappingGeometries && AREAS_BASE)) {
-                  _context.next = 18;
+                case 13:
+                  if (!(context.view.conf.data.dissolveOverlappingGeometries && AREAS_BASE)) {
+                    _context.next = 19;
+                    break;
+                  }
+                  _context.next = 16;
+                  return GeoReDUSWorker.dissolveAreasPreservingIsolated(AREAS_BASE);
+                case 16:
+                  _context.t1 = _context.sent;
+                  _context.next = 20;
                   break;
-                }
-                _context.next = 15;
-                return GeoReDUSWorker.dissolveAreasPreservingIsolated(AREAS_BASE);
-              case 15:
-                _context.t1 = _context.sent;
-                _context.next = 19;
-                break;
-              case 18:
-                _context.t1 = AREAS_BASE;
-              case 19:
-                _context.t0 = _context.t1;
-              case 20:
-                AREAS = _context.t0;
-                return _context.abrupt("return", {
-                  BASE: BASE,
-                  POINTS: POINTS,
-                  LINE_STRINGS: LINE_STRINGS,
-                  AREAS: AREAS
-                });
-              case 22:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }));
-        return function (_x) {
-          return _ref2.apply(this, arguments);
-        };
-      }())]
-    }, ['$let', {
-      variableValues: ['$if', ['$empty', ['$get', 'customGeoJSON.AREAS']], ['$get', ['$template', '[].${0}', ['$get', 'view.conf.data.variableId']], ['$fetch', ['$template', "".concat(METADATA_API_ENDPOINT) + '/${source_table_id}?select=' + '${variableId}' + '&cd_mun=eq.' + '${municipioId}', {
-        variableId: ['$get', 'view.conf.data.variableId'],
-        municipioId: ['$context', 'municipioId'],
-        source_table_id: ['$get', ['$template', '${0}.source_table_id', ['$get', 'view.conf.data.variableId']], variantsByVariableId]
-      }]]], ['$fetch', {
-        href: METADATA_API_ENDPOINT,
-        pathname: 'rpc/aggregate_by_geojson'
+                case 19:
+                  _context.t1 = AREAS_BASE;
+                case 20:
+                  _context.t0 = _context.t1;
+                case 21:
+                  AREAS = _context.t0;
+                  return _context.abrupt("return", {
+                    BASE: BASE,
+                    POINTS: POINTS,
+                    LINE_STRINGS: LINE_STRINGS,
+                    AREAS: AREAS
+                  });
+                case 25:
+                  _context.prev = 25;
+                  _context.t2 = _context["catch"](0);
+                  console.error(_context.t2);
+                  return _context.abrupt("return", null);
+                case 29:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee, null, [[0, 25]]);
+          }));
+          return function (_x) {
+            return _ref3.apply(this, arguments);
+          };
+        }())]
+      }, ['$let', {
+        variableValues: ['$if', ['$empty', ['$get', 'customGeoJSON.AREAS']], ['$get', ['$template', '[].${0}', ['$get', 'view.conf.data.variableId']], ['$fetch', ['$template', "".concat(METADATA_API_ENDPOINT) + '/${source_table_id}?select=' + '${variableId}' + '&cd_mun=eq.' + '${municipioId}', {
+          variableId: ['$get', 'view.conf.data.variableId'],
+          municipioId: ['$context', 'municipioId'],
+          source_table_id: ['$get', ['$template', '${0}.source_table_id', ['$get', 'view.conf.data.variableId']], variantsByVariableId]
+        }]]], ['$fetch', {
+          href: METADATA_API_ENDPOINT,
+          pathname: 'rpc/aggregate_by_geojson'
+        }, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: {
+            geometries: ['$get', 'features[].geometry', ['$get', 'customGeoJSON.AREAS']],
+            view: 'ibge_malha_br_setor_censitario_2010_spatial_agg',
+            agg_column: ['$get', 'view.conf.data.variableId'],
+            agg_type: ['$if', ['$endsWith', ['$get', 'view.conf.data.variableId'], '_pct'], 'weighted_avg', 'sum']
+          }
+        }]]
       }, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: {
-          geometries: ['$get', 'features[].geometry', ['$get', 'customGeoJSON.AREAS']],
-          view: 'ibge_malha_br_setor_censitario_2010_spatial_agg',
-          agg_column: ['$get', 'view.conf.data.variableId'],
-          agg_type: ['$if', ['$endsWith', ['$get', 'view.conf.data.variableId'], '_pct'], 'weighted_avg', 'sum']
-        }
+        labels: labels,
+        measureUnits: measureUnits,
+        variableValues: ['$get', 'variableValues'],
+        customGeoJSON: ['$get', 'customGeoJSON'],
+        customGeoJSON2: resolveAsync.fn(/*#__PURE__*/function () {
+          var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(context) {
+            return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+              while (1) switch (_context2.prev = _context2.next) {
+                case 0:
+                case "end":
+                  return _context2.stop();
+              }
+            }, _callee2);
+          }));
+          return function (_x2) {
+            return _ref4.apply(this, arguments);
+          };
+        }()),
+        colorScaleStops: ['$naturalBreaks', ['$get', 'variableValues'], _objectSpread2(_objectSpread2({}, _color_scheme), {}, {
+          minK: 5
+        })]
       }]]
-    }, {
-      labels: labels,
-      measureUnits: measureUnits,
-      variableValues: ['$get', 'variableValues'],
-      customGeoJSON: ['$get', 'customGeoJSON'],
-      colorScaleStops: ['$naturalBreaks', ['$get', 'variableValues'], _objectSpread2(_objectSpread2({}, _color_scheme), {}, {
-        minK: 5
-      })]
-    }]],
+    },
     sources: _objectSpread2(_objectSpread2({}, globalRes.sources), {}, _defineProperty(_defineProperty({
       //
       // Points in custom GeoJson
@@ -5435,10 +5500,10 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
     }, VECTOR_SOURCE_ID, {
       type: 'vector',
       attribution: sourceLabel,
-      minzoom: 6,
+      minzoom: 8,
       maxzoom: 20,
       promoteId: 'cd_setor',
-      tiles: [['$join', ["".concat(VECTOR_TILE_SERVER_ENDPOINT, "/dynamic_vector_tiles/{z}/{x}/{y}?"), ['$urlSearch', {
+      tiles: [['$join', ["".concat(VECTOR_TILE_SERVER_ENDPOINT, "/dvt/{z}/{x}/{y}?"), ['$urlSearch', {
         view: ['$get', ['$template', '${0}.collection_id', ['$get', 'view.conf.data.variableId']], variantsByVariableId],
         select: ['cd_setor'],
         join_view: ['$get', ['$template', '${0}.source_table_id', ['$get', 'view.conf.data.variableId']], variantsByVariableId],
@@ -5454,7 +5519,7 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
       attribution: sourceLabel,
       minzoom: 6,
       maxzoom: 20,
-      tiles: [['$join', ["".concat(VECTOR_TILE_SERVER_ENDPOINT, "/dynamic_vector_tiles/{z}/{x}/{y}?"), ['$urlSearch', {
+      tiles: [['$join', ["".concat(VECTOR_TILE_SERVER_ENDPOINT, "/dvt/{z}/{x}/{y}?"), ['$urlSearch', {
         view: 'overture_br_buildings',
         // view: [
         //   '$get',
@@ -5546,7 +5611,7 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
         entries: [_variableValueTooltipEntry]
       },
       source: VECTOR_SOURCE_ID,
-      'source-layer': 'dynamic_vector_tile',
+      'source-layer': 'dvt',
       type: 'fill',
       // maxzoom: 14,
       paint: {
@@ -5575,7 +5640,7 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
     }), "".concat(VECTOR_SOURCE_ID, "_boundary_lines"), {
       hidden: ['$not', ['$empty', ['$get', 'view.metadata.customGeoJSON.AREAS']]],
       source: VECTOR_SOURCE_ID,
-      'source-layer': 'dynamic_vector_tile',
+      'source-layer': 'dvt',
       type: 'line',
       interactive: true,
       // minzoom: BUILDINGS_MIN_ZOOM,
@@ -5601,7 +5666,7 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
       //   // ],
       // },
       source: "".concat(VECTOR_SOURCE_ID, "_buildings"),
-      'source-layer': 'dynamic_vector_tile',
+      'source-layer': 'dvt',
       type: 'fill-extrusion',
       minzoom: BUILDINGS_MIN_ZOOM,
       paint: {
@@ -5633,38 +5698,38 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
       // availableVariableIds: [variable_id, 'str_nome_fantasia', 'id_cnes'],
       fetchData: resolve.fn(function (context) {
         return /*#__PURE__*/function () {
-          var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref3) {
+          var _ref6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(_ref5) {
             var data, geometries;
-            return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-              while (1) switch (_context2.prev = _context2.next) {
+            return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+              while (1) switch (_context3.prev = _context3.next) {
                 case 0:
-                  _ref3.variableIds, _ref3.options;
-                  _context2.next = 3;
+                  _ref5.variableIds, _ref5.options;
+                  _context3.next = 3;
                   return resolveExprAsync(['$fetch', ['$template', "".concat(METADATA_API_ENDPOINT) + '/${source_table_id}?select=' + '${variableId},' + 'cd_setor' + '&cd_mun=eq.' + '${municipioId}', {
                     variableId: ['$get', 'view.conf.data.variableId'],
                     municipioId: ['$context', 'municipioId'],
                     source_table_id: ['$get', ['$template', '${0}.source_table_id', ['$get', 'view.conf.data.variableId']], variantsByVariableId]
                   }]], context);
                 case 3:
-                  data = _context2.sent;
-                  _context2.next = 6;
+                  data = _context3.sent;
+                  _context3.next = 6;
                   return resolveExprAsync(['$fetch', ['$template', "".concat(METADATA_API_ENDPOINT) + '/${collection_id}?select=geom,cd_setor' + '&cd_mun=eq.' + '${municipioId}', {
                     municipioId: ['$context', 'municipioId'],
                     collection_id: ['$get', ['$template', '${0}.collection_id', ['$get', 'view.conf.data.variableId']], variantsByVariableId]
                   }]], context);
                 case 6:
-                  geometries = _context2.sent;
-                  return _context2.abrupt("return", dataJoin([geometries, data], {
+                  geometries = _context3.sent;
+                  return _context3.abrupt("return", dataJoin([geometries, data], {
                     key: 'cd_setor'
                   }));
                 case 8:
                 case "end":
-                  return _context2.stop();
+                  return _context3.stop();
               }
-            }, _callee2);
+            }, _callee3);
           }));
-          return function (_x2) {
-            return _ref4.apply(this, arguments);
+          return function (_x3) {
+            return _ref6.apply(this, arguments);
           };
         }();
       })
@@ -5788,7 +5853,7 @@ function numerical_size(base, _ref) {
         // When qt_mat_fund_ai is 0, radius is 6
         ['$max', ['$get', 'view.metadata.variableValues']], SIZE_MAX // When qt_mat_fund_ai is 100, radius is 20
         ],
-        'circle-color': get$1(COLOR_SCHEMES, color_scheme) || color_scheme
+        'circle-color': get(COLOR_SCHEMES, color_scheme) || color_scheme
       }
     })))
   });
@@ -5810,7 +5875,7 @@ function categorical(base, _ref) {
   var VECTOR_SOURCE_ID = "".concat(TABLE_ID, ".geom");
   categories = categories ? categories.map(function (category) {
     return _objectSpread2(_objectSpread2({}, category), {}, {
-      color: get$1(COLOR_SCHEMES, category.color) || category.color
+      color: get(COLOR_SCHEMES, category.color) || category.color
     });
   }) : null;
   return _objectSpread2(_objectSpread2({}, base), {}, {
@@ -5932,7 +5997,7 @@ function cem_saude_2024(viewSpec, allViewSpecs, context) {
     sourceLabel: $sourceLabel,
     metodology: metodology,
     keywords: [indicator_path, $sourceLabel, 'saúde', 'hospital', 'UBS', keywords].filter(Boolean),
-    conf: {
+    confSchema: {
       data: {
         // variantId: {
         //   label: 'Rede de ensino:',
@@ -5971,6 +6036,7 @@ function cem_saude_2024(viewSpec, allViewSpecs, context) {
     },
     sources: _objectSpread2(_objectSpread2({}, globalRes.sources), {}, _defineProperty({}, VECTOR_SOURCE_ID, tableVectorSource(context, collection_id, {
       attribution: $sourceLabel,
+      promoteId: 'id_cnes',
       minzoom: 8,
       maxzoom: 20
     }))),
@@ -6091,11 +6157,7 @@ var PRESETS = /*#__PURE__*/Object.freeze({
 function parseViewSpec(specInput, otherSpecInputs, context) {
   specInput = unflat(specInput);
   var preset = specInput.preset ? PRESETS[specInput.preset] : null;
-  if (preset) {
-    return preset(specInput, otherSpecInputs, context);
-  } else {
-    return specInput;
-  }
+  return preset ? preset(specInput, otherSpecInputs, context) : specInput;
 }
 
 //
@@ -6190,6 +6252,90 @@ function resolveViewSpecs(viewSpecsInput, context) {
   });
 }
 
+var STAGE_VALUE_KEY = '_value';
+var STAGE_SPECIAL_KEYS = ['_dependencies', '_loading', STAGE_VALUE_KEY, '_query'];
+function _stageResolver(stageKey, additionalResolveFn) {
+  return function (viewSpec, partialViewAtStage, viewResolutionContextBase) {
+    return __awaiter(this, void 0, void 0, function () {
+      var resolveFinalContext, stageValue, resolved;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            resolveFinalContext = __assign(__assign(__assign({}, viewResolutionContextBase.app), viewResolutionContextBase), {
+              view: partialViewAtStage
+            });
+            stageValue = viewSpec[stageKey] && viewSpec[stageKey][STAGE_VALUE_KEY] ? viewSpec[stageKey][STAGE_VALUE_KEY] : isPlainObject(viewSpec[stageKey]) ? omit(viewSpec[stageKey], STAGE_SPECIAL_KEYS) : viewSpec[stageKey];
+            return [4 /*yield*/, resolveExprAsync(stageValue, resolveFinalContext)];
+          case 1:
+            resolved = _a.sent();
+            //
+            // If there is an additional resolver provided, invoke it
+            //
+            return [2 /*return*/, typeof additionalResolveFn === 'function' ? additionalResolveFn(resolved, __assign(__assign({}, resolveFinalContext), {
+              viewSpec: viewSpec
+            })) : resolved];
+        }
+      });
+    });
+  };
+}
+// export const resolveConfSchema = _stageResolver<
+//   Pick<ResolvedView, 'conf'>,
+//   ResolvedView['conf']
+// >('confSchema', (confSchema, { view, viewSpec }) => {
+//   return confSchema || null
+// })
+function resolveConfSchema(viewSpec, partialView, viewResolutionContextBase) {
+  var resolveFinalContext = __assign(__assign(__assign({}, viewResolutionContextBase.app), viewResolutionContextBase), {
+    view: partialView
+  });
+  return resolveExpr(viewSpec.confSchema, resolveFinalContext);
+}
+var resolveMetadata = _stageResolver('metadata');
+var resolveSources = _stageResolver('sources');
+var resolveLayers = _stageResolver('layers', function (layersBase, _a) {
+  //
+  // Provide function that will resolve a tooltip
+  // for a specific feature
+  var VIEW_AT_LAYERS_STAGE = _a.view;
+  return Object.fromEntries(Object.entries(layersBase).filter(function (_a) {
+    _a[0];
+      var layerBase = _a[1];
+    return isPlainObject(layerBase) && !layerBase.hidden;
+  }).map(function (_a) {
+    var layerId = _a[0],
+      layerBase = _a[1];
+    return [layerId, __assign(__assign({}, layerBase), {
+      tooltip: layerBase.interactive !== false && layerBase.tooltip ? function (_a) {
+        var feature = _a.feature;
+        return resolveExpr(layerBase.tooltip, {
+          feature: feature,
+          view: VIEW_AT_LAYERS_STAGE
+        });
+      } : null
+    })];
+  }));
+});
+var resolveControls = _stageResolver('controls', function (controls, _a) {
+  if (controls === void 0) {
+    controls = {};
+  }
+  var view = _a.view,
+    viewSpec = _a.viewSpec;
+  console.log('resolve controls', controls);
+  var layerLegends = view.layers ? get$1(Object.values(view.layers).filter(function (layer) {
+    return !layer.hidden && layer.visibility !== 'none';
+  }), '[].legends[]').filter(Boolean).map(function (legend, index) {
+    return __assign(__assign({}, legend), {
+      id: "".concat(viewSpec.id, "_").concat(index)
+    });
+  }) : [];
+  return __assign(__assign({}, controls || {}), {
+    legends: __spreadArray(__spreadArray([], controls.legends || [], true), layerLegends, true)
+  });
+});
+var resolveDownload = _stageResolver('download');
+
 function viewConfReducer(state, action) {
   var _a;
   switch (action.type) {
@@ -6263,59 +6409,6 @@ function viewConfReducerInitialState(initialState) {
     }]
   };
 }
-//
-// Loads viewconf and loads global/shared configuration
-//
-// export function resolveViewConf(
-//   state: State,
-//   id: string,
-//   viewSpecsById: Record<string, ViewSpec>,
-// ): ViewConf {
-//   //
-//   // Load the view's self conf
-//   //
-//   const viewConfSelf = state.byId[id]
-//   //
-//   // Load global configurations from other active views
-//   //
-//   const globalConf = Object.entries(state.byId)
-//     .map(([otherViewId, otherViewConf]) => {
-//       if (otherViewId === id) {
-//         return null
-//       }
-//       const otherViewSpec = viewSpecsById[otherViewId]
-//       const otherViewGlobalConfPairs =
-//         otherViewSpec.conf &&
-//         CONF_TAB_IDS.flatMap((tabId) => {
-//           const tabSchema = otherViewSpec.conf[tabId]
-//           if (!tabSchema) {
-//             return null
-//           }
-//           const tabValue = otherViewConf[tabId]
-//           return Object.entries(tabSchema)
-//             .filter(([propertyKey, propertySchema]) =>
-//               Boolean(propertySchema && propertySchema.global),
-//             )
-//             .map(([propertyKey, propertySchema]) => {
-//               const propertyValue = tabValue ? tabValue[propertyKey] : undefined
-//               return typeof propertyValue === 'undefined'
-//                 ? null
-//                 : [propertyKey, propertyValue]
-//             })
-//         }).filter(Boolean)
-//       return otherViewGlobalConfPairs.length > 0
-//         ? {
-//             viewId: otherViewId,
-//             conf: Object.fromEntries(otherViewGlobalConfPairs),
-//           }
-//         : null
-//     })
-//     .filter(Boolean)
-//   console.log({
-//     globalConf,
-//   })
-//   return { ...viewConfSelf, global: globalConf }
-// }
 
 function getDeviceLocation() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -6536,6 +6629,316 @@ function InputProvider(props) {
   }, props));
 }
 
+//
+// Custom queryKeyHashFn that correctly handles files
+//
+// https://github.com/TanStack/query/blob/ff788ac4e0a9cbc6af6cdf1837fcbf5c0b0b9a9c/packages/query-core/src/utils.ts#L217
+function queryKeyHashFnWithFileSupport(queryKey) {
+  return JSON.stringify(queryKey, function (_, val) {
+    if (val instanceof File) {
+      // Replace File with stable metadata representation
+      return {
+        __file__: true,
+        name: val.name,
+        size: val.size,
+        type: val.type,
+        lastModified: val.lastModified
+      };
+    }
+    return isPlainObject(val) ? Object.keys(val).sort().reduce(function (result, key) {
+      result[key] = val[key];
+      return result;
+    }, {}) : val;
+  });
+}
+
+var STAGE_LOADING = Symbol["for"]('STAGE_LOADING');
+var STAGE_ERROR = Symbol["for"]('STAGE_ERROR');
+function _viewsFromStageQueries(_a) {
+  var viewsToResolve = _a.viewsToResolve,
+    _b = _a.queriesByStage,
+    queriesByStage = _b === void 0 ? null : _b;
+  return viewsToResolve.map(function (_a, viewQueryIndex) {
+    var viewId = _a.viewId,
+      viewConf = _a.viewConf;
+      _a.viewSpec;
+    var viewBase = {
+      id: viewId,
+      conf: viewConf
+    };
+    return queriesByStage ? Object.assign(viewBase, Object.fromEntries(Object.entries(queriesByStage).map(function (_a) {
+      var stageKey = _a[0],
+        stageQueries = _a[1];
+      //
+      // All queries by stage must share the same viewsToResolve
+      //
+      var viewQuery = stageQueries[viewQueryIndex];
+      return viewQuery.status === 'success' ? [stageKey, viewQuery.data] : [stageKey,
+      //
+      // TODO improve error handling
+      //
+      viewQuery.status === 'pending' ? STAGE_LOADING : STAGE_ERROR];
+    }))) : viewBase;
+  });
+}
+//
+// Utility that checks whether a partial view
+// has all stages from a list resolved
+//
+function _hasViewResolvedStages(partialView, stages) {
+  return stages.every(function (stageKey) {
+    var stageValue = partialView[stageKey];
+    return typeof stageValue !== 'undefined' && stageValue !== STAGE_LOADING && stageValue !== STAGE_ERROR;
+  });
+}
+function useViewStageQueries(_a) {
+  var _this = this;
+  var extEnabled = _a.enabled,
+    stageKey = _a.stageKey,
+    _b = _a.dependsOnStages,
+    dependsOnStages = _b === void 0 ? null : _b,
+    viewResolutionContextBase = _a.viewResolutionContextBase,
+    viewsToResolve = _a.viewsToResolve,
+    partialViews = _a.partialViews,
+    _queryFn = _a.queryFn;
+  return useQueries({
+    queries: viewsToResolve.map(function (viewToResolve, viewIndex) {
+      var _a, _b, _c;
+      var viewId = viewToResolve.viewId,
+        viewSpec = viewToResolve.viewSpec,
+        viewConf = viewToResolve.viewConf;
+      var partialView = partialViews[viewIndex];
+      var enabled = extEnabled && (Array.isArray(dependsOnStages) ? _hasViewResolvedStages(partialView, dependsOnStages) : true);
+      var stageDependencies = enabled && typeof ((_a = viewSpec[stageKey]) === null || _a === void 0 ? void 0 : _a._dependencies) === 'function' ? viewSpec[stageKey]._dependencies(__assign(__assign({}, viewResolutionContextBase), {
+        view: partialView
+      })) || 'STABLE_DEPENDENCY' : 'STABLE_DEPENDENCY';
+      var queryKey = ['ViewStage', viewId, stageKey, viewConf, viewResolutionContextBase.app.municipioId, stageDependencies];
+      return __assign(__assign({}, ((_b = viewSpec[stageKey]) === null || _b === void 0 ? void 0 : _b._query) ? pick((_c = viewSpec[stageKey]) === null || _c === void 0 ? void 0 : _c._query, ['gcTime']) : {}), {
+        gcTime: 0,
+        enabled: enabled,
+        queryKey: queryKey,
+        queryKeyHashFn: queryKeyHashFnWithFileSupport,
+        queryFn: function queryFn() {
+          return __awaiter(_this, void 0, void 0, function () {
+            var result;
+            return __generator(this, function (_a) {
+              switch (_a.label) {
+                case 0:
+                  return [4 /*yield*/, _queryFn(viewToResolve, partialView)];
+                case 1:
+                  result = _a.sent();
+                  if (viewSpec.debug) {
+                    console.log(stageKey, viewSpec.id, result, partialView);
+                  }
+                  return [2 /*return*/, result];
+              }
+            });
+          });
+        },
+        throwOnError: process.env.NODE_ENV !== 'production'
+      });
+    })
+  });
+}
+function useViews(viewResolutionContextBase) {
+  var _this = this;
+  var viewSpecs = viewResolutionContextBase.viewSpecs,
+    viewConfState = viewResolutionContextBase.viewConfState;
+  var VIEWS_ENABLED = Boolean(viewSpecs && viewConfState);
+  var viewSpecsById = useMemo(function () {
+    return Array.isArray(viewSpecs) ? viewSpecs.reduce(function (acc, viewSpec) {
+      var _a;
+      return __assign(__assign({}, acc), (_a = {}, _a[viewSpec.id] = viewSpec, _a));
+    }, {}) : null;
+  }, [viewSpecs]);
+  //
+  // Filter out views that are not listed in specs
+  // All useQueries calls will from this point onward
+  // have the same array of base queries and same order
+  // as well.
+  //
+  var viewsToResolve = useMemo(function () {
+    if (!viewSpecsById || !viewConfState) {
+      return [];
+    }
+    return viewConfState.layout.flatMap(function (list) {
+      return list.items.map(function (item) {
+        return item.id;
+      });
+    }).map(function (viewId) {
+      var viewSpec = viewSpecsById[viewId] || null;
+      var viewConf = viewConfState.byId[viewId] || null;
+      return viewSpec && viewConf ? {
+        viewId: viewId,
+        viewConf: viewConf,
+        viewSpec: viewSpec
+      } : null;
+    }).filter(Boolean);
+  }, [viewSpecsById, viewConfState]);
+  var QUERIES_AT_METADATA = {};
+  var metadataQueries = useViewStageQueries({
+    enabled: VIEWS_ENABLED,
+    stageKey: 'metadata',
+    dependsOnStages: null,
+    viewResolutionContextBase: viewResolutionContextBase,
+    viewsToResolve: viewsToResolve,
+    partialViews: _viewsFromStageQueries({
+      viewsToResolve: viewsToResolve,
+      queriesByStage: null
+    }),
+    queryFn: function queryFn(_a, partialView_1) {
+      return __awaiter(_this, [_a, partialView_1], void 0, function (_b, partialView) {
+        var viewSpec = _b.viewSpec;
+        return __generator(this, function (_c) {
+          return [2 /*return*/, resolveMetadata(viewSpec, partialView, viewResolutionContextBase)];
+        });
+      });
+    }
+  });
+  var QUERIES_AT_SOURCES = __assign(__assign({}, QUERIES_AT_METADATA), {
+    metadata: metadataQueries
+  });
+  var sourcesQueries = useViewStageQueries({
+    enabled: VIEWS_ENABLED,
+    stageKey: 'sources',
+    dependsOnStages: ['metadata'],
+    viewResolutionContextBase: viewResolutionContextBase,
+    viewsToResolve: viewsToResolve,
+    partialViews: _viewsFromStageQueries({
+      viewsToResolve: viewsToResolve,
+      queriesByStage: QUERIES_AT_SOURCES
+    }),
+    queryFn: function queryFn(_a, partialView_1) {
+      return __awaiter(_this, [_a, partialView_1], void 0, function (_b, partialView) {
+        var viewSpec = _b.viewSpec;
+        return __generator(this, function (_c) {
+          return [2 /*return*/, resolveSources(viewSpec, partialView, viewResolutionContextBase)];
+        });
+      });
+    }
+  });
+  var QUERIES_AT_LAYERS = __assign(__assign({}, QUERIES_AT_SOURCES), {
+    sources: sourcesQueries
+  });
+  var layersQueries = useViewStageQueries({
+    enabled: VIEWS_ENABLED,
+    stageKey: 'layers',
+    dependsOnStages: ['metadata', 'sources'],
+    viewResolutionContextBase: viewResolutionContextBase,
+    viewsToResolve: viewsToResolve,
+    partialViews: _viewsFromStageQueries({
+      viewsToResolve: viewsToResolve,
+      queriesByStage: QUERIES_AT_LAYERS
+    }),
+    queryFn: function queryFn(_a, partialView_1) {
+      return __awaiter(_this, [_a, partialView_1], void 0, function (_b, partialView) {
+        var viewSpec = _b.viewSpec;
+        return __generator(this, function (_c) {
+          return [2 /*return*/, resolveLayers(viewSpec, partialView, viewResolutionContextBase)];
+        });
+      });
+    }
+  });
+  var QUERIES_AT_CONTROLS = __assign(__assign({}, QUERIES_AT_LAYERS), {
+    layers: layersQueries
+  });
+  var controlsQueries = useViewStageQueries({
+    enabled: VIEWS_ENABLED,
+    stageKey: 'controls',
+    dependsOnStages: ['metadata', 'sources', 'layers'],
+    viewResolutionContextBase: viewResolutionContextBase,
+    viewsToResolve: viewsToResolve,
+    partialViews: _viewsFromStageQueries({
+      viewsToResolve: viewsToResolve,
+      queriesByStage: QUERIES_AT_CONTROLS
+    }),
+    queryFn: function queryFn(_a, partialView_1) {
+      return __awaiter(_this, [_a, partialView_1], void 0, function (_b, partialView) {
+        var viewSpec = _b.viewSpec;
+        return __generator(this, function (_c) {
+          return [2 /*return*/, resolveControls(viewSpec, partialView, viewResolutionContextBase)];
+        });
+      });
+    }
+  });
+  var downloadQueries = useViewStageQueries({
+    enabled: VIEWS_ENABLED,
+    stageKey: 'download',
+    dependsOnStages: ['metadata', 'sources', 'layers'],
+    viewResolutionContextBase: viewResolutionContextBase,
+    viewsToResolve: viewsToResolve,
+    partialViews: _viewsFromStageQueries({
+      viewsToResolve: viewsToResolve,
+      queriesByStage: QUERIES_AT_CONTROLS
+    }),
+    queryFn: function queryFn(_a, partialView_1) {
+      return __awaiter(_this, [_a, partialView_1], void 0, function (_b, partialView) {
+        var viewSpec = _b.viewSpec;
+        return __generator(this, function (_c) {
+          return [2 /*return*/, resolveDownload(viewSpec, partialView, viewResolutionContextBase)];
+        });
+      });
+    }
+  });
+  var resolvedViews = useMemo(function () {
+    return _viewsFromStageQueries({
+      viewsToResolve: viewsToResolve,
+      queriesByStage: {
+        metadata: metadataQueries,
+        sources: sourcesQueries,
+        layers: layersQueries,
+        controls: controlsQueries,
+        download: downloadQueries
+      }
+    }).filter(function (partialView) {
+      return _hasViewResolvedStages(partialView, ['metadata', 'sources', 'layers'
+      // 'download',
+      ]);
+    });
+  }, [viewsToResolve, metadataQueries, sourcesQueries, layersQueries, controlsQueries, downloadQueries]);
+  var isLoading = useMemo(function () {
+    return __spreadArray(__spreadArray(__spreadArray(__spreadArray([], metadataQueries, true), sourcesQueries, true), layersQueries, true), controlsQueries, true).some(function (query) {
+      return query.status === 'pending';
+    });
+  }, [metadataQueries, sourcesQueries, layersQueries, controlsQueries]);
+  //
+  // Resolve view specs so that they may take input
+  // from other view confs
+  //
+  // This is best done synchronously, as the schema modification
+  // happens as the user changes conf values. Async resolution
+  // results in buggy interface.
+  //
+  // TODO:
+  // Probably move this away from here, should go to useViewSpecs hook
+  //
+  var resolvedViewSpecs = useMemo(function () {
+    if (!viewSpecs || !viewsToResolve || viewsToResolve.length === 0) {
+      return viewSpecs;
+    }
+    var _byId = Object.fromEntries(viewsToResolve.map(function (toResolve) {
+      var viewId = toResolve.viewId;
+      return [viewId, toResolve];
+    }));
+    return viewSpecs.map(function (viewSpec) {
+      var viewToResolve = _byId[viewSpec.id];
+      return !viewToResolve ? viewSpec : __assign(__assign({}, viewSpec), {
+        confSchema: resolveConfSchema(viewSpec, viewToResolve.viewConf, viewResolutionContextBase)
+      });
+    });
+  }, [viewSpecs, viewsToResolve, viewResolutionContextBase]);
+  return {
+    isLoading: isLoading,
+    metadataQueries: metadataQueries,
+    sourcesQueries: sourcesQueries,
+    layersQueries: layersQueries,
+    controlsQueries: controlsQueries,
+    downloadQueries: downloadQueries,
+    resolvedViews: resolvedViews,
+    resolvedViewSpecs: resolvedViewSpecs
+  };
+}
+
 var _templateObject, _templateObject2, _templateObject3;
 
 //
@@ -6557,17 +6960,17 @@ function _flyToMunicipio(_x, _x2, _x3, _x4) {
 // We use a customizable style on maptiler
 //
 function _flyToMunicipio2() {
-  _flyToMunicipio2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6(map, METADATA_API_ENDPOINT, municipioId, options) {
+  _flyToMunicipio2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5(map, METADATA_API_ENDPOINT, municipioId, options) {
     var _yield$fetch$then, _yield$fetch$then2, mun;
-    return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-      while (1) switch (_context6.prev = _context6.next) {
+    return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
         case 0:
-          _context6.next = 2;
+          _context5.next = 2;
           return fetch("".concat(METADATA_API_ENDPOINT, "/ibge_malha_br_municipio?select=bbox&id=eq.").concat(municipioId)).then(function (res) {
             return res.json();
           });
         case 2:
-          _yield$fetch$then = _context6.sent;
+          _yield$fetch$then = _context5.sent;
           _yield$fetch$then2 = _slicedToArray(_yield$fetch$then, 1);
           mun = _yield$fetch$then2[0];
           if (mun && mun.bbox) {
@@ -6575,9 +6978,9 @@ function _flyToMunicipio2() {
           }
         case 6:
         case "end":
-          return _context6.stop();
+          return _context5.stop();
       }
-    }, _callee6);
+    }, _callee5);
   }));
   return _flyToMunicipio2.apply(this, arguments);
 }
@@ -6594,30 +6997,6 @@ var DEM_SOURCE_URL = "https://api.maptiler.com/tiles/terrain-rgb-v2/{z}/{x}/{y}.
 var DEM_SOURCE_ENCODING = 'mapbox';
 var MapStyleToggleCtrl = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 100px;\n  width: 100px;\n\n  padding: 0;\n  border: none;\n  background-color: #efefef;\n  border-radius: 0;\n  box-shadow:\n    rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,\n    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n\n  cursor: pointer;\n\n  &::after {\n    z-index: 2;\n    content: 'Trocar camada base';\n    color: transparent;\n    font-weight: bold;\n    display: flex;\n    padding: 8px;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    background: rgba(0, 0, 0, 0);\n    transition: background 0.1s ease-in-out;\n  }\n\n  &:hover {\n    &::after {\n      background: rgba(0, 0, 0, 0.5);\n      color: white;\n    }\n  }\n\n  @media (max-width: 500px) {\n    height: 50px;\n    width: 50px;\n    &::after {\n      font-size: 0.6rem;\n    }\n  }\n"])));
 
-//
-// Custom queryKeyHashFn that correctly handles files
-//
-// https://github.com/TanStack/query/blob/ff788ac4e0a9cbc6af6cdf1837fcbf5c0b0b9a9c/packages/query-core/src/utils.ts#L217
-//
-function queryKeyHashFnWithFileSupport(queryKey) {
-  return JSON.stringify(queryKey, function (_, val) {
-    if (val instanceof File) {
-      // Replace File with stable metadata representation
-      return {
-        __file__: true,
-        name: val.name,
-        size: val.size,
-        type: val.type,
-        lastModified: val.lastModified
-      };
-    }
-    return isPlainObject(val) ? Object.keys(val).sort().reduce(function (result, key) {
-      result[key] = val[key];
-      return result;
-    }, {}) : val;
-  });
-}
-
 //
 // From:
 // https://servicodados.ibge.gov.br/api/v4/malhas/paises/BR/metadados
@@ -6747,54 +7126,21 @@ function GeoReDUSInner(_ref) {
     }(),
     throwOnError: process.env.NODE_ENV !== 'production'
   });
-  var viewSpecsById = useMemo(function () {
-    return Array.isArray(viewSpecsQuery.data) ? viewSpecsQuery.data.reduce(function (acc, viewSpec) {
-      return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty({}, viewSpec.id, viewSpec));
-    }, {}) : null;
-  }, [viewSpecsQuery.data]);
-  var viewsQueries = useQueries({
-    queries: viewConfState.layout.flatMap(function (list) {
-      return list.items.map(function (item) {
-        return item.id;
-      });
-    }).map(function (viewId) {
-      return {
-        queryKey: ['ResolveView', viewId, municipioId, viewSpecsById ? viewSpecsById[viewId] : null, viewConfState.byId[viewId]],
-        queryKeyHashFn: queryKeyHashFnWithFileSupport,
-        queryFn: function () {
-          var _queryFn2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-            var viewSpec;
-            return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-              while (1) switch (_context2.prev = _context2.next) {
-                case 0:
-                  viewSpec = viewSpecsById ? viewSpecsById[viewId] : viewSpecsById;
-                  return _context2.abrupt("return", viewSpec ? resolveView(viewSpec, viewConfState.byId[viewId], {
-                    municipioId: municipioId,
-                    baseMapStyle: baseMapStyle
-                  }) : null);
-                case 2:
-                case "end":
-                  return _context2.stop();
-              }
-            }, _callee2);
-          }));
-          function queryFn() {
-            return _queryFn2.apply(this, arguments);
-          }
-          return queryFn;
-        }(),
-        throwOnError: true,
-        retry: false
-      };
-    })
-  });
-  var resolvedViews = useMemo(function () {
-    return viewsQueries
-    // .filter((query) => query.status === 'success')
-    .map(function (query) {
-      return query.data;
-    }).filter(Boolean);
-  }, [viewsQueries]);
+  var _useViews = useViews({
+      viewSpecs: viewSpecsQuery.data,
+      viewConfState: viewConfState,
+      app: {
+        municipioId: municipioId,
+        baseMapStyle: baseMapStyle
+      }
+    }),
+    resolvedViews = _useViews.resolvedViews,
+    resolvedViewSpecs = _useViews.resolvedViewSpecs,
+    isLoading = _useViews.isLoading;
+
+  //
+  // Prepares layout for rendering
+  //
   var resolvedLayout = useMemo(function () {
     var resolvedViewsById = Object.fromEntries(resolvedViews.map(function (view) {
       return [view.id, view];
@@ -6820,7 +7166,8 @@ function GeoReDUSInner(_ref) {
         id: list.id,
         views: views,
         legends: views.flatMap(function (view) {
-          return (view === null || view === void 0 ? void 0 : view.legends) || [];
+          var _view$controls;
+          return (view === null || view === void 0 || (_view$controls = view.controls) === null || _view$controls === void 0 ? void 0 : _view$controls.legends) || [];
         })
       };
     });
@@ -6858,18 +7205,18 @@ function GeoReDUSInner(_ref) {
     required: true,
     clearable: false,
     placeholder: 'Selecione um município',
-    options: useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+    options: useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
       var municipios;
-      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            _context3.next = 2;
+            _context2.next = 2;
             return fetch("".concat(METADATA_API_ENDPOINT, "/ibge_malha_br_municipio?select=nome,id,uf_sigla")).then(function (response) {
               return response.json();
             });
           case 2:
-            municipios = _context3.sent;
-            return _context3.abrupt("return", municipios.map(function (mun) {
+            municipios = _context2.sent;
+            return _context2.abrupt("return", municipios.map(function (mun) {
               return {
                 label: "".concat(mun['nome'], " (").concat(mun['uf_sigla'], ")"),
                 value: mun['id'] + ''
@@ -6877,9 +7224,9 @@ function GeoReDUSInner(_ref) {
             }));
           case 4:
           case "end":
-            return _context3.stop();
+            return _context2.stop();
         }
-      }, _callee3);
+      }, _callee2);
     })), [])
   };
   var dialogs = useDialogs();
@@ -6893,22 +7240,22 @@ function GeoReDUSInner(_ref) {
         METADATA_API_ENDPOINT: METADATA_API_ENDPOINT,
         coordinates: null
       }).then(/*#__PURE__*/function () {
-        var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4(resolvedMunicipioId) {
+        var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(resolvedMunicipioId) {
           var selectedMunicipioId;
-          return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-            while (1) switch (_context4.prev = _context4.next) {
+          return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+            while (1) switch (_context3.prev = _context3.next) {
               case 0:
                 if (resolvedMunicipioId) {
-                  _context4.next = 11;
+                  _context3.next = 11;
                   break;
                 }
                 selectedMunicipioId = null;
               case 2:
                 if (!(typeof selectedMunicipioId !== 'string')) {
-                  _context4.next = 8;
+                  _context3.next = 8;
                   break;
                 }
-                _context4.next = 5;
+                _context3.next = 5;
                 return dialogs.prompt({
                   input: _objectSpread2(_objectSpread2({}, MUNICIPIO_ID_SELECTOR_SCHEMA), {}, {
                     label: 'Município'
@@ -6917,12 +7264,12 @@ function GeoReDUSInner(_ref) {
                   cancel: null
                 });
               case 5:
-                selectedMunicipioId = _context4.sent;
-                _context4.next = 2;
+                selectedMunicipioId = _context3.sent;
+                _context3.next = 2;
                 break;
               case 8:
                 setMunicipioId(selectedMunicipioId);
-                _context4.next = 12;
+                _context3.next = 12;
                 break;
               case 11:
                 setTimeout(function () {
@@ -6930,9 +7277,9 @@ function GeoReDUSInner(_ref) {
                 }, 400);
               case 12:
               case "end":
-                return _context4.stop();
+                return _context3.stop();
             }
-          }, _callee4);
+          }, _callee3);
         }));
         return function (_x5) {
           return _ref3.apply(this, arguments);
@@ -6945,7 +7292,7 @@ function GeoReDUSInner(_ref) {
   // Control map position focus
   //
   useEffect(function () {
-    var mainMap = get$1(syncedMapsRef.current, 'mapInstances[0].map');
+    var mainMap = get(syncedMapsRef.current, 'mapInstances[0].map');
     if (!mainMap) {
       return;
     }
@@ -6997,13 +7344,10 @@ function GeoReDUSInner(_ref) {
       return null;
     }
   }, []);
-  var isLoading = viewsQueries.some(function (viewQuery) {
-    return viewQuery.status === 'pending';
-  });
   return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(LeftPanel, {
     open: leftPanelOpen,
     onSetOpen: setLeftPanelOpen,
-    viewSpecs: viewSpecsQuery.data,
+    viewSpecs: resolvedViewSpecs,
     viewConfState: viewConfState,
     viewConfDispatch: viewConfDispatch,
     resolvedViews: resolvedViews,
@@ -7043,16 +7387,16 @@ function GeoReDUSInner(_ref) {
     },
     ref: syncedMapsRef,
     onLoad: (/*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5(event) {
-        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-          while (1) switch (_context5.prev = _context5.next) {
+      var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4(event) {
+        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
             case 0:
-              return _context5.abrupt("return", _refocus(event.target));
+              return _context4.abrupt("return", _refocus(event.target));
             case 1:
             case "end":
-              return _context5.stop();
+              return _context4.stop();
           }
-        }, _callee5);
+        }, _callee4);
       }));
       return function (_x6) {
         return _ref5.apply(this, arguments);
@@ -7128,7 +7472,7 @@ function GeoReDUSInner(_ref) {
           }, {
             key: legend.id
           }, legend));
-        })))), index === resolvedLayout.length - 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GeolocateControl, {
+        })))), index === resolvedLayout.length - 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, process.env.NODE_ENV !== 'production' && /*#__PURE__*/React.createElement(InspectControl, null), /*#__PURE__*/React.createElement(GeolocateControl, {
           position: "top-right"
         }), /*#__PURE__*/React.createElement(FullscreenControl, {
           position: "top-right"
@@ -7161,7 +7505,8 @@ function GeoReDUSInner(_ref) {
             height: '100%',
             width: '100%'
           },
-          mapStyle: baseMapStyle === 'satellite' ? DATAVIZ_MAP_STYLE_URL : SATELLITE_MAP_STYLE_URL
+          mapStyle: baseMapStyle === 'satellite' ? DATAVIZ_MAP_STYLE_URL : SATELLITE_MAP_STYLE_URL,
+          maxZoom: 13
         })))) : null, /*#__PURE__*/React.createElement(TerrainControl, {
           demSourceUrl: DEM_SOURCE_URL,
           demSourceEncoding: DEM_SOURCE_ENCODING
@@ -7184,4 +7529,4 @@ function GeoReDUS(props) {
   }, /*#__PURE__*/React.createElement(DialogsProvider, null, /*#__PURE__*/React.createElement(GeoReDUSInner, props))));
 }
 
-export { GeoReDUS, queryKeyHashFnWithFileSupport };
+export { GeoReDUS };