@vizzly/dashboard 0.15.0-dev-c8007c0d91fa66cc8fff6cdeaf34c7e7f49bea17 → 0.15.0-dev-0c175094808a340c84fe99388ac46bcc1bedd9a8

package/dist/dashboard.esm.js

@@ -1110,6 +1110,17 @@ var FieldNotFoundInDataSet = /*#__PURE__*/function (_ValidationError) {
   return FieldNotFoundInDataSet;
 }(ValidationError);
 
+var build$1 = function build(measureAttribute, customField, _queryEngineConfig, dataSet, _queryHasDimension, params) {
+  var _params$aliasFields;
+  var newFieldId = ((_params$aliasFields = params.aliasFields) == null || (_params$aliasFields = _params$aliasFields[dataSet.id]) == null ? void 0 : _params$aliasFields[measureAttribute.field]) || customField.allowedFields[0].id;
+  var newField = {
+    type: 'field',
+    "function": measureAttribute["function"] || 'none',
+    value: newFieldId
+  };
+  return newField;
+};
+
 var VariableNotFoundForVariables = /*#__PURE__*/function (_ValidationError) {
   function VariableNotFoundForVariables(variableList, missingVariableId) {
     var _this;
@@ -1136,7 +1147,7 @@ var detect = function detect(input) {
   }
   return matches.length > 0 ? matches : undefined;
 };
-var build$1 = function build(variables) {
+var build$2 = function build(variables) {
   if (variables) {
     var dashboardDefinedVariables = variables();
     logInfo('Detected variables', dashboardDefinedVariables);
@@ -2061,7 +2072,7 @@ var init$1 = function init(publicName, denominatorFieldId, denominatorAggregate,
     }, queryEngineConfig)
   };
 };
-var build$2 = function build(customField, queryEngineConfig, dataSet, _queryHasDimension, params) {
+var build$3 = function build(customField, queryEngineConfig, dataSet, _queryHasDimension, params) {
   var _customField$numerato, _customField$numerato2, _customField$denomina, _customField$denomina2;
   var queryFiltersFromFilterConfig = combineFiltersFromFilterConfig(params.filterConfig, dataSet, params.timeRangeOptions, params.variables);
   var _buildPercentageFilte = buildPercentageFilters(customField, params.variables),
@@ -2175,7 +2186,7 @@ var init$2 = function init(publicName, leftFieldId, operator, rightFieldId, quer
     }, queryEngineConfig)
   };
 };
-var build$3 = function build(measureAttribute, customField, dataSet, params) {
+var build$4 = function build(measureAttribute, customField, dataSet, params) {
   if (measureAttribute["function"] != 'none') {
     return {
       type: 'function',
@@ -2238,7 +2249,7 @@ var init$3 = function init(publicName, leftFieldId, leftFunction, operator, righ
     rightNested: rightNested
   };
 };
-var build$4 = function build(customField, variables) {
+var build$5 = function build(customField, variables) {
   var buildSide = function buildSide(fieldId, func, variables, nested) {
     var value = useValue(fieldId, variables);
     if (nested) {
@@ -2287,7 +2298,7 @@ var init$4 = function init(publicName, fieldId, func, rule, queryEngineConfig) {
     }, queryEngineConfig)
   };
 };
-var build$5 = function build(field, queryEngineConfig, dataSet, params) {
+var build$6 = function build(field, queryEngineConfig, dataSet, params) {
   var queryFilterFromField = convertArrayFilterStructureToQueryFilter(field.rule, params.variables);
   var completeFilters = buildQueryCustomMetrics(queryFilterFromField, dataSet, queryEngineConfig, params);
   var value = useValue(field.fieldId, params.variables);
@@ -2329,7 +2340,7 @@ var init$5 = function init(publicName, rules, queryEngineConfig) {
     }, queryEngineConfig)
   };
 };
-var build$6 = function build(measureAttribute, customField, queryEngineConfig, dataSet, params) {
+var build$7 = function build(measureAttribute, customField, queryEngineConfig, dataSet, params) {
   var switchField = {
     type: 'switchField',
     value: {
@@ -2377,7 +2388,7 @@ var init$6 = function init(publicName, leftFieldId, dateCalculationFunction, rig
     }, queryEngineConfig)
   };
 };
-var build$7 = function build(measureAttribute, customField, variables) {
+var build$8 = function build(measureAttribute, customField, variables) {
   var leftValue = useValue(customField.leftFieldId, variables);
   var rightValue = useValue(customField.rightFieldId, variables);
   if (measureAttribute["function"] != 'none') {
@@ -2448,7 +2459,7 @@ var OperatorType = /*#__PURE__*/function (OperatorType) {
   return OperatorType;
 }({});
 
-var build$8 = function build(measureAttribute, customField, dataSet, queryEngineConfig, params) {
+var build$9 = function build(measureAttribute, customField, dataSet, queryEngineConfig, params) {
   if (customField.metric.type === PropertyType.IfLogic) {
     return buildIfLogic(customField.metric, dataSet, queryEngineConfig, params, measureAttribute);
   }
@@ -2643,7 +2654,7 @@ var init$8 = function init(publicName, fieldId, roundToDecimalPlaces, queryEngin
     }, queryEngineConfig)
   };
 };
-var build$9 = function build(measureAttribute, customField, variables) {
+var build$a = function build(measureAttribute, customField, variables) {
   var value = useValue(customField.fieldId, variables);
   var builtRoundedNumber = {
     type: 'field',
@@ -2679,6 +2690,9 @@ var isConditional = function isConditional(field) {
 var isCustomBuildMetric = function isCustomBuildMetric(field) {
   return 'metric' in field;
 };
+var isAliasField = function isAliasField(field) {
+  return 'allowedFields' in field;
+};
 var isDateCalculation = function isDateCalculation(field) {
   return 'dateCalculationFunction' in field;
 };
@@ -2694,7 +2708,7 @@ var getCustomFieldCategory = function getCustomFieldCategory(field) {
   throw "Unrecognised custom field type for custom field; " + JSON.stringify(field);
 };
 var isCustomField = function isCustomField(field) {
-  return isPercentageField(field) || isSimpleMathField(field) || isAggregateMathField(field) || isRules(field) || isRoundedNumberField(field) || isDateCalculation(field) || isConditional(field) || isCustomBuildMetric(field);
+  return isPercentageField(field) || isSimpleMathField(field) || isAggregateMathField(field) || isRules(field) || isRoundedNumberField(field) || isDateCalculation(field) || isConditional(field) || isCustomBuildMetric(field) || isAliasField(field);
 };
 
 /**
@@ -2702,29 +2716,32 @@ var isCustomField = function isCustomField(field) {
  * a measure.
  */
 var toQueryMeasure = function toQueryMeasure(measureAttribute, customField, queryEngineConfig, dataSet, queryHasDimension, params) {
+  if (isAliasField(customField)) {
+    return build$1(measureAttribute, customField, queryEngineConfig, dataSet, queryHasDimension, params);
+  }
   if (isPercentageField(customField)) {
-    return build$2(customField, queryEngineConfig, dataSet, queryHasDimension, params);
+    return build$3(customField, queryEngineConfig, dataSet, queryHasDimension, params);
   }
   if (isRules(customField)) {
-    return build$6(measureAttribute, customField, queryEngineConfig, dataSet, params);
+    return build$7(measureAttribute, customField, queryEngineConfig, dataSet, params);
   }
   if (isAggregateMathField(customField)) {
-    return build$4(customField, params.variables);
+    return build$5(customField, params.variables);
   }
   if (isSimpleMathField(customField)) {
-    return build$3(measureAttribute, customField, dataSet, params);
+    return build$4(measureAttribute, customField, dataSet, params);
   }
   if (isRoundedNumberField(customField)) {
-    return build$9(measureAttribute, customField, params.variables);
+    return build$a(measureAttribute, customField, params.variables);
   }
   if (isConditional(customField)) {
-    return build$5(customField, queryEngineConfig, dataSet, params);
+    return build$6(customField, queryEngineConfig, dataSet, params);
   }
   if (isDateCalculation(customField)) {
-    return build$7(measureAttribute, customField, params.variables);
+    return build$8(measureAttribute, customField, params.variables);
   }
   if (isCustomBuildMetric(customField)) {
-    return build$8(measureAttribute, customField, dataSet, queryEngineConfig, params);
+    return build$9(measureAttribute, customField, dataSet, queryEngineConfig, params);
   }
   throw "Unsupported custom field type; " + JSON.stringify(customField);
 };
@@ -15135,7 +15152,7 @@ var END_USER_DEFAULT_FEATURE_TOGGLES = {
   showSavingIndicator: true,
   disablePersistingGlobalFiltersLocally: false
 };
-var build$a = function build(partialFeatureToggles, queryEngineConfig, mode, scope) {
+var build$b = function build(partialFeatureToggles, queryEngineConfig, mode, scope) {
   var featureToggles = {};
   featureToggles = _extends({}, END_USER_DEFAULT_FEATURE_TOGGLES, featureToggles, partialFeatureToggles);
   if (mode == 'admin') {
@@ -15866,7 +15883,7 @@ var defaultDateFilterOptions = function defaultDateFilterOptions() {
   }
   return defaultDateFilterOptions;
 };
-var build$b = function build(textOverride, overrides) {
+var build$c = function build(textOverride, overrides) {
   var timeRangeMapping = defaultTimeRangeMapping(textOverride);
   var orderedKeys = Object.keys(DEFAULT_DATETIME_FILTER_OPTIONS).map(function (key) {
     return key in timeRangeMapping ? "_vizzly_" + key : key;
@@ -16198,7 +16215,7 @@ var init$b = function init(overrides, includeComponentTypes, excludeComponentTyp
       return _extends({}, defaultFormatMapping, overrides.defaultFormats ? overrides.defaultFormats() : {});
     },
     onEditorUpdate: overrides.onEditorUpdate ? overrides.onEditorUpdate : base.onEditorUpdate,
-    dateFilterOptions: build$b(textOverride, overrides.dateFilterOptions),
+    dateFilterOptions: build$c(textOverride, overrides.dateFilterOptions),
     onSave: overrides.onSave ? overrides.onSave : base.onSave,
     onScheduledReportChange: overrides.onScheduledReportChange || base.onScheduledReportChange,
     dashboardFilters: overrides.dashboardFilters ? overrides.dashboardFilters : base.dashboardFilters,
@@ -16252,7 +16269,7 @@ function useSubscription(callback, idOverride, deps) {
 var useFeatureTogglesSetup = function useFeatureTogglesSetup(mode, overrideFeatureToggles, queryEngineConfig, scope, id) {
   var base$1 = base;
   var buildInitialFeatureToggles = function () {
-    var updatedFeatureToggles = build$a(_.merge({}, base$1.featureToggles, overrideFeatureToggles), queryEngineConfig != null ? queryEngineConfig : base$1.queryEngineConfig, mode || base$1.mode, scope || base$1.scope);
+    var updatedFeatureToggles = build$b(_.merge({}, base$1.featureToggles, overrideFeatureToggles), queryEngineConfig != null ? queryEngineConfig : base$1.queryEngineConfig, mode || base$1.mode, scope || base$1.scope);
     return updatedFeatureToggles;
   }();
   var _useState = useState(buildInitialFeatureToggles),
@@ -26683,7 +26700,7 @@ var buildFromQueryAttributes = function buildFromQueryAttributes(dataSet, measur
   };
 };
 
-var build$c = buildFromQueryAttributes;
+var build$d = buildFromQueryAttributes;
 var hasDimensions = function hasDimensions(query) {
   return query.group.length > 0;
 };
@@ -26833,12 +26850,12 @@ var useVariables = function useVariables(variables, dashboardId) {
     subscriptionChanges = _useState2[0],
     setSubscriptionChanges = _useState2[1];
   useEffect(function () {
-    var staticVariables = build$1(variables);
+    var staticVariables = build$2(variables);
     setVariablesState(staticVariables);
   }, [JSON.stringify(variables)]);
   useSubscription(function (data) {
     if (data.variables) {
-      var staticVariables = build$1(variables);
+      var staticVariables = build$2(variables);
       var updatedVariables = _extends({}, staticVariables, data.variables);
       logDebug('Updated variables', updatedVariables);
       setSubscriptionChanges(data.variables);
@@ -26925,10 +26942,16 @@ var watchDataSetFieldChanges = function watchDataSetFieldChanges(dataSet, querya
   }
 };
 
+var useGlobalContext = function useGlobalContext() {
+  return useContext(GlobalContext);
+};
+var GlobalContext = /*#__PURE__*/createContext(undefined);
+
 // How to make sure the queries run when a field in a data set has been changed.
 // need to pass in the data sets here
 
 var useQueryEffect = function useQueryEffect(queries, runQueriesCallback, filterConfig, dataSet, componentType, variables) {
+  var _global$aliasFields;
   var _useState = useState([]),
     results = _useState[0],
     setResults = _useState[1];
@@ -26938,6 +26961,7 @@ var useQueryEffect = function useQueryEffect(queries, runQueriesCallback, filter
   var _useVariablesInDataSe = useVariablesInDataSet(dataSet, queries, variables),
     noOfVariableChanges = _useVariablesInDataSe.noOfVariableChanges;
   var watchCustomFieldChangesKey = watchDataSetFieldChanges(dataSet, queries);
+  var global = useGlobalContext();
   var hasMeasures = function () {
     if (typeof queries === 'object' && queries !== null && 'measure' in queries) {
       return Array.isArray(queries.measure) && queries.measure.length > 0;
@@ -27002,7 +27026,8 @@ var useQueryEffect = function useQueryEffect(queries, runQueriesCallback, filter
     queries: queries,
     filterConfig: filterConfig,
     watchCustomFieldChangesKey: watchCustomFieldChangesKey,
-    noOfVariableChanges: noOfVariableChanges
+    noOfVariableChanges: noOfVariableChanges,
+    aliasFields: (global == null || (_global$aliasFields = global.aliasFields) == null ? void 0 : _global$aliasFields[dataSet.id]) || {}
   })]);
   return {
     results: results,
@@ -73456,7 +73481,6 @@ var VizzlyLoader = /*#__PURE__*/function () {
             if (this.extraCustomFields) {
               dataSets = dataSets.map(function (dataSet) {
                 var newFields = _this2.extraCustomFields ? _this2.extraCustomFields(dataSet) : [];
-                console.log('adding fields', newFields);
                 return _extends({}, dataSet, {
                   fields: [].concat(dataSet.fields, newFields)
                 });
@@ -74462,7 +74486,7 @@ function getOptionsOrders(dataSetField) {
 }
 
 var commonToQueries = function commonToQueries(attributes, dataSet, queryEngineConfig, params) {
-  var _Query$build = build$c(dataSet, attributes.measure, attributes.filter, attributes.order, attributes.dimension,
+  var _Query$build = build$d(dataSet, attributes.measure, attributes.filter, attributes.order, attributes.dimension,
     // @ts-ignore
     attributes.timeDimension || null, attributes.limit, attributes.offset, queryEngineConfig, params),
     query = _Query$build.query,
@@ -74486,7 +74510,7 @@ var toQueries$6 = function toQueries(attributes, dataSet, queryEngineConfig, par
   var measures = [];
   attributes.xMeasure && measures.push(attributes.xMeasure);
   attributes.yMeasure && measures.push(attributes.yMeasure);
-  var _Query$build = build$c(dataSet, measures, attributes.filter, attributes.order, attributes.dimension, attributes.timeDimension, attributes.limit, attributes.offset, queryEngineConfig, params),
+  var _Query$build = build$d(dataSet, measures, attributes.filter, attributes.order, attributes.dimension, attributes.timeDimension, attributes.limit, attributes.offset, queryEngineConfig, params),
     query = _Query$build.query,
     measureDescription = _Query$build.measureDescription;
   var resultFields = toResultFields([measureDescription], queryEngineConfig);
@@ -74498,7 +74522,7 @@ var toQueries$6 = function toQueries(attributes, dataSet, queryEngineConfig, par
 
 var toQueries$7 = function toQueries(attributes, dataSet, queryEngineConfig, params) {
   var measures = [].concat(attributes.measure || [], attributes.xMeasure || [], attributes.zMeasure || []);
-  var _Query$build = build$c(dataSet, measures, attributes.filter, attributes.order, attributes.dimension, attributes.timeDimension, attributes.limit, attributes.offset, queryEngineConfig, params),
+  var _Query$build = build$d(dataSet, measures, attributes.filter, attributes.order, attributes.dimension, attributes.timeDimension, attributes.limit, attributes.offset, queryEngineConfig, params),
     query = _Query$build.query,
     measureDescription = _Query$build.measureDescription;
   var resultFields = toResultFields([measureDescription], queryEngineConfig);
@@ -74509,8 +74533,8 @@ var toQueries$7 = function toQueries(attributes, dataSet, queryEngineConfig, par
 };
 
 var buildMainQueries = function buildMainQueries(attributes, dataSet, queryEngineConfig, params) {
-  var line = build$c(dataSet, attributes.lineMeasure, attributes.filter, attributes.order, attributes.lineDimension, attributes.timeDimension, attributes.limit, attributes.offset, queryEngineConfig, params);
-  var bar = build$c(dataSet, attributes.barMeasure, attributes.filter, attributes.order, attributes.barDimension, attributes.timeDimension, attributes.limit, attributes.offset, queryEngineConfig, params);
+  var line = build$d(dataSet, attributes.lineMeasure, attributes.filter, attributes.order, attributes.lineDimension, attributes.timeDimension, attributes.limit, attributes.offset, queryEngineConfig, params);
+  var bar = build$d(dataSet, attributes.barMeasure, attributes.filter, attributes.order, attributes.barDimension, attributes.timeDimension, attributes.limit, attributes.offset, queryEngineConfig, params);
   return {
     bar: bar,
     line: line
@@ -74529,8 +74553,8 @@ var toQueries$8 = function toQueries(attributes, dataSet, queryEngineConfig, par
 };
 
 var buildMainQueries$1 = function buildMainQueries(attributes, dataSet, queryEngineConfig, params) {
-  var line = build$c(dataSet, attributes.lineMeasure, attributes.filter, attributes.order, attributes.lineDimension, attributes.timeDimension, attributes.limit, attributes.offset, queryEngineConfig, params);
-  var bar = build$c(dataSet, attributes.barMeasure, attributes.filter, attributes.order, attributes.barDimension, attributes.timeDimension, attributes.limit, attributes.offset, queryEngineConfig, params);
+  var line = build$d(dataSet, attributes.lineMeasure, attributes.filter, attributes.order, attributes.lineDimension, attributes.timeDimension, attributes.limit, attributes.offset, queryEngineConfig, params);
+  var bar = build$d(dataSet, attributes.barMeasure, attributes.filter, attributes.order, attributes.barDimension, attributes.timeDimension, attributes.limit, attributes.offset, queryEngineConfig, params);
   return {
     bar: bar,
     line: line
@@ -74582,7 +74606,7 @@ var toQueries$k = function toQueries(attributes, dataSet, queryEngineConfig, par
   var measures = [];
   attributes.xMeasure && measures.push(attributes.xMeasure);
   attributes.yMeasure && measures.push(attributes.yMeasure);
-  var _Query$build = build$c(dataSet, measures, attributes.filter, attributes.order, attributes.dimension, attributes.timeDimension, attributes.limit, attributes.offset, queryEngineConfig, params),
+  var _Query$build = build$d(dataSet, measures, attributes.filter, attributes.order, attributes.dimension, attributes.timeDimension, attributes.limit, attributes.offset, queryEngineConfig, params),
     query = _Query$build.query,
     measureDescription = _Query$build.measureDescription;
   var resultFields = toResultFields([measureDescription], queryEngineConfig);
@@ -74593,7 +74617,7 @@ var toQueries$k = function toQueries(attributes, dataSet, queryEngineConfig, par
 };
 
 var buildMainQuery = function buildMainQuery(attributes, dataSet, queryEngineConfig, params) {
-  var _Query$build = build$c(dataSet, attributes.measure, attributes.filter, [], [], null, 1, attributes.offset, queryEngineConfig, params),
+  var _Query$build = build$d(dataSet, attributes.measure, attributes.filter, [], [], null, 1, attributes.offset, queryEngineConfig, params),
     query = _Query$build.query,
     measureDescription = _Query$build.measureDescription;
 
@@ -74621,7 +74645,7 @@ var buildMainQuery = function buildMainQuery(attributes, dataSet, queryEngineCon
 };
 var buildDeltaQuery = function buildDeltaQuery(dataSet, attributes, queryEngineConfig, params) {
   if (!attributes.deltaTimeDimension) return null;
-  return build$c(dataSet, attributes.measure, attributes.filter, [{
+  return build$d(dataSet, attributes.measure, attributes.filter, [{
     field: attributes.deltaTimeDimension.field,
     direction: 'asc',
     "function": attributes.deltaTimeDimension.truncate
@@ -75461,7 +75485,7 @@ function _toResults() {
   return _toResults.apply(this, arguments);
 }
 
-var getRunQueriesCallback = function getRunQueriesCallback(identityConfig, queryEngineConfig, timeRangeOptions, variables, runQueries, data, queryEngineEndpoint, timeZone) {
+var getRunQueriesCallback = function getRunQueriesCallback(identityConfig, queryEngineConfig, timeRangeOptions, variables, aliasFields, runQueries, data, queryEngineEndpoint, timeZone) {
   var _identityConfig$dataA2;
   var cacheKeyNamespace = fingerprintOfDashboardAccess(identityConfig.dashboardAccess);
   if (runQueries) {
@@ -75484,7 +75508,8 @@ var getRunQueriesCallback = function getRunQueriesCallback(identityConfig, query
                 filterConfig: params.filterConfig || {},
                 timeRangeOptions: timeRangeOptions,
                 timeZone: timeZone,
-                variables: variables
+                variables: variables,
+                aliasFields: aliasFields
               });
             case 2:
               return _context.abrupt("return", _context.sent);
@@ -75516,7 +75541,8 @@ var getRunQueriesCallback = function getRunQueriesCallback(identityConfig, query
                 filterConfig: params.filterConfig || {},
                 timeRangeOptions: timeRangeOptions,
                 timeZone: timeZone,
-                variables: variables
+                variables: variables,
+                aliasFields: aliasFields
               });
             case 2:
               return _context2.abrupt("return", _context2.sent);
@@ -75551,7 +75577,8 @@ var getRunQueriesCallback = function getRunQueriesCallback(identityConfig, query
                 filterConfig: params.filterConfig || {},
                 timeRangeOptions: timeRangeOptions,
                 timeZone: timeZone,
-                variables: variables
+                variables: variables,
+                aliasFields: aliasFields
               });
             case 2:
               return _context3.abrupt("return", _context3.sent);
@@ -76013,7 +76040,7 @@ var VizzlyServices = /*#__PURE__*/function () {
               }
               return undefined;
             }();
-            runQueriesCallback = getRunQueriesCallback(service.identityConfig, service.queryEngineConfig, build$b(defaultText, params == null ? void 0 : params.dateFilterOptions), (params == null ? void 0 : params.variables) || {}, params == null ? void 0 : params.runQueries, params == null ? void 0 : params.data, queryEngineEndpoint);
+            runQueriesCallback = getRunQueriesCallback(service.identityConfig, service.queryEngineConfig, build$c(defaultText, params == null ? void 0 : params.dateFilterOptions), (params == null ? void 0 : params.variables) || {}, (params == null ? void 0 : params.aliasFields) || {}, params == null ? void 0 : params.runQueries, params == null ? void 0 : params.data, queryEngineEndpoint);
             fetch = /*#__PURE__*/function () {
               var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10() {
                 var _params$abortControll;
@@ -77495,6 +77522,20 @@ var api = function api(config) {
   };
 };
 
+var useAliasFields = function useAliasFields(dashboardId) {
+  var _useState = useState({}),
+    aliasFieldsState = _useState[0],
+    setAliasFieldsState = _useState[1];
+  useSubscription(function (data) {
+    if (data.aliasFields) {
+      setAliasFieldsState(data.aliasFields);
+    }
+  }, dashboardId);
+  return {
+    aliasFields: aliasFieldsState
+  };
+};
+
 var buildQueryEngineSignInUrl = function buildQueryEngineSignInUrl(queryEngineEndpoint, queryEngineAccessToken) {
   if (!queryEngineAccessToken) return '';
   var authToken = queryEngineAccessToken;
@@ -77517,891 +77558,364 @@ var FailedToSaveError = /*#__PURE__*/function (_Error) {
   return FailedToSaveError;
 }( /*#__PURE__*/_wrapNativeSuper(Error));
 
-var StatusLine = function StatusLine(props) {
-  return jsx("div", {
-    children: jsxs("span", {
-      children: [jsxs("span", {
-        className: styles({
-          marginRight: '12px'
-        }),
-        children: [props.status === true && jsx(SuccessIcon, {}), props.status === false && jsx(FailureIcon, {}), props.status === null && jsx(UnknownIcon, {})]
-      }), props.status === true && props.successMessage, props.status === false && props.errorMessage, props.status === null && props.unknownMessage]
-    })
-  });
-};
-var DisplayStatusReport = function DisplayStatusReport(props) {
-  var connections = props.statusReport.configs.flatMap(function (c) {
-    return c.connections;
-  });
-  return jsxs("div", {
-    className: styles({
-      display: 'grid',
-      gridTemplateColumns: '1fr',
-      gap: '16px',
-      marginTop: '16px'
-    }),
-    children: [jsx(StatusLine, {
-      status: every(props.statusReport.configs, function (c) {
-        return c.validationErrorDetails === null;
-      }),
-      successMessage: "All configs are valid",
-      errorMessage: "Not all configs are valid",
-      unknownMessage: "We did not run any config validation checks"
-    }), jsx(StatusLine, {
-      status: connections.length > 0 ? every(connections, function (conn) {
-        return !!conn.pingResult;
-      }) : null,
-      successMessage: "All connection checks passed",
-      errorMessage: "Not all connection checks passed",
-      unknownMessage: "We did not run a connection check"
-    }), jsx(StatusLine, {
-      status: !!props.statusReport.projectId ? true : null,
-      successMessage: "Valid project ID",
-      errorMessage: "Failed to find your project ID. Please ensure the VIZZLY_PROJECT_ID environment variable has been set",
-      unknownMessage: "Failed to find your project ID. Please ensure the VIZZLY_PROJECT_ID environment variable has been set"
-    }), jsx(StatusLine, {
-      status: true,
-      successMessage: "Using configs from " + humanReadableList(props.statusReport.configs.flatMap(function (c) {
-        var noConnections = c.connections.length === 0;
-        var noDataSets = c.dataSets.length === 0;
-        var noPublicKeys = c.publicKeys.length === 0;
-        var noSqlViews = c.sqlViews.length === 0;
-        if (noConnections && noDataSets && noPublicKeys && noSqlViews) return [];
-        return [c.source.name];
-      })) + ".",
-      errorMessage: "Failed to load configs",
-      unknownMessage: "Failed to load configs"
-    })]
-  });
-};
-var SuccessIcon = function SuccessIcon() {
-  return jsx("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    strokeWidth: 1.5,
-    stroke: "currentColor",
-    className: styles({
-      width: '24px',
-      height: '24px',
-      display: 'inline-block'
-    }),
-    children: jsx("path", {
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      d: "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-    })
-  });
+var getDefaultParentDashboardId = function getDefaultParentDashboardId(parentDashboardId, parentDashboardIdOnDashboardAccessToken, dashboards) {
+  if (parentDashboardId) {
+    var parentDashboard = find$1(dashboards, parentDashboardId);
+    if (!(parentDashboard != null && parentDashboard.parentDashboardId)) {
+      return parentDashboardId;
+    } else {
+      throw '[Vizzly] `parentDashboardId` value must specify an ID for a parent dashboard.';
+    }
+  }
+  var parentDashboards = getParentDashboards(dashboards);
+  var programmaticDashboardId = checkAndReturnProgrammaticDashboardId(parentDashboards);
+  if (programmaticDashboardId) return programmaticDashboardId;
+  return parentDashboardIdOnDashboardAccessToken || getFirstCreated(parentDashboards).id;
 };
-var FailureIcon = function FailureIcon() {
-  return jsx("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    strokeWidth: 1.5,
-    stroke: "currentColor",
-    className: styles({
-      width: '24px',
-      height: '24px',
-      display: 'inline-block'
-    }),
-    children: jsx("path", {
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
-    })
+
+var getStrategy = function getStrategy(vizzly, requestedEndUserParentDashboardId, requestedEndUserDashboardId, isEditor) {
+  if (!('dashboards' in vizzly)) return undefined;
+  if (vizzly.loading || vizzly.error) return undefined;
+  logDebug('Loading dashboard strategy, with props;', {
+    dashboardId: requestedEndUserDashboardId,
+    parentDashboardId: requestedEndUserParentDashboardId
   });
-};
-var UnknownIcon = function UnknownIcon() {
-  return jsx("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    strokeWidth: 1.5,
-    stroke: "currentColor",
-    className: styles({
-      width: '24px',
-      height: '24px',
-      display: 'inline-block'
-    }),
-    children: jsx("path", {
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      d: "M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-    })
+
+  // This is a temporary fix for the issue where the dashboard is not loaded due to multiple hooks.
+  var checkToStopStrategyCheckingWhenDashboardNotLoadedDueToMultipleHooks = isEditor && vizzly.dashboards.length === 0;
+  if (checkToStopStrategyCheckingWhenDashboardNotLoadedDueToMultipleHooks) return undefined;
+  var defaultParentDashboardId = getDefaultParentDashboardId(requestedEndUserParentDashboardId, vizzly.identityConfig.dashboardAccess.dashboardId, vizzly.dashboards);
+  if (vizzly.accessType == 'admin') {
+    logDebug('Admin access found, so we will show the parent dashboard.', defaultParentDashboardId);
+    var dashboardId = defaultParentDashboardId;
+
+    // If the user wants a specific dashboard, then fetch the parent dashboard of it.
+    if (requestedEndUserDashboardId) {
+      var foundRequestedChildDashboard = vizzly.dashboards.find(function (dashboard) {
+        return dashboard.id == requestedEndUserDashboardId;
+      });
+      if (foundRequestedChildDashboard != null && foundRequestedChildDashboard.parentDashboardId) {
+        logDebug('A child dashboard was provided whilst in admin mode. Therefore the parent of the given child will be shown to administer.', foundRequestedChildDashboard.parentDashboardId);
+        dashboardId = foundRequestedChildDashboard.parentDashboardId;
+      }
+    }
+    logDebug('Admin access found, so we will show the parent dashboard.', dashboardId);
+    return {
+      type: 'exact',
+      dashboardId: dashboardId
+    };
+  }
+  if (requestedEndUserDashboardId) {
+    logDebug('Strategy will be to show dashboard', requestedEndUserDashboardId);
+    return {
+      type: 'exact',
+      dashboardId: requestedEndUserDashboardId
+    };
+  }
+  var childDashboards = vizzly.dashboards.filter(function (d) {
+    var isChildDashboard = d.parentDashboardId != null;
+    var hasNotRequestedEndUserParentDashboardId = requestedEndUserParentDashboardId === undefined;
+    var isChildOfRequestedParent = hasNotRequestedEndUserParentDashboardId || d.parentDashboardId === requestedEndUserParentDashboardId;
+    return isChildDashboard && isChildOfRequestedParent;
   });
+
+  // Exactly one child dashboard for the user & in read-only mode so someone else is managing the dashboard with the same userReference.
+  // We will show that one dashboard to allow for a common SaaS environment where
+  // multiple users share the same userReference, but some of those users have `read_write` access and other users have read access.
+  // Those with `read` access should see the dashboard managed by those other users...
+  if (childDashboards.length === 1 && vizzly.identityConfig.dashboardAccess.scope == 'read') {
+    logDebug('Strategy will be to show read-only view of the only child dashboard. If you wish to render a read-only view of the parent dashboard, please make sure the `dashboardId` property matches the `parentDashboardId` property.', defaultParentDashboardId);
+    return {
+      type: 'exact',
+      dashboardId: vizzly.dashboards.find(function (d) {
+        return d.parentDashboardId != null;
+      }).id
+    };
+  }
+
+  // No specific dashboard requested, but dashboard access token only grants 'read' access.
+  if (vizzly.identityConfig.dashboardAccess.scope == 'read' && defaultParentDashboardId) {
+    logDebug('Strategy will be to return read-only view of the parent dashboard.', defaultParentDashboardId);
+    return {
+      type: 'exact',
+      dashboardId: defaultParentDashboardId
+    };
+  }
+  var dashboardIdSetInIdentityConfig = vizzly.identityConfig.dashboardAccess.dashboardId;
+  if (dashboardIdSetInIdentityConfig) {
+    var _vizzly$identityConfi, _vizzly$identityConfi2;
+    logDebug('Strategy will be to show a child of the parent dashboard determined by the identity config', (_vizzly$identityConfi = vizzly.identityConfig.dashboardAccess) == null ? void 0 : _vizzly$identityConfi.dashboardId);
+    return {
+      type: 'instantCopyOf',
+      parentDashboardId: (_vizzly$identityConfi2 = vizzly.identityConfig.dashboardAccess) == null ? void 0 : _vizzly$identityConfi2.dashboardId
+    };
+  } else {
+    logDebug('Strategy will be to show a child of the parent dashboard', defaultParentDashboardId);
+    return {
+      type: 'instantCopyOf',
+      parentDashboardId: defaultParentDashboardId
+    };
+  }
 };
 
-var status = /*#__PURE__*/function () {
-  var _ref = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(queryEngineEndpoint, abortSignal) {
-    var client, _yield$client, status, body;
+var Mode = /*#__PURE__*/function (Mode) {
+  Mode["Admin"] = "admin";
+  Mode["EndUser"] = "endUser";
+  return Mode;
+}({});
+var Scope = /*#__PURE__*/function (Scope) {
+  Scope["Read"] = "read";
+  Scope["ReadWrite"] = "read_write";
+  return Scope;
+}({});
+
+/*
+  Currently, we just replicate the same behaviour as what we used to have on the API.
+*/
+var runStrategy = /*#__PURE__*/function () {
+  var _ref = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(strategy, vizzly) {
+    var currentDashboard, scope, _parentDashboard$perm, parentDashboard, hasParentDashboardWritePermission, dashboardCopies, mostRecentlyUpdatedChildDashboard, created;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          client = queryEngineHttpClient(queryEngineEndpoint);
-          _context.next = 3;
-          return client({
-            path: '/api/v2/status',
-            method: 'post',
-            mode: 'cors',
-            abortSignal: abortSignal,
-            body: {}
+          if (!(strategy.type == 'exact')) {
+            _context.next = 9;
+            break;
+          }
+          currentDashboard = vizzly.dashboards.find(function (d) {
+            return d.id === strategy.dashboardId;
           });
-        case 3:
-          _yield$client = _context.sent;
-          status = _yield$client.status;
-          body = _yield$client.body;
-          return _context.abrupt("return", status == 200 ? body : null);
-        case 7:
+          if (currentDashboard.permission) {
+            _context.next = 4;
+            break;
+          }
+          throw '';
+        case 4:
+          scope = currentDashboard.permission.scope;
+          logDebug('A specific dashboard has been requested. This will be rendered with', scope, 'scope.', strategy.dashboardId);
+          return _context.abrupt("return", {
+            dashboardId: strategy.dashboardId,
+            mode: scope === 'read_write' && currentDashboard.parentDashboardId === null ? Mode.Admin : Mode.EndUser,
+            scope: scope
+          });
+        case 9:
+          if (!(strategy.type == 'instantCopyOf')) {
+            _context.next = 29;
+            break;
+          }
+          // If the user has write access to the parent dashboard, then we return that dashboard ID, with mode=admin
+          parentDashboard = vizzly.dashboards.find(function (d) {
+            return d.id === strategy.parentDashboardId;
+          });
+          hasParentDashboardWritePermission = ((_parentDashboard$perm = parentDashboard.permission) == null ? void 0 : _parentDashboard$perm.scope) === 'read_write';
+          if (!hasParentDashboardWritePermission) {
+            _context.next = 15;
+            break;
+          }
+          logDebug('Write access to the parent dashboard has been found, so this dashboard will be shown with admin access.', strategy.parentDashboardId);
+          return _context.abrupt("return", {
+            dashboardId: strategy.parentDashboardId,
+            mode: Mode.Admin,
+            scope: Scope.ReadWrite
+          });
+        case 15:
+          dashboardCopies = getCopiesOfParentDashboard(strategy.parentDashboardId, vizzly.dashboards);
+          mostRecentlyUpdatedChildDashboard = takeMostRecentlyUpdated(dashboardCopies);
+          if (!mostRecentlyUpdatedChildDashboard) {
+            _context.next = 20;
+            break;
+          }
+          logDebug('An existing child dashboard exists of the parent dashboard. As no specific dashboardId was provided, we will render the most recently updated child dashboard', mostRecentlyUpdatedChildDashboard.id);
+          return _context.abrupt("return", {
+            dashboardId: mostRecentlyUpdatedChildDashboard.id,
+            mode: Mode.EndUser,
+            scope: mostRecentlyUpdatedChildDashboard.permission.scope
+          });
+        case 20:
+          logDebug('No previous child dashboard has been created on behalf of the current user for the parent dashboard', parentDashboard.id, '. Creating a child copy of the parent.');
+          _context.next = 23;
+          return vizzly.createDashboard({
+            parentDashboardId: parentDashboard.id,
+            definition: toSaveableDefinition(parentDashboard),
+            metadata: {}
+          });
+        case 23:
+          created = _context.sent;
+          if (created) {
+            _context.next = 26;
+            break;
+          }
+          throw 'Failed to create first child dashboard for the user.';
+        case 26:
+          return _context.abrupt("return", {
+            dashboardId: created.id,
+            scope: Scope.ReadWrite,
+            mode: Mode.EndUser
+          });
+        case 29:
+          throw "Unsupported strategy";
+        case 30:
         case "end":
           return _context.stop();
       }
     }, _callee);
   }));
-  return function status(_x, _x2) {
+  return function runStrategy(_x, _x2) {
     return _ref.apply(this, arguments);
   };
 }();
 
-var Code$3 = function Code(props) {
-  var code = jsx("code", {
-    style: {
-      background: 'rgba(0, 0, 0, 0.05)',
-      borderRadius: '5px',
-      padding: '2px 5px'
-    },
-    children: props.children
-  });
-  if (!props.href) return code;
-  return jsx("a", {
-    target: "_blank",
-    href: props.href,
-    children: code
-  });
-};
-var ImplementationNotice = function ImplementationNotice(props) {
-  var _useState = useState(undefined),
-    queryEngineStatus = _useState[0],
-    setQueryEngineStatus = _useState[1];
+/*
+  Stores which dashboard is the currently active one...
+*/
+var useDashboardStrategy = function useDashboardStrategy(strategy, vizzly, programmaticDashboard) {
+  var _useState = useState(),
+    state = _useState[0],
+    setState = _useState[1];
   useEffect(function () {
-    var abortController = new AbortController();
-    var doFetch = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(queryEngineEndpoint) {
-        var stop, statusBody;
+    var doWork = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var _yield$runStrategy, mode, dashboardId, scope;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              stop = setTimeout(function () {
-                if (!abortController.signal.aborted && queryEngineStatus === undefined) {
-                  abortController.abort();
-                  setQueryEngineStatus(null);
-                }
-              }, 2000);
-              _context.prev = 1;
-              _context.next = 4;
-              return status(queryEngineEndpoint, abortController.signal);
+              if ('dashboards' in vizzly) {
+                _context.next = 2;
+                break;
+              }
+              return _context.abrupt("return");
+            case 2:
+              if (strategy) {
+                _context.next = 4;
+                break;
+              }
+              return _context.abrupt("return");
             case 4:
-              statusBody = _context.sent;
-              clearTimeout(stop);
-              if (statusBody) {
-                setQueryEngineStatus(statusBody);
-              } else {
-                setQueryEngineStatus(null);
+              if (!vizzly.loading) {
+                _context.next = 6;
+                break;
               }
-              _context.next = 12;
+              return _context.abrupt("return");
+            case 6:
+              _context.next = 8;
+              return runStrategy(strategy, vizzly);
+            case 8:
+              _yield$runStrategy = _context.sent;
+              mode = _yield$runStrategy.mode;
+              dashboardId = _yield$runStrategy.dashboardId;
+              scope = _yield$runStrategy.scope;
+              if (dashboardId != (state == null ? void 0 : state.dashboardId)) setState({
+                mode: mode,
+                dashboardId: dashboardId,
+                scope: scope
+              });
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function doWork() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    doWork();
+  }, [JSON.stringify({
+    strategy: strategy,
+    loading: vizzly.loading
+  })]);
+  if (!('dashboards' in vizzly)) return null;
+  if (!state) return null;
+  if (vizzly.loading) return null;
+  var dashboard = vizzly.dashboards.find(function (dash) {
+    return dash.id == state.dashboardId;
+  }) || null;
+  return {
+    mode: state.mode,
+    dashboard: dashboard,
+    scope: state.scope,
+    isProgrammaticParent: !!programmaticDashboard
+  };
+};
+
+var NoDataSetResolved = /*#__PURE__*/function (_Error) {
+  function NoDataSetResolved() {
+    var _this;
+    _this = _Error.call(this, 'At least one data set must be built for the Vizzly dashboard to render.') || this;
+    _this.name = 'NoDataSetResolved';
+    return _this;
+  }
+  _inheritsLoose(NoDataSetResolved, _Error);
+  return NoDataSetResolved;
+}( /*#__PURE__*/_wrapNativeSuper(Error));
+
+var useVizzly = function useVizzly(properties, options) {
+  var _useState = useState({
+      loading: true,
+      error: undefined,
+      dashboards: [],
+      globalLibraries: []
+    }),
+    state = _useState[0],
+    setState = _useState[1];
+  var vizzlyRef = useRef();
+  var vizzly = vizzlyRef.current;
+  useEffect(function () {
+    var abortController = new AbortController();
+    var doWork = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var _yield$Promise$all, globalLibraries, dashboards;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return Vizzly$1.load(properties, _extends({}, options, {
+                apiHost: (options == null ? void 0 : options.apiHost) || 'https://api.vizzly.co'
+              }));
+            case 3:
+              vizzlyRef.current = _context.sent;
+              _context.next = 6;
+              return Promise.all([vizzlyRef.current.getGlobalLibraries({
+                abortController: abortController
+              }), vizzlyRef.current.getDashboards({
+                abortController: abortController
+              })]);
+            case 6:
+              _yield$Promise$all = _context.sent;
+              globalLibraries = _yield$Promise$all[0];
+              dashboards = _yield$Promise$all[1];
+              setState({
+                loading: false,
+                error: undefined,
+                dashboards: dashboards,
+                globalLibraries: globalLibraries
+              });
+              _context.next = 16;
               break;
-            case 9:
-              _context.prev = 9;
-              _context.t0 = _context["catch"](1);
-              setQueryEngineStatus(null);
             case 12:
+              _context.prev = 12;
+              _context.t0 = _context["catch"](0);
+              logError('Error loading Vizzly', _context.t0);
+              setState({
+                loading: false,
+                error: _context.t0,
+                dashboards: [].concat(state.dashboards),
+                globalLibraries: [].concat(state.globalLibraries)
+              });
+            case 16:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[1, 9]]);
+        }, _callee, null, [[0, 12]]);
       }));
-      return function doFetch(_x) {
+      return function doWork() {
         return _ref.apply(this, arguments);
       };
     }();
-    props.implementationMeta.type == 'query-engine' && props.implementationMeta.queryEngineEndpoint && doFetch(props.implementationMeta.queryEngineEndpoint);
+    doWork();
     return function () {
-      abortController.abort('Setup notice unmounted');
-    };
-  }, []);
-  return jsx(EmptyContainer, {
-    title: "Vizzly set up",
-    renderExtra: function renderExtra() {
-      return jsxs("div", {
-        style: {
-          width: '650px'
-        },
-        children: [props.helpSections.map(function (helpSection, indexHelp) {
-          return jsxs("div", {
-            className: styles({
-              margin: '24px 0',
-              borderRadius: '8px',
-              padding: '12px',
-              backgroundColor: '#f3f5f9'
-            }),
-            children: [jsxs("div", {
-              className: styles({
-                textAlign: 'left'
-              }),
-              children: [jsx("h2", {
-                className: ["" + css.text, styles({
-                  fontWeight: 'bold',
-                  marginBottom: '12px'
-                })].join(' '),
-                children: helpSection.title
-              }), helpSection.text.map(function (paragraph, index) {
-                return jsx("p", {
-                  className: ["" + css.text, styles({
-                    marginBottom: '8px'
-                  })].join(' '),
-                  children: paragraph
-                }, index);
-              })]
-            }), helpSection.callToAction && jsx("div", {
-              className: styles({
-                textAlign: 'right',
-                marginTop: '24px'
-              }),
-              children: jsx("a", {
-                target: "_blank",
-                href: helpSection.callToAction.link,
-                children: jsx(Button$2, {
-                  children: helpSection.callToAction.text
-                })
-              })
-            })]
-          }, indexHelp);
-        }), queryEngineStatus !== undefined && jsxs("div", {
-          className: styles({
-            textAlign: 'left',
-            borderRadius: '8px',
-            marginTop: '12px',
-            padding: '12px',
-            width: '100%',
-            backgroundColor: '#f3f5f9'
-          }),
-          children: [queryEngineStatus === null && jsxs(Fragment$1, {
-            children: [jsx("h2", {
-              className: ["" + css.text, styles({
-                fontWeight: 'bold',
-                marginBottom: '12px'
-              })].join(' '),
-              children: "Vizzly Query Engine not found"
-            }), jsxs("p", {
-              className: "" + css.text,
-              children: ["If you have deployed the Vizzly Query Engine, then please set the ", jsx(Code$3, {
-                children: "queryEngineEndpoint"
-              }), ' ', "property to the URL where it is deployed too."]
-            }), jsx("div", {
-              className: styles({
-                textAlign: 'right',
-                marginTop: '8px'
-              }),
-              children: jsx("a", {
-                target: "_blank",
-                href: "https://docs.vizzly.co/query-engines/self-hosted-query-engine",
-                children: jsx(Button$2, {
-                  children: "Deploy the Query Engine"
-                })
-              })
-            })]
-          }), queryEngineStatus && jsxs(Fragment$1, {
-            children: [jsx("h2", {
-              className: ["" + css.text, styles({
-                fontWeight: 'bold',
-                margin: '12px 0 '
-              })].join(' '),
-              children: "Query engine status"
-            }), jsx(DisplayStatusReport, {
-              statusReport: queryEngineStatus
-            })]
-          })]
-        })]
-      });
-    }
-  });
-};
-var NewSelfHostedVizzlyImplementationNotice = function NewSelfHostedVizzlyImplementationNotice(props) {
-  return jsx(ImplementationNotice, {
-    implementationMeta: props.implementationMeta,
-    helpSections: [{
-      title: 'Identity',
-      callToAction: {
-        link: 'https://docs.vizzly.co/dashboard/properties/identity',
-        text: 'Set up identity'
-      },
-      text: [jsxs(Fragment$1, {
-        children: ["We need to replace the current placeholder ", jsx(Code$3, {
-          children: "identity"
-        }), " function with your own identity logic."]
-      }), 'Typically, this is an HTTPS call to your servers to retrieve the Vizzly identity tokens.']
-    }]
-  });
-};
-var TokensNotStrings = function TokensNotStrings(props) {
-  return jsx(ImplementationNotice, {
-    implementationMeta: props.implementationMeta,
-    helpSections: [{
-      title: 'Identity',
-      callToAction: {
-        link: 'https://docs.vizzly.co/dashboard/properties/identity',
-        text: 'See the docs'
-      },
-      text: ['The async identity function must return the Vizzly access tokens in the correct format.']
-    }]
-  });
-};
-var AtLeastOneDataSetRequired = function AtLeastOneDataSetRequired(props) {
-  var text = [];
-  switch (props.implementationMeta.type) {
-    case 'custom':
-    case 'in-browser':
-      text = [jsxs(Fragment$1, {
-        children: ["The ", jsx(Code$3, {
-          href: "https://docs.vizzly.co/dashboard/properties/dataSets",
-          children: "dataSets"
-        }), "function must provide at least one data set"]
-      })];
-      break;
-    case 'query-engine':
-      text = [jsx(Fragment$1, {
-        children: "To start using the Vizzly dashboard, you must add a data set to the Vizzly Query Engine."
-      }), jsx(Fragment$1, {
-        children: "If you have already done this, check the `dataSets` value in your identity token to make sure it allows at least one data set to be returned."
-      })];
-      break;
-  }
-  return jsx(ImplementationNotice, {
-    implementationMeta: props.implementationMeta,
-    helpSections: [{
-      title: 'At least one data set must be provided',
-      callToAction: {
-        link: 'https://docs.vizzly.co/dashboard/properties/dataSets',
-        text: 'See the docs'
-      },
-      text: text
-    }]
-  });
-};
-var InvalidDataSetsNotice = function InvalidDataSetsNotice(props) {
-  return jsx(ImplementationNotice, {
-    implementationMeta: props.implementationMeta,
-    helpSections: [{
-      title: 'We did not fetch your data sets.',
-      callToAction: {
-        link: 'https://docs.vizzly.co/dashboard/properties/dataSets',
-        text: 'See the docs'
-      },
-      text: [jsxs(Fragment$1, {
-        children: ["If you are using the Vizzly Query Engine, then you will need to set the", ' ', jsx(Code$3, {
-          href: "https://docs.vizzly.co/dashboard/properties/queryEngineEndpoint",
-          children: "queryEngineEndpoint"
-        }), ' ', "property on the dashboard."]
-      }), jsxs(Fragment$1, {
-        children: ["Alternatively, if you are not using the Vizzly Query Engine, then the", ' ', jsx(Code$3, {
-          href: "https://docs.vizzly.co/dashboard/properties/dataSets",
-          children: "dataSets"
-        }), " property is required, and it must be an async function."]
-      })]
-    }]
-  });
-};
-var InvalidQueryEngineEndpointNotice = function InvalidQueryEngineEndpointNotice(props) {
-  return jsx(ImplementationNotice, {
-    implementationMeta: props.implementationMeta,
-    helpSections: [{
-      title: 'Query Engine Endpoint',
-      callToAction: {
-        link: 'https://docs.vizzly.co/dashboard/properties/queryEngineEndpoint',
-        text: 'See the docs'
-      },
-      text: [jsxs(Fragment$1, {
-        children: ["Incorrect ", jsx(Code$3, {
-          children: "queryEngineEndpoint"
-        }), " value", props.invalidEndpoint ? " (" + JSON.stringify(props.invalidEndpoint) + ")" : '', ". Please deploy the", ' ', jsx("a", {
-          className: styles({
-            textDecoration: 'underline'
-          }),
-          href: "https://docs.vizzly.co/query-engines/self-hosted",
-          children: "Vizzly Query Engine"
-        }), ", and then provide the URL to it as a string, or as an object with a string host value."]
-      })]
-    }]
-  });
-};
-var InvalidIdentityFunctionNotice = function InvalidIdentityFunctionNotice(props) {
-  return jsx(ImplementationNotice, {
-    implementationMeta: props.implementationMeta,
-    helpSections: [{
-      title: 'Identity',
-      callToAction: {
-        link: 'https://docs.vizzly.co/dashboard/properties/identity',
-        text: 'See the docs'
-      },
-      text: [jsxs(Fragment$1, {
-        children: [jsx(Code$3, {
-          children: "identity"
-        }), " must be an async function that returns your Vizzly identity tokens."]
-      })]
-    }]
-  });
-};
-
-// export const IdentityMustBeCallbackNotice = () => {
-//   return (
-//     <EmptyContainer
-//       title="There is an issue with your configuration settings."
-//       renderExtra={() => (
-//         <p className={`${css.text}`}>See logs for more details.</p>
-//       )}
-//     />
-//   );
-// };
-
-// export const InvalidQueryEngineEndpointNotice = (props: {
-// invalidEndpoint?: string;
-// invalidType?: boolean;
-// }) => (
-//   <EmptyContainer
-//     title="Invalid Query Engine Endpoint"
-//     renderExtra={() => (
-//       <>
-//         <p
-//           className={`${css.text}`}
-//         >
-// Incorrect `queryEngineEndpoint` value{props.invalidEndpoint ? ` (${JSON.stringify(props.invalidEndpoint)})` : ''}.
-// Please deploy the <a href="https://docs.vizzly.co/query-engines/self-hosted">Vizzly Query Engine</a>, and then provide the URL to it as a string.
-//         </p>
-//         <div>
-//           <Button secondary onClick={() => window.location.reload()}>
-//             Retry
-//           </Button>
-//         </div>
-//       </>
-//     )}
-//   />
-// );
-
-var NoDataSetResolved = /*#__PURE__*/function (_Error) {
-  function NoDataSetResolved() {
-    var _this;
-    _this = _Error.call(this, 'At least one data set must be built for the Vizzly dashboard to render.') || this;
-    _this.name = 'NoDataSetResolved';
-    return _this;
-  }
-  _inheritsLoose(NoDataSetResolved, _Error);
-  return NoDataSetResolved;
-}( /*#__PURE__*/_wrapNativeSuper(Error));
-
-var SetupError = function SetupError(props) {
-  logError(props.error);
-  var renderedError = jsx("p", {
-    children: "Unknown error"
-  });
-  if (props.error instanceof NoDataSetResolved) {
-    renderedError = jsx(AtLeastOneDataSetRequired, {
-      implementationMeta: props.implementationMeta
-    });
-  }
-  if (props.error instanceof InvalidDataSetsPropType) {
-    renderedError = jsx(InvalidDataSetsNotice, {
-      implementationMeta: props.implementationMeta
-    });
-  }
-  if (props.error instanceof InvalidQueryEngineEndpointType) {
-    renderedError = jsx(InvalidQueryEngineEndpointNotice, {
-      implementationMeta: props.implementationMeta,
-      invalidType: true
-    });
-  }
-  if (props.error instanceof InvalidQueryEngineEndpoint) {
-    renderedError = jsx(InvalidQueryEngineEndpointNotice, {
-      implementationMeta: props.implementationMeta,
-      invalidEndpoint: props.error.invalidEndpoint
-    });
-  }
-  if (props.error instanceof InvalidIdentityPropType) {
-    renderedError = jsx(InvalidIdentityFunctionNotice, {
-      implementationMeta: props.implementationMeta
-    });
-  }
-  if (props.error instanceof FailedToLoadIdentity) {
-    renderedError = jsx(IdentityCallbackFailedNotice, {});
-  }
-  if (props.error instanceof InvalidIdentityReturn) {
-    renderedError = jsx(TokensNotStrings, {
-      implementationMeta: props.implementationMeta
-    });
-  }
-  if (props.error instanceof FailedToLoadQueryEngineConfig) {
-    renderedError = jsx(FailedToLoadQueryEngineConfigNotice, {});
-  }
-  if (props.error instanceof FailedToResolveDataSets) {
-    renderedError = jsx(DatasetMustBeCallbackNotice, {});
-  }
-  if (props.error instanceof NewVizzlyImplementation) {
-    renderedError = jsx(NewSelfHostedVizzlyImplementationNotice, {
-      implementationMeta: props.implementationMeta
-    });
-  }
-  if (props.error instanceof LoadingAborted) {
-    renderedError = jsx(LoadingComponent, {
-      override: props.renderLoadingComponent
-    });
-  }
-  return jsxs(ThemeProvider, {
-    children: [jsx(VizzlyGlobalStyles, {}), renderedError]
-  });
-};
-
-var getDefaultParentDashboardId = function getDefaultParentDashboardId(parentDashboardId, parentDashboardIdOnDashboardAccessToken, dashboards) {
-  if (parentDashboardId) {
-    var parentDashboard = find$1(dashboards, parentDashboardId);
-    if (!(parentDashboard != null && parentDashboard.parentDashboardId)) {
-      return parentDashboardId;
-    } else {
-      throw '[Vizzly] `parentDashboardId` value must specify an ID for a parent dashboard.';
-    }
-  }
-  var parentDashboards = getParentDashboards(dashboards);
-  var programmaticDashboardId = checkAndReturnProgrammaticDashboardId(parentDashboards);
-  if (programmaticDashboardId) return programmaticDashboardId;
-  return parentDashboardIdOnDashboardAccessToken || getFirstCreated(parentDashboards).id;
-};
-
-var getStrategy = function getStrategy(vizzly, requestedEndUserParentDashboardId, requestedEndUserDashboardId, isEditor) {
-  if (!('dashboards' in vizzly)) return undefined;
-  if (vizzly.loading || vizzly.error) return undefined;
-  logDebug('Loading dashboard strategy, with props;', {
-    dashboardId: requestedEndUserDashboardId,
-    parentDashboardId: requestedEndUserParentDashboardId
-  });
-  // This is a temporary fix for the issue where the dashboard is not loaded due to multiple hooks.
-  var checkToStopStrategyCheckingWhenDashboardNotLoadedDueToMultipleHooks = isEditor && vizzly.dashboards.length === 0;
-  if (checkToStopStrategyCheckingWhenDashboardNotLoadedDueToMultipleHooks) return undefined;
-  var defaultParentDashboardId = getDefaultParentDashboardId(requestedEndUserParentDashboardId, vizzly.identityConfig.dashboardAccess.dashboardId, vizzly.dashboards);
-  if (vizzly.accessType == 'admin') {
-    logDebug('Admin access found, so we will show the parent dashboard.', defaultParentDashboardId);
-    var dashboardId = defaultParentDashboardId;
-    // If the user wants a specific dashboard, then fetch the parent dashboard of it.
-    if (requestedEndUserDashboardId) {
-      var foundRequestedChildDashboard = vizzly.dashboards.find(function (dashboard) {
-        return dashboard.id == requestedEndUserDashboardId;
-      });
-      if (foundRequestedChildDashboard != null && foundRequestedChildDashboard.parentDashboardId) {
-        logDebug('A child dashboard was provided whilst in admin mode. Therefore the parent of the given child will be shown to administer.', foundRequestedChildDashboard.parentDashboardId);
-        dashboardId = foundRequestedChildDashboard.parentDashboardId;
-      }
-    }
-    logDebug('Admin access found, so we will show the parent dashboard.', dashboardId);
-    return {
-      type: 'exact',
-      dashboardId: dashboardId
-    };
-  }
-  if (requestedEndUserDashboardId) {
-    logDebug('Strategy will be to show dashboard', requestedEndUserDashboardId);
-    return {
-      type: 'exact',
-      dashboardId: requestedEndUserDashboardId
-    };
-  }
-  var childDashboards = vizzly.dashboards.filter(function (d) {
-    var isChildDashboard = d.parentDashboardId != null;
-    var hasNotRequestedEndUserParentDashboardId = requestedEndUserParentDashboardId === undefined;
-    var isChildOfRequestedParent = hasNotRequestedEndUserParentDashboardId || d.parentDashboardId === requestedEndUserParentDashboardId;
-    return isChildDashboard && isChildOfRequestedParent;
-  });
-  // Exactly one child dashboard for the user & in read-only mode so someone else is managing the dashboard with the same userReference.
-  // We will show that one dashboard to allow for a common SaaS environment where
-  // multiple users share the same userReference, but some of those users have `read_write` access and other users have read access.
-  // Those with `read` access should see the dashboard managed by those other users...
-  if (childDashboards.length === 1 && vizzly.identityConfig.dashboardAccess.scope == 'read') {
-    logDebug('Strategy will be to show read-only view of the only child dashboard. If you wish to render a read-only view of the parent dashboard, please make sure the `dashboardId` property matches the `parentDashboardId` property.', defaultParentDashboardId);
-    return {
-      type: 'exact',
-      dashboardId: vizzly.dashboards.find(function (d) {
-        return d.parentDashboardId != null;
-      }).id
-    };
-  }
-  // No specific dashboard requested, but dashboard access token only grants 'read' access.
-  if (vizzly.identityConfig.dashboardAccess.scope == 'read' && defaultParentDashboardId) {
-    logDebug('Strategy will be to return read-only view of the parent dashboard.', defaultParentDashboardId);
-    return {
-      type: 'exact',
-      dashboardId: defaultParentDashboardId
-    };
-  }
-  var dashboardIdSetInIdentityConfig = vizzly.identityConfig.dashboardAccess.dashboardId;
-  if (dashboardIdSetInIdentityConfig) {
-    var _vizzly$identityConfi, _vizzly$identityConfi2;
-    logDebug('Strategy will be to show a child of the parent dashboard determined by the identity config', (_vizzly$identityConfi = vizzly.identityConfig.dashboardAccess) == null ? void 0 : _vizzly$identityConfi.dashboardId);
-    return {
-      type: 'instantCopyOf',
-      parentDashboardId: (_vizzly$identityConfi2 = vizzly.identityConfig.dashboardAccess) == null ? void 0 : _vizzly$identityConfi2.dashboardId
-    };
-  } else {
-    logDebug('Strategy will be to show a child of the parent dashboard', defaultParentDashboardId);
-    return {
-      type: 'instantCopyOf',
-      parentDashboardId: defaultParentDashboardId
-    };
-  }
-};
-
-var Mode;
-(function (Mode) {
-  Mode["Admin"] = "admin";
-  Mode["EndUser"] = "endUser";
-})(Mode || (Mode = {}));
-var Scope;
-(function (Scope) {
-  Scope["Read"] = "read";
-  Scope["ReadWrite"] = "read_write";
-})(Scope || (Scope = {}));
-
-/*
-  Currently, we just replicate the same behaviour as what we used to have on the API.
-*/
-var runStrategy = /*#__PURE__*/function () {
-  var _ref = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(strategy, vizzly) {
-    var currentDashboard, scope, _parentDashboard$perm, parentDashboard, hasParentDashboardWritePermission, dashboardCopies, mostRecentlyUpdatedChildDashboard, created;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          if (!(strategy.type == 'exact')) {
-            _context.next = 9;
-            break;
-          }
-          currentDashboard = vizzly.dashboards.find(function (d) {
-            return d.id === strategy.dashboardId;
-          });
-          if (currentDashboard.permission) {
-            _context.next = 4;
-            break;
-          }
-          throw '';
-        case 4:
-          scope = currentDashboard.permission.scope;
-          logDebug('A specific dashboard has been requested. This will be rendered with', scope, 'scope.', strategy.dashboardId);
-          return _context.abrupt("return", {
-            dashboardId: strategy.dashboardId,
-            mode: scope === 'read_write' && currentDashboard.parentDashboardId === null ? Mode.Admin : Mode.EndUser,
-            scope: scope
-          });
-        case 9:
-          if (!(strategy.type == 'instantCopyOf')) {
-            _context.next = 29;
-            break;
-          }
-          // If the user has write access to the parent dashboard, then we return that dashboard ID, with mode=admin
-          parentDashboard = vizzly.dashboards.find(function (d) {
-            return d.id === strategy.parentDashboardId;
-          });
-          hasParentDashboardWritePermission = ((_parentDashboard$perm = parentDashboard.permission) == null ? void 0 : _parentDashboard$perm.scope) === 'read_write';
-          if (!hasParentDashboardWritePermission) {
-            _context.next = 15;
-            break;
-          }
-          logDebug('Write access to the parent dashboard has been found, so this dashboard will be shown with admin access.', strategy.parentDashboardId);
-          return _context.abrupt("return", {
-            dashboardId: strategy.parentDashboardId,
-            mode: Mode.Admin,
-            scope: Scope.ReadWrite
-          });
-        case 15:
-          dashboardCopies = getCopiesOfParentDashboard(strategy.parentDashboardId, vizzly.dashboards);
-          mostRecentlyUpdatedChildDashboard = takeMostRecentlyUpdated(dashboardCopies);
-          if (!mostRecentlyUpdatedChildDashboard) {
-            _context.next = 20;
-            break;
-          }
-          logDebug('An existing child dashboard exists of the parent dashboard. As no specific dashboardId was provided, we will render the most recently updated child dashboard', mostRecentlyUpdatedChildDashboard.id);
-          return _context.abrupt("return", {
-            dashboardId: mostRecentlyUpdatedChildDashboard.id,
-            mode: Mode.EndUser,
-            scope: mostRecentlyUpdatedChildDashboard.permission.scope
-          });
-        case 20:
-          logDebug('No previous child dashboard has been created on behalf of the current user for the parent dashboard', parentDashboard.id, '. Creating a child copy of the parent.');
-          _context.next = 23;
-          return vizzly.createDashboard({
-            parentDashboardId: parentDashboard.id,
-            definition: toSaveableDefinition(parentDashboard),
-            metadata: {}
-          });
-        case 23:
-          created = _context.sent;
-          if (created) {
-            _context.next = 26;
-            break;
-          }
-          throw 'Failed to create first child dashboard for the user.';
-        case 26:
-          return _context.abrupt("return", {
-            dashboardId: created.id,
-            scope: Scope.ReadWrite,
-            mode: Mode.EndUser
-          });
-        case 29:
-          throw "Unsupported strategy";
-        case 30:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }));
-  return function runStrategy(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-}();
-
-/*
-  Stores which dashboard is the currently active one...
-*/
-var useDashboardStrategy = function useDashboardStrategy(strategy, vizzly, programmaticDashboard) {
-  var _useState = useState(),
-    state = _useState[0],
-    setState = _useState[1];
-  useEffect(function () {
-    var doWork = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var _yield$runStrategy, mode, dashboardId, scope;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if ('dashboards' in vizzly) {
-                _context.next = 2;
-                break;
-              }
-              return _context.abrupt("return");
-            case 2:
-              if (strategy) {
-                _context.next = 4;
-                break;
-              }
-              return _context.abrupt("return");
-            case 4:
-              if (!vizzly.loading) {
-                _context.next = 6;
-                break;
-              }
-              return _context.abrupt("return");
-            case 6:
-              _context.next = 8;
-              return runStrategy(strategy, vizzly);
-            case 8:
-              _yield$runStrategy = _context.sent;
-              mode = _yield$runStrategy.mode;
-              dashboardId = _yield$runStrategy.dashboardId;
-              scope = _yield$runStrategy.scope;
-              if (dashboardId != (state == null ? void 0 : state.dashboardId)) setState({
-                mode: mode,
-                dashboardId: dashboardId,
-                scope: scope
-              });
-            case 13:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function doWork() {
-        return _ref.apply(this, arguments);
-      };
-    }();
-    doWork();
-  }, [JSON.stringify({
-    strategy: strategy,
-    loading: vizzly.loading
-  })]);
-  if (!('dashboards' in vizzly)) return null;
-  if (!state) return null;
-  if (vizzly.loading) return null;
-  var dashboard = vizzly.dashboards.find(function (dash) {
-    return dash.id == state.dashboardId;
-  }) || null;
-  return {
-    mode: state.mode,
-    dashboard: dashboard,
-    scope: state.scope,
-    isProgrammaticParent: !!programmaticDashboard
-  };
-};
-
-var useVizzly = function useVizzly(properties, options) {
-  var _useState = useState({
-      loading: true,
-      error: undefined,
-      dashboards: [],
-      globalLibraries: []
-    }),
-    state = _useState[0],
-    setState = _useState[1];
-  var vizzlyRef = useRef();
-  var vizzly = vizzlyRef.current;
-  useEffect(function () {
-    var abortController = new AbortController();
-    var doWork = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var _yield$Promise$all, globalLibraries, dashboards;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-              _context.next = 3;
-              return Vizzly$1.load(properties, _extends({}, options, {
-                apiHost: (options == null ? void 0 : options.apiHost) || 'https://api.vizzly.co'
-              }));
-            case 3:
-              vizzlyRef.current = _context.sent;
-              _context.next = 6;
-              return Promise.all([vizzlyRef.current.getGlobalLibraries({
-                abortController: abortController
-              }), vizzlyRef.current.getDashboards({
-                abortController: abortController
-              })]);
-            case 6:
-              _yield$Promise$all = _context.sent;
-              globalLibraries = _yield$Promise$all[0];
-              dashboards = _yield$Promise$all[1];
-              setState({
-                loading: false,
-                error: undefined,
-                dashboards: dashboards,
-                globalLibraries: globalLibraries
-              });
-              _context.next = 16;
-              break;
-            case 12:
-              _context.prev = 12;
-              _context.t0 = _context["catch"](0);
-              logError('Error loading Vizzly', _context.t0);
-              setState({
-                loading: false,
-                error: _context.t0,
-                dashboards: [].concat(state.dashboards),
-                globalLibraries: [].concat(state.globalLibraries)
-              });
-            case 16:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, null, [[0, 12]]);
-      }));
-      return function doWork() {
-        return _ref.apply(this, arguments);
-      };
-    }();
-    doWork();
-    return function () {
-      return abortController.abort(new LoadingAborted('We stopped loading Vizzly because of an abort signal triggered by an unmount'));
+      return abortController.abort(new LoadingAborted('We stopped loading Vizzly because of an abort signal triggered by an unmount'));
     };
   }, []);
   var refetch = /*#__PURE__*/function () {
@@ -78686,182 +78200,712 @@ var useVizzly = function useVizzly(properties, options) {
     getScheduledReports: getScheduledReports
   });
 };
-
-var useScheduledReports = function useScheduledReports(params, dashboardAccessToken) {
-  var _useState = useState([]),
-    reports = _useState[0],
-    setReports = _useState[1];
+
+var useScheduledReports = function useScheduledReports(params, dashboardAccessToken) {
+  var _useState = useState([]),
+    reports = _useState[0],
+    setReports = _useState[1];
+  useEffect(function () {
+    var doWork = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var _yield$params$getSche, _reports;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!(params.getScheduledReports && dashboardAccessToken)) {
+                _context.next = 6;
+                break;
+              }
+              _context.next = 3;
+              return params.getScheduledReports(dashboardAccessToken);
+            case 3:
+              _yield$params$getSche = _context.sent;
+              _reports = _yield$params$getSche.reports;
+              setReports(_reports);
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function doWork() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    doWork();
+  }, [JSON.stringify({
+    dashboardAccessToken: dashboardAccessToken,
+    loadingVizzly: params
+  })]);
+  var updateScheduledReport = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(reportId, newCron) {
+      var updatedReport, newReports, uniqueNewReports;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!(params.updateScheduledReport && dashboardAccessToken)) {
+              _context2.next = 7;
+              break;
+            }
+            _context2.next = 3;
+            return params.updateScheduledReport(dashboardAccessToken, reportId, newCron);
+          case 3:
+            updatedReport = _context2.sent;
+            if (updatedReport === true) {
+              // Remove the deleted report...
+              setReports([].concat(reports).filter(function (r) {
+                return r.id != reportId;
+              }));
+            } else if (updatedReport) {
+              // Upsert the report
+              newReports = [].concat(reports, [updatedReport.report]).map(function (r) {
+                return r.id == reportId ? updatedReport.report : r;
+              });
+              uniqueNewReports = uniqBy(newReports, function (r) {
+                return r.id;
+              });
+              setReports(uniqueNewReports);
+            }
+            _context2.next = 8;
+            break;
+          case 7:
+            console.warn('Function to update scheduled report not loaded.');
+          case 8:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function updateScheduledReport(_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return {
+    reports: reports,
+    getScheduledReports: params.getScheduledReports,
+    updateScheduledReport: updateScheduledReport
+  };
+};
+
+/*
+  A context for managing the dashboard session.
+*/
+var STILL_LOADING = null;
+var useSessionContext = function useSessionContext(params) {
+  var _loadedStrategy$dashb, _loadedStrategy$dashb2;
+  var vizzly = useVizzly({
+    queryEngine: params.queryEngine,
+    identity: params.identityCallback,
+    dataSets: params.loadDataSetsCallback,
+    programmaticDashboard: params.programmaticDashboard,
+    extraCustomFields: params.extraCustomFields
+  }, {
+    apiHost: params.apiConfig.host,
+    developerMode: params.developerMode,
+    textOverrides: params.textOverrides
+  });
+  var loadedStrategy = useDashboardStrategy(getStrategy(vizzly, params.parentDashboardId, params.dashboardId, params.isEditor), vizzly, params.programmaticDashboard);
+  var _useScheduledReports = useScheduledReports(vizzly, loadedStrategy == null || (_loadedStrategy$dashb = loadedStrategy.dashboard) == null || (_loadedStrategy$dashb = _loadedStrategy$dashb.permission) == null ? void 0 : _loadedStrategy$dashb.token),
+    reports = _useScheduledReports.reports,
+    updateScheduledReport = _useScheduledReports.updateScheduledReport;
+  if (!vizzly) return STILL_LOADING;
+  if ('error' in vizzly && vizzly.error) return {
+    error: vizzly.error
+  };
+  if ('loading' in vizzly && vizzly.loading) return STILL_LOADING;
+  if (!('dashboards' in vizzly)) return STILL_LOADING;
+  var _ref = vizzly,
+    identityConfig = _ref.identityConfig,
+    queryEngineConfig = _ref.queryEngineConfig;
+  if (!loadedStrategy) return null;
+  if (((loadedStrategy == null || (_loadedStrategy$dashb2 = loadedStrategy.dashboard) == null ? void 0 : _loadedStrategy$dashb2.dataSets) || []).length === 0) {
+    return {
+      error: new NoDataSetResolved()
+    };
+  }
+  var providedValues = {
+    vizzly: vizzly,
+    scope: loadedStrategy.scope,
+    queryEngineConfig: queryEngineConfig,
+    dashboard: loadedStrategy.dashboard,
+    identityConfig: identityConfig,
+    mode: loadedStrategy.mode,
+    vizzlyApiConfig: params.apiConfig,
+    isProgrammaticParent: loadedStrategy.isProgrammaticParent,
+    globalLibraries: vizzly.globalLibraries,
+    reports: reports,
+    updateScheduledReport: updateScheduledReport
+  };
+  return providedValues;
+};
+
+var buildImplementationMeta = function buildImplementationMeta(props) {
+  if ('runQueries' in props) {
+    return {
+      type: 'custom',
+      queryEngineEndpoint: props.queryEngineEndpoint
+    };
+  }
+  if ('data' in props) {
+    return {
+      type: 'in-browser',
+      queryEngineEndpoint: props.queryEngineEndpoint
+    };
+  }
+  return {
+    type: 'query-engine',
+    queryEngineEndpoint: props.queryEngineEndpoint
+  };
+};
+
+var useOnDashboardLoadCallback = function useOnDashboardLoadCallback(session, onDashboardLoad, updateDashboardHash) {
+  var _session$dashboard2;
+  useEffect(function () {
+    var _session$dashboard;
+    if (session && 'dashboard' in session && session != null && (_session$dashboard = session.dashboard) != null && _session$dashboard.id) {
+      onDashboardLoad == null || onDashboardLoad({
+        id: session.dashboard.id,
+        metadata: session.dashboard.metadata,
+        scope: session.scope,
+        dataSets: session.dashboard.dataSets
+      });
+      updateDashboardHash(session.dashboard);
+    }
+  }, [JSON.stringify({
+    loaded: !!session,
+    dashboardId: session && 'dashboard' in session && (session == null || (_session$dashboard2 = session.dashboard) == null ? void 0 : _session$dashboard2.id)
+  })]);
+};
+
+var StatusLine = function StatusLine(props) {
+  return jsx("div", {
+    children: jsxs("span", {
+      children: [jsxs("span", {
+        className: styles({
+          marginRight: '12px'
+        }),
+        children: [props.status === true && jsx(SuccessIcon, {}), props.status === false && jsx(FailureIcon, {}), props.status === null && jsx(UnknownIcon, {})]
+      }), props.status === true && props.successMessage, props.status === false && props.errorMessage, props.status === null && props.unknownMessage]
+    })
+  });
+};
+var DisplayStatusReport = function DisplayStatusReport(props) {
+  var connections = props.statusReport.configs.flatMap(function (c) {
+    return c.connections;
+  });
+  return jsxs("div", {
+    className: styles({
+      display: 'grid',
+      gridTemplateColumns: '1fr',
+      gap: '16px',
+      marginTop: '16px'
+    }),
+    children: [jsx(StatusLine, {
+      status: every(props.statusReport.configs, function (c) {
+        return c.validationErrorDetails === null;
+      }),
+      successMessage: "All configs are valid",
+      errorMessage: "Not all configs are valid",
+      unknownMessage: "We did not run any config validation checks"
+    }), jsx(StatusLine, {
+      status: connections.length > 0 ? every(connections, function (conn) {
+        return !!conn.pingResult;
+      }) : null,
+      successMessage: "All connection checks passed",
+      errorMessage: "Not all connection checks passed",
+      unknownMessage: "We did not run a connection check"
+    }), jsx(StatusLine, {
+      status: !!props.statusReport.projectId ? true : null,
+      successMessage: "Valid project ID",
+      errorMessage: "Failed to find your project ID. Please ensure the VIZZLY_PROJECT_ID environment variable has been set",
+      unknownMessage: "Failed to find your project ID. Please ensure the VIZZLY_PROJECT_ID environment variable has been set"
+    }), jsx(StatusLine, {
+      status: true,
+      successMessage: "Using configs from " + humanReadableList(props.statusReport.configs.flatMap(function (c) {
+        var noConnections = c.connections.length === 0;
+        var noDataSets = c.dataSets.length === 0;
+        var noPublicKeys = c.publicKeys.length === 0;
+        var noSqlViews = c.sqlViews.length === 0;
+        if (noConnections && noDataSets && noPublicKeys && noSqlViews) return [];
+        return [c.source.name];
+      })) + ".",
+      errorMessage: "Failed to load configs",
+      unknownMessage: "Failed to load configs"
+    })]
+  });
+};
+var SuccessIcon = function SuccessIcon() {
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    className: styles({
+      width: '24px',
+      height: '24px',
+      display: 'inline-block'
+    }),
+    children: jsx("path", {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+    })
+  });
+};
+var FailureIcon = function FailureIcon() {
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    className: styles({
+      width: '24px',
+      height: '24px',
+      display: 'inline-block'
+    }),
+    children: jsx("path", {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+    })
+  });
+};
+var UnknownIcon = function UnknownIcon() {
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    className: styles({
+      width: '24px',
+      height: '24px',
+      display: 'inline-block'
+    }),
+    children: jsx("path", {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+    })
+  });
+};
+
+var status = /*#__PURE__*/function () {
+  var _ref = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(queryEngineEndpoint, abortSignal) {
+    var client, _yield$client, status, body;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          client = queryEngineHttpClient(queryEngineEndpoint);
+          _context.next = 3;
+          return client({
+            path: '/api/v2/status',
+            method: 'post',
+            mode: 'cors',
+            abortSignal: abortSignal,
+            body: {}
+          });
+        case 3:
+          _yield$client = _context.sent;
+          status = _yield$client.status;
+          body = _yield$client.body;
+          return _context.abrupt("return", status == 200 ? body : null);
+        case 7:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function status(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+var Code$3 = function Code(props) {
+  var code = jsx("code", {
+    style: {
+      background: 'rgba(0, 0, 0, 0.05)',
+      borderRadius: '5px',
+      padding: '2px 5px'
+    },
+    children: props.children
+  });
+  if (!props.href) return code;
+  return jsx("a", {
+    target: "_blank",
+    href: props.href,
+    children: code
+  });
+};
+var ImplementationNotice = function ImplementationNotice(props) {
+  var _useState = useState(undefined),
+    queryEngineStatus = _useState[0],
+    setQueryEngineStatus = _useState[1];
   useEffect(function () {
-    var doWork = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var _yield$params$getSche, _reports;
+    var abortController = new AbortController();
+    var doFetch = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(queryEngineEndpoint) {
+        var stop, statusBody;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              if (!(params.getScheduledReports && dashboardAccessToken)) {
-                _context.next = 6;
-                break;
+              stop = setTimeout(function () {
+                if (!abortController.signal.aborted && queryEngineStatus === undefined) {
+                  abortController.abort();
+                  setQueryEngineStatus(null);
+                }
+              }, 2000);
+              _context.prev = 1;
+              _context.next = 4;
+              return status(queryEngineEndpoint, abortController.signal);
+            case 4:
+              statusBody = _context.sent;
+              clearTimeout(stop);
+              if (statusBody) {
+                setQueryEngineStatus(statusBody);
+              } else {
+                setQueryEngineStatus(null);
               }
-              _context.next = 3;
-              return params.getScheduledReports(dashboardAccessToken);
-            case 3:
-              _yield$params$getSche = _context.sent;
-              _reports = _yield$params$getSche.reports;
-              setReports(_reports);
-            case 6:
+              _context.next = 12;
+              break;
+            case 9:
+              _context.prev = 9;
+              _context.t0 = _context["catch"](1);
+              setQueryEngineStatus(null);
+            case 12:
             case "end":
               return _context.stop();
           }
-        }, _callee);
+        }, _callee, null, [[1, 9]]);
       }));
-      return function doWork() {
+      return function doFetch(_x) {
         return _ref.apply(this, arguments);
       };
     }();
-    doWork();
-  }, [JSON.stringify({
-    dashboardAccessToken: dashboardAccessToken,
-    loadingVizzly: params
-  })]);
-  var updateScheduledReport = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(reportId, newCron) {
-      var updatedReport, newReports, uniqueNewReports;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            if (!(params.updateScheduledReport && dashboardAccessToken)) {
-              _context2.next = 7;
-              break;
-            }
-            _context2.next = 3;
-            return params.updateScheduledReport(dashboardAccessToken, reportId, newCron);
-          case 3:
-            updatedReport = _context2.sent;
-            if (updatedReport === true) {
-              // Remove the deleted report...
-              setReports([].concat(reports).filter(function (r) {
-                return r.id != reportId;
-              }));
-            } else if (updatedReport) {
-              // Upsert the report
-              newReports = [].concat(reports, [updatedReport.report]).map(function (r) {
-                return r.id == reportId ? updatedReport.report : r;
-              });
-              uniqueNewReports = uniqBy(newReports, function (r) {
-                return r.id;
-              });
-              setReports(uniqueNewReports);
-            }
-            _context2.next = 8;
-            break;
-          case 7:
-            console.warn('Function to update scheduled report not loaded.');
-          case 8:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }));
-    return function updateScheduledReport(_x, _x2) {
-      return _ref2.apply(this, arguments);
+    props.implementationMeta.type == 'query-engine' && props.implementationMeta.queryEngineEndpoint && doFetch(props.implementationMeta.queryEngineEndpoint);
+    return function () {
+      abortController.abort('Setup notice unmounted');
     };
-  }();
-  return {
-    reports: reports,
-    getScheduledReports: params.getScheduledReports,
-    updateScheduledReport: updateScheduledReport
-  };
+  }, []);
+  return jsx(EmptyContainer, {
+    title: "Vizzly set up",
+    renderExtra: function renderExtra() {
+      return jsxs("div", {
+        style: {
+          width: '650px'
+        },
+        children: [props.helpSections.map(function (helpSection, indexHelp) {
+          return jsxs("div", {
+            className: styles({
+              margin: '24px 0',
+              borderRadius: '8px',
+              padding: '12px',
+              backgroundColor: '#f3f5f9'
+            }),
+            children: [jsxs("div", {
+              className: styles({
+                textAlign: 'left'
+              }),
+              children: [jsx("h2", {
+                className: ["" + css.text, styles({
+                  fontWeight: 'bold',
+                  marginBottom: '12px'
+                })].join(' '),
+                children: helpSection.title
+              }), helpSection.text.map(function (paragraph, index) {
+                return jsx("p", {
+                  className: ["" + css.text, styles({
+                    marginBottom: '8px'
+                  })].join(' '),
+                  children: paragraph
+                }, index);
+              })]
+            }), helpSection.callToAction && jsx("div", {
+              className: styles({
+                textAlign: 'right',
+                marginTop: '24px'
+              }),
+              children: jsx("a", {
+                target: "_blank",
+                href: helpSection.callToAction.link,
+                children: jsx(Button$2, {
+                  children: helpSection.callToAction.text
+                })
+              })
+            })]
+          }, indexHelp);
+        }), queryEngineStatus !== undefined && jsxs("div", {
+          className: styles({
+            textAlign: 'left',
+            borderRadius: '8px',
+            marginTop: '12px',
+            padding: '12px',
+            width: '100%',
+            backgroundColor: '#f3f5f9'
+          }),
+          children: [queryEngineStatus === null && jsxs(Fragment$1, {
+            children: [jsx("h2", {
+              className: ["" + css.text, styles({
+                fontWeight: 'bold',
+                marginBottom: '12px'
+              })].join(' '),
+              children: "Vizzly Query Engine not found"
+            }), jsxs("p", {
+              className: "" + css.text,
+              children: ["If you have deployed the Vizzly Query Engine, then please set the ", jsx(Code$3, {
+                children: "queryEngineEndpoint"
+              }), ' ', "property to the URL where it is deployed too."]
+            }), jsx("div", {
+              className: styles({
+                textAlign: 'right',
+                marginTop: '8px'
+              }),
+              children: jsx("a", {
+                target: "_blank",
+                href: "https://docs.vizzly.co/query-engines/self-hosted-query-engine",
+                children: jsx(Button$2, {
+                  children: "Deploy the Query Engine"
+                })
+              })
+            })]
+          }), queryEngineStatus && jsxs(Fragment$1, {
+            children: [jsx("h2", {
+              className: ["" + css.text, styles({
+                fontWeight: 'bold',
+                margin: '12px 0 '
+              })].join(' '),
+              children: "Query engine status"
+            }), jsx(DisplayStatusReport, {
+              statusReport: queryEngineStatus
+            })]
+          })]
+        })]
+      });
+    }
+  });
 };
-
-/*
-  A context for managing the dashboard session.
-*/
-var STILL_LOADING = null;
-var useSessionContext = function useSessionContext(params) {
-  var _loadedStrategy$dashb, _loadedStrategy$dashb2;
-  var vizzly = useVizzly({
-    queryEngine: params.queryEngine,
-    identity: params.identityCallback,
-    dataSets: params.loadDataSetsCallback,
-    programmaticDashboard: params.programmaticDashboard,
-    extraCustomFields: params.extraCustomFields
-  }, {
-    apiHost: params.apiConfig.host,
-    developerMode: params.developerMode,
-    textOverrides: params.textOverrides
+var NewSelfHostedVizzlyImplementationNotice = function NewSelfHostedVizzlyImplementationNotice(props) {
+  return jsx(ImplementationNotice, {
+    implementationMeta: props.implementationMeta,
+    helpSections: [{
+      title: 'Identity',
+      callToAction: {
+        link: 'https://docs.vizzly.co/dashboard/properties/identity',
+        text: 'Set up identity'
+      },
+      text: [jsxs(Fragment$1, {
+        children: ["We need to replace the current placeholder ", jsx(Code$3, {
+          children: "identity"
+        }), " function with your own identity logic."]
+      }), 'Typically, this is an HTTPS call to your servers to retrieve the Vizzly identity tokens.']
+    }]
   });
-  var loadedStrategy = useDashboardStrategy(getStrategy(vizzly, params.parentDashboardId, params.dashboardId, params.isEditor), vizzly, params.programmaticDashboard);
-  var _useScheduledReports = useScheduledReports(vizzly, loadedStrategy == null || (_loadedStrategy$dashb = loadedStrategy.dashboard) == null || (_loadedStrategy$dashb = _loadedStrategy$dashb.permission) == null ? void 0 : _loadedStrategy$dashb.token),
-    reports = _useScheduledReports.reports,
-    updateScheduledReport = _useScheduledReports.updateScheduledReport;
-  if (!vizzly) return STILL_LOADING;
-  if ('error' in vizzly && vizzly.error) return {
-    error: vizzly.error
-  };
-  if ('loading' in vizzly && vizzly.loading) return STILL_LOADING;
-  if (!('dashboards' in vizzly)) return STILL_LOADING;
-  var identityConfig = vizzly.identityConfig,
-    queryEngineConfig = vizzly.queryEngineConfig;
-  if (!loadedStrategy) return null;
-  if (((loadedStrategy == null || (_loadedStrategy$dashb2 = loadedStrategy.dashboard) == null ? void 0 : _loadedStrategy$dashb2.dataSets) || []).length === 0) {
-    return {
-      error: new NoDataSetResolved()
-    };
-  }
-  var providedValues = {
-    vizzly: vizzly,
-    scope: loadedStrategy.scope,
-    queryEngineConfig: queryEngineConfig,
-    dashboard: loadedStrategy.dashboard,
-    identityConfig: identityConfig,
-    mode: loadedStrategy.mode,
-    vizzlyApiConfig: params.apiConfig,
-    isProgrammaticParent: loadedStrategy.isProgrammaticParent,
-    globalLibraries: vizzly.globalLibraries,
-    reports: reports,
-    updateScheduledReport: updateScheduledReport
-  };
-  return providedValues;
 };
-
-var buildImplementationMeta = function buildImplementationMeta(props) {
-  if ('runQueries' in props) {
-    return {
-      type: 'custom',
-      queryEngineEndpoint: props.queryEngineEndpoint
-    };
-  }
-  if ('data' in props) {
-    return {
-      type: 'in-browser',
-      queryEngineEndpoint: props.queryEngineEndpoint
-    };
+var TokensNotStrings = function TokensNotStrings(props) {
+  return jsx(ImplementationNotice, {
+    implementationMeta: props.implementationMeta,
+    helpSections: [{
+      title: 'Identity',
+      callToAction: {
+        link: 'https://docs.vizzly.co/dashboard/properties/identity',
+        text: 'See the docs'
+      },
+      text: ['The async identity function must return the Vizzly access tokens in the correct format.']
+    }]
+  });
+};
+var AtLeastOneDataSetRequired = function AtLeastOneDataSetRequired(props) {
+  var text = [];
+  switch (props.implementationMeta.type) {
+    case 'custom':
+    case 'in-browser':
+      text = [jsxs(Fragment$1, {
+        children: ["The ", jsx(Code$3, {
+          href: "https://docs.vizzly.co/dashboard/properties/dataSets",
+          children: "dataSets"
+        }), "function must provide at least one data set"]
+      })];
+      break;
+    case 'query-engine':
+      text = [jsx(Fragment$1, {
+        children: "To start using the Vizzly dashboard, you must add a data set to the Vizzly Query Engine."
+      }), jsx(Fragment$1, {
+        children: "If you have already done this, check the `dataSets` value in your identity token to make sure it allows at least one data set to be returned."
+      })];
+      break;
   }
-  return {
-    type: 'query-engine',
-    queryEngineEndpoint: props.queryEngineEndpoint
-  };
+  return jsx(ImplementationNotice, {
+    implementationMeta: props.implementationMeta,
+    helpSections: [{
+      title: 'At least one data set must be provided',
+      callToAction: {
+        link: 'https://docs.vizzly.co/dashboard/properties/dataSets',
+        text: 'See the docs'
+      },
+      text: text
+    }]
+  });
+};
+var InvalidDataSetsNotice = function InvalidDataSetsNotice(props) {
+  return jsx(ImplementationNotice, {
+    implementationMeta: props.implementationMeta,
+    helpSections: [{
+      title: 'We did not fetch your data sets.',
+      callToAction: {
+        link: 'https://docs.vizzly.co/dashboard/properties/dataSets',
+        text: 'See the docs'
+      },
+      text: [jsxs(Fragment$1, {
+        children: ["If you are using the Vizzly Query Engine, then you will need to set the", ' ', jsx(Code$3, {
+          href: "https://docs.vizzly.co/dashboard/properties/queryEngineEndpoint",
+          children: "queryEngineEndpoint"
+        }), ' ', "property on the dashboard."]
+      }), jsxs(Fragment$1, {
+        children: ["Alternatively, if you are not using the Vizzly Query Engine, then the", ' ', jsx(Code$3, {
+          href: "https://docs.vizzly.co/dashboard/properties/dataSets",
+          children: "dataSets"
+        }), " property is required, and it must be an async function."]
+      })]
+    }]
+  });
+};
+var InvalidQueryEngineEndpointNotice = function InvalidQueryEngineEndpointNotice(props) {
+  return jsx(ImplementationNotice, {
+    implementationMeta: props.implementationMeta,
+    helpSections: [{
+      title: 'Query Engine Endpoint',
+      callToAction: {
+        link: 'https://docs.vizzly.co/dashboard/properties/queryEngineEndpoint',
+        text: 'See the docs'
+      },
+      text: [jsxs(Fragment$1, {
+        children: ["Incorrect ", jsx(Code$3, {
+          children: "queryEngineEndpoint"
+        }), " value", props.invalidEndpoint ? " (" + JSON.stringify(props.invalidEndpoint) + ")" : '', ". Please deploy the", ' ', jsx("a", {
+          className: styles({
+            textDecoration: 'underline'
+          }),
+          href: "https://docs.vizzly.co/query-engines/self-hosted",
+          children: "Vizzly Query Engine"
+        }), ", and then provide the URL to it as a string, or as an object with a string host value."]
+      })]
+    }]
+  });
+};
+var InvalidIdentityFunctionNotice = function InvalidIdentityFunctionNotice(props) {
+  return jsx(ImplementationNotice, {
+    implementationMeta: props.implementationMeta,
+    helpSections: [{
+      title: 'Identity',
+      callToAction: {
+        link: 'https://docs.vizzly.co/dashboard/properties/identity',
+        text: 'See the docs'
+      },
+      text: [jsxs(Fragment$1, {
+        children: [jsx(Code$3, {
+          children: "identity"
+        }), " must be an async function that returns your Vizzly identity tokens."]
+      })]
+    }]
+  });
 };
 
-var GlobalContext = /*#__PURE__*/createContext(undefined);
+// export const IdentityMustBeCallbackNotice = () => {
+//   return (
+//     <EmptyContainer
+//       title="There is an issue with your configuration settings."
+//       renderExtra={() => (
+//         <p className={`${css.text}`}>See logs for more details.</p>
+//       )}
+//     />
+//   );
+// };
 
-var useOnDashboardLoadCallback = function useOnDashboardLoadCallback(session, onDashboardLoad, updateDashboardHash) {
-  var _session$dashboard2;
-  useEffect(function () {
-    var _session$dashboard;
-    if (session && 'dashboard' in session && session != null && (_session$dashboard = session.dashboard) != null && _session$dashboard.id) {
-      onDashboardLoad == null || onDashboardLoad({
-        id: session.dashboard.id,
-        metadata: session.dashboard.metadata,
-        scope: session.scope,
-        dataSets: session.dashboard.dataSets
-      });
-      updateDashboardHash(session.dashboard);
-    }
-  }, [JSON.stringify({
-    loaded: !!session,
-    dashboardId: session && 'dashboard' in session && (session == null || (_session$dashboard2 = session.dashboard) == null ? void 0 : _session$dashboard2.id)
-  })]);
+// export const InvalidQueryEngineEndpointNotice = (props: {
+// invalidEndpoint?: string;
+// invalidType?: boolean;
+// }) => (
+//   <EmptyContainer
+//     title="Invalid Query Engine Endpoint"
+//     renderExtra={() => (
+//       <>
+//         <p
+//           className={`${css.text}`}
+//         >
+// Incorrect `queryEngineEndpoint` value{props.invalidEndpoint ? ` (${JSON.stringify(props.invalidEndpoint)})` : ''}.
+// Please deploy the <a href="https://docs.vizzly.co/query-engines/self-hosted">Vizzly Query Engine</a>, and then provide the URL to it as a string.
+//         </p>
+//         <div>
+//           <Button secondary onClick={() => window.location.reload()}>
+//             Retry
+//           </Button>
+//         </div>
+//       </>
+//     )}
+//   />
+// );
+
+var SetupError = function SetupError(props) {
+  logError(props.error);
+  var renderedError = jsx("p", {
+    children: "Unknown error"
+  });
+  if (props.error instanceof NoDataSetResolved) {
+    renderedError = jsx(AtLeastOneDataSetRequired, {
+      implementationMeta: props.implementationMeta
+    });
+  }
+  if (props.error instanceof InvalidDataSetsPropType) {
+    renderedError = jsx(InvalidDataSetsNotice, {
+      implementationMeta: props.implementationMeta
+    });
+  }
+  if (props.error instanceof InvalidQueryEngineEndpointType) {
+    renderedError = jsx(InvalidQueryEngineEndpointNotice, {
+      implementationMeta: props.implementationMeta,
+      invalidType: true
+    });
+  }
+  if (props.error instanceof InvalidQueryEngineEndpoint) {
+    renderedError = jsx(InvalidQueryEngineEndpointNotice, {
+      implementationMeta: props.implementationMeta,
+      invalidEndpoint: props.error.invalidEndpoint
+    });
+  }
+  if (props.error instanceof InvalidIdentityPropType) {
+    renderedError = jsx(InvalidIdentityFunctionNotice, {
+      implementationMeta: props.implementationMeta
+    });
+  }
+  if (props.error instanceof FailedToLoadIdentity) {
+    renderedError = jsx(IdentityCallbackFailedNotice, {});
+  }
+  if (props.error instanceof InvalidIdentityReturn) {
+    renderedError = jsx(TokensNotStrings, {
+      implementationMeta: props.implementationMeta
+    });
+  }
+  if (props.error instanceof FailedToLoadQueryEngineConfig) {
+    renderedError = jsx(FailedToLoadQueryEngineConfigNotice, {});
+  }
+  if (props.error instanceof FailedToResolveDataSets) {
+    renderedError = jsx(DatasetMustBeCallbackNotice, {});
+  }
+  if (props.error instanceof NewVizzlyImplementation) {
+    renderedError = jsx(NewSelfHostedVizzlyImplementationNotice, {
+      implementationMeta: props.implementationMeta
+    });
+  }
+  if (props.error instanceof LoadingAborted) {
+    renderedError = jsx(LoadingComponent, {
+      override: props.renderLoadingComponent
+    });
+  }
+  return jsxs(ThemeProvider, {
+    children: [jsx(VizzlyGlobalStyles, {}), renderedError]
+  });
 };
 
 var GlobalProvider = function GlobalProvider(props) {
@@ -78888,7 +78932,7 @@ var GlobalProvider = function GlobalProvider(props) {
   }));
 };
 var GlobalProviderContents = function GlobalProviderContents(props) {
-  var _props$developerTools, _props$id, _session$identityConf, _props$dateFilterOpti, _session$vizzly$savin;
+  var _props$developerTools, _props$id, _props$id2, _session$identityConf, _props$dateFilterOpti, _session$vizzly$savin;
   var _useState2 = useState(undefined),
     dashboardHash = _useState2[0],
     setDashboardHash = _useState2[1];
@@ -78924,6 +78968,8 @@ var GlobalProviderContents = function GlobalProviderContents(props) {
   };
   useOnDashboardLoadCallback(session, props.onDashboardLoad, updateDashboardHash);
   var variables = useVariables(props.variables, (_props$id = props.id) != null ? _props$id : '');
+  var _useAliasFields = useAliasFields((_props$id2 = props.id) != null ? _props$id2 : ''),
+    aliasFields = _useAliasFields.aliasFields;
   if (session === null) return jsx(LoadingComponent, {
     override: props.renderLoadingComponent
   });
@@ -78998,7 +79044,7 @@ var GlobalProviderContents = function GlobalProviderContents(props) {
     }
   };
   var resolvedDateFilterOptions = (_props$dateFilterOpti = props.dateFilterOptions) != null ? _props$dateFilterOpti : props.dateTimeFilterOptions;
-  var runQueriesCallback = getRunQueriesCallback(session.identityConfig, session.queryEngineConfig, build$b(textOverride, resolvedDateFilterOptions), variables.variables, props.runQueries, props.data, props.queryEngineEndpoint, props.timeZone);
+  var runQueriesCallback = getRunQueriesCallback(session.identityConfig, session.queryEngineConfig, build$c(textOverride, resolvedDateFilterOptions), variables.variables, aliasFields, props.runQueries, props.data, props.queryEngineEndpoint, props.timeZone);
   var aiOnAction = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(conversationId, messageId, actionOptions) {
       return _regeneratorRuntime().wrap(function _callee3$(_context3) {
@@ -79079,6 +79125,7 @@ var GlobalProviderContents = function GlobalProviderContents(props) {
   }();
   return jsx(GlobalContext.Provider, {
     value: _extends({}, props, {
+      aliasFields: aliasFields,
       onSave: onSave
     }),
     children: jsx(StudioContexts, {