@datawheel/bespoke 0.1.35 → 0.1.37

package/dist/index.js

@@ -20,7 +20,7 @@ import { Stack, Text, Badge, Group, useMantineTheme, Flex, packSx, Title, Toolti
 import { dataConcat } from 'd3plus-viz';
 import * as d3plus from 'd3plus-react';
 import Router, { useRouter } from 'next/router';
-import { IconInfoCircle, IconRefresh, IconSearch, IconAlignLeft, IconAlignCenter, IconAlignRight, IconBoxMargin, IconTable, IconMathFunction, IconUsers, IconLogout, IconTrash, IconUserCircle, IconEdit, IconDatabase, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconAlarmFilled, IconBox, IconLink, IconCircleX, IconFlag, IconCirclePlus, IconFileAnalytics, IconPlus, IconX, IconChevronDown, IconCamera, IconShare, IconCircleDashed, IconListSearch, IconExternalLink, IconSettings, IconFileOff, IconFilesOff, IconHierarchy3, IconMenu, IconApi, IconPolaroid, IconCircleMinus, IconEyeOff, IconChevronLeft, IconChevronRight, IconLogin, IconWorld, IconLock, IconVariable, IconArrowRightCircle, IconDownload, IconTemplate, IconChartBar, IconCode, IconUpload, IconCodePlus, IconClipboardCheck, IconClipboardCopy, IconPalette, IconEye, IconMinimize, IconMaximize, IconRss, IconGlobe } from '@tabler/icons-react';
+import { IconInfoCircle, IconRefresh, IconSearch, IconAlignLeft, IconAlignCenter, IconAlignRight, IconBoxMargin, IconTable, IconMathFunction, IconUsers, IconLogout, IconTrash, IconUserCircle, IconEdit, IconDatabase, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconAlarmFilled, IconBox, IconLink, IconCircleX, IconFlag, IconCirclePlus, IconFileAnalytics, IconPlus, IconX, IconChevronDown, IconCamera, IconShare, IconCircleDashed, IconListSearch, IconExternalLink, IconSettings, IconFileOff, IconFilesOff, IconHierarchy3, IconMenu, IconApi, IconPolaroid, IconCircleMinus, IconEyeOff, IconChevronLeft, IconChevronRight, IconLogin, IconWorld, IconLock, IconVariable, IconArrowRightCircle, IconDownload, IconTemplate, IconChartBar, IconCode, IconUpload, IconCodePlus, IconClipboardCheck, IconClipboardCopy, IconPalette, IconEye, IconMinimize, IconMaximize, IconRss, IconGlobe, IconLinkOff } from '@tabler/icons-react';
 import { useMediaQuery, useDisclosure, useDebouncedValue, useHotkeys, useFullscreen, getHotkeyHandler } from '@mantine/hooks';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
@@ -1009,6 +1009,15 @@ var init_arrayUtils = __esm({
     keyDiver = (obj, str) => !str ? obj : typeof str === "string" ? str.split(".").reduce((o, i) => o[i], obj) : obj;
   }
 });
+
+// libs/consts.ts
+var apiSeparator;
+var init_consts = __esm({
+  "libs/consts.ts"() {
+    init_esm_shims();
+    apiSeparator = "|||";
+  }
+});
 function isResult(response) {
   return response.ok !== void 0;
 }
@@ -1089,8 +1098,8 @@ async function runSingleBlock(block, formatterFunctions, blockContext, readMembe
   const allowed = isBlockAllowed(block, blockContext, variables, formatterFunctions);
   let resp = null;
   const unswappedAPI = block.contentByLocale?.logic?.content?.api;
-  let apiResponse;
   let duration = null;
+  let responseSize = null;
   let api = null;
   if (!allowed) {
     return {
@@ -1101,21 +1110,35 @@ async function runSingleBlock(block, formatterFunctions, blockContext, readMembe
   }
   if (unswappedAPI) {
     api = swapAPI(unswappedAPI, formatterFunctions, blockContext);
-    const isAbsolute = new RegExp("^(?:[a-z+]+:)?//", "i");
-    if (!isAbsolute.test(api)) {
-      api = `${process.env.NEXT_PUBLIC_REPORTS_BASE_URL}/${api}`.replace(/([^:]\/)\/+/g, "$1");
+    const apis = api.split(apiSeparator).filter((apiItem) => apiItem !== "");
+    const apiPromisesList = [];
+    for (let index = 0; index < apis.length; index++) {
+      let apiUrl = apis[index];
+      const isAbsolute = new RegExp("^(?:[a-z+]+:)?//", "i");
+      if (!isAbsolute.test(api)) {
+        apiUrl = `${process.env.NEXT_PUBLIC_REPORTS_BASE_URL}/${apiUrl}`.replace(/([^:]\/)\/+/g, "$1");
+      }
+      apiPromisesList.push(
+        apiFetch(
+          apiUrl,
+          block.settings,
+          readMemberFn,
+          locale
+        ).then((result) => {
+          if (verbose2)
+            console.log("Variable loaded:", apiUrl, "response time: ", result.requestDuration);
+          return result;
+        }, (e) => {
+          if (verbose2)
+            console.error(`Error fetching ${apiUrl} block ${block.id}: ${e.message}`);
+          return { data: {}, requestDuration: 0 };
+        })
+      );
     }
-    apiResponse = await apiFetch(api, block.settings, readMemberFn, locale).then((result) => {
-      if (verbose2)
-        console.log("Variable loaded:", api, "response time: ", result.requestDuration);
-      return result;
-    }, (e) => {
-      if (verbose2)
-        console.error(`Error fetching ${api} block ${block.id}: ${e.message}`);
-      return { data: {}, requestDuration: 0 };
-    });
-    resp = apiResponse.data;
-    duration = apiResponse.requestDuration;
+    const apiResponses = await Promise.all(apiPromisesList);
+    resp = apiResponses.length === 1 ? apiResponses[0].data : apiResponses.map((r) => r.data);
+    responseSize = apiResponses.reduce((acc, r) => acc + JSON.stringify(r.data).length / 1024, 0);
+    duration = Math.max(...apiResponses.map((ar) => ar.requestDuration));
   }
   if (block.type === BLOCK_TYPES.SELECTOR) {
     const { config, log: log2, error: error2 } = runSelector_default(
@@ -1157,6 +1180,7 @@ async function runSingleBlock(block, formatterFunctions, blockContext, readMembe
         error: "Configuration did not return an object",
         log,
         duration,
+        responseSize,
         resp,
         api,
         allowed
@@ -1171,6 +1195,7 @@ async function runSingleBlock(block, formatterFunctions, blockContext, readMembe
       log,
       error,
       duration,
+      responseSize,
       resp,
       api,
       allowed
@@ -1192,6 +1217,7 @@ var init_runConsumers = __esm({
     init_getBlockContent();
     init_getRootBlocksForSection();
     init_arrayUtils();
+    init_consts();
     verbose2 = getLogging_default();
     debug = yn4(process.env.NEXT_PUBLIC_REPORTS_DEBUG);
     ORIGIN = process.env.REPORTS_ORIGIN || "";
@@ -1319,10 +1345,17 @@ var init_runConsumers = __esm({
             ).then(({ outputVariables, status }) => {
               if (
                 // store output variables for block that:
-                block.consumers.length > 0 && status.allowed && Object.keys(outputVariables).length > 0
+                (block.consumers.length > 0 || block.type === BLOCK_TYPES.GENERATOR) && status.allowed && Object.keys(outputVariables).length > 0
               )
                 variablesById[bid2] = outputVariables;
-              statusById[bid2] = mode === "report" ? { allowed: status.allowed } : status;
+              if (mode === "report") {
+                statusById[bid2] = { allowed: status.allowed };
+                if (block.type === BLOCK_TYPES.GENERATOR && status.api) {
+                  statusById[bid2]["api"] = status.api;
+                }
+              } else {
+                statusById[bid2] = status;
+              }
             });
             const endBlock = /* @__PURE__ */ new Date();
             const blockTime = (endBlock.getTime() - startBlock.getTime()) / 1e3;
@@ -4119,15 +4152,20 @@ function useInitialState(pathSegmentsKey) {
           });
         }
         setPrivateBlocks({ resolved: true, blocks: [] });
-      }).catch(() => setPrivateBlocks({ resolved: true, blocks: [] }));
+        setLoading(false);
+      }).catch(() => {
+        setPrivateBlocks({ resolved: true, blocks: [] });
+        setLoading(false);
+      });
     }
     if (!isLoading && !user) {
       setPrivateBlocks({ resolved: true, blocks: [] });
+      setLoading(false);
     }
   }, [user, isLoading]);
   useEffect(() => {
     const hasParams = Object.keys(query).some((key) => key !== pathSegmentsKey);
-    if (hasParams && privateBlocks.resolved) {
+    if ((hasParams || privateBlocks.blocks.length > 0) && privateBlocks.resolved) {
       const selectorIds = Object.keys(query).map((d) => Number(d.match(/\d+/)));
       const revalidateBlocks = selectorIds.concat(privateBlocks.blocks);
       Promise.all(
@@ -4151,17 +4189,13 @@ function useInitialState(pathSegmentsKey) {
             { variables, status },
             readMemberFn,
             "report"
-          ).then((data) => {
-            return dispatch(variablesActions.setVariableChange({ ...data, attributes }));
-          });
+          );
         })
-      ).then(() => {
-        console.log("finished revalidate");
+      ).then((d) => {
         setLoading(false);
+        d.map((data) => dispatch(variablesActions.setVariableChange({ ...data, attributes })));
       });
     }
-    if (!hasParams && privateBlocks.resolved)
-      setLoading(false);
   }, [privateBlocks.resolved]);
   return loading || !privateBlocks.resolved;
 }
@@ -5076,33 +5110,86 @@ var evalType = (value) => {
   return t;
 };
 var sortOrder = ["object", "array", "string", "number"];
+var maxLevel = 5;
 function ConsoleVariable({
   dimmed = false,
   label,
   root = true,
-  value
+  value,
+  parentIsArray = false,
+  level = 0
 }) {
+  const theme = useMantineTheme();
+  if (level === maxLevel)
+    return null;
+  const maxLevelElement = /* @__PURE__ */ jsx(Text, { lineClamp: 1, size: "xs", variant: "dimmed", p: 5, children: "[Max depth hitted for preview]" });
   const t = evalType(value);
   let v = value;
   const textValue = JSON.stringify(value);
   const isLongText = textValue && textValue.length > 50 ? true : false;
-  const theme = useMantineTheme();
+  const limit = 10;
+  const accordionStyles = {
+    control: {
+      padding: "5px 0px 5px 5px"
+    },
+    label: {
+      padding: "5px 0px"
+    },
+    content: {
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingRight: 0
+    }
+  };
   if (t === "object") {
-    return /* @__PURE__ */ jsx(Accordion, { className: "cr-variable-accordion", children: /* @__PURE__ */ jsxs(Accordion.Item, { value: "label", children: [
-      /* @__PURE__ */ jsx(Accordion.Control, { children: /* @__PURE__ */ jsx(Text, { lineClamp: 1, size: "xs", weight: 700, children: label }) }),
-      /* @__PURE__ */ jsx(Accordion.Panel, { children: Object.keys(value).sort((a, b) => {
+    return /* @__PURE__ */ jsx(Accordion, { className: "cr-variable-accordion", variant: "contained", styles: accordionStyles, children: /* @__PURE__ */ jsxs(Accordion.Item, { value: "label", children: [
+      /* @__PURE__ */ jsx(Accordion.Control, { children: /* @__PURE__ */ jsx(Text, { lineClamp: 1, size: "xs", weight: 700, color: dimmed ? "dimmed" : theme.primaryColor, children: root ? `{{${label}}}` : parentIsArray ? `[${label}]` : label }) }),
+      /* @__PURE__ */ jsx(Accordion.Panel, { children: level + 1 < maxLevel ? Object.keys(value).sort((a, b) => {
         const aType = evalType(value[a]);
         const bType = evalType(value[b]);
         if (aType !== bType)
           return sortOrder.indexOf(aType) - sortOrder.indexOf(bType);
         return a.localeCompare(b);
-      }).map((k) => /* @__PURE__ */ jsx(ConsoleVariable, { root: false, label: k, value: value[k] }, k)) })
+      }).map(
+        (k) => /* @__PURE__ */ jsx(
+          ConsoleVariable,
+          {
+            root: false,
+            label: k,
+            value: value[k],
+            level: level + 1
+          },
+          k
+        )
+      ) : maxLevelElement })
     ] }) });
   }
   if (t === "array") {
-    return /* @__PURE__ */ jsx(Accordion, { className: "cr-variable-accordion", children: /* @__PURE__ */ jsxs(Accordion.Item, { value: "label", children: [
-      /* @__PURE__ */ jsx(Accordion.Control, { children: /* @__PURE__ */ jsx(Text, { lineClamp: 1, size: "xs", weight: 700, children: label }) }),
-      /* @__PURE__ */ jsx(Accordion.Panel, { children: value.map((k, i) => /* @__PURE__ */ jsx(ConsoleVariable, { root: false, label: i, value: k }, i)) })
+    const isLargeArray = value.length > limit;
+    const renderArray = isLargeArray ? value.slice(0, limit) : value;
+    const otherElements = isLargeArray ? value.length - limit : 0;
+    return /* @__PURE__ */ jsx(Accordion, { className: "cr-variable-accordion", variant: "contained", styles: accordionStyles, children: /* @__PURE__ */ jsxs(Accordion.Item, { value: "label", children: [
+      /* @__PURE__ */ jsx(Accordion.Control, { children: /* @__PURE__ */ jsx(Text, { lineClamp: 1, size: "xs", weight: 700, p: 0, color: dimmed ? "dimmed" : theme.primaryColor, children: root ? `{{${label}}}` : parentIsArray ? `[${label}]` : label }) }),
+      /* @__PURE__ */ jsxs(Accordion.Panel, { children: [
+        level + 1 < maxLevel ? renderArray.map(
+          (k, i) => /* @__PURE__ */ jsx(
+            ConsoleVariable,
+            {
+              root: false,
+              label: i,
+              value: k,
+              level: level + 1,
+              parentIsArray: true
+            },
+            i
+          )
+        ) : maxLevelElement,
+        isLargeArray && /* @__PURE__ */ jsxs(Text, { lineClamp: 1, size: "xs", variant: "dimmed", p: 5, children: [
+          "[+ ",
+          otherElements,
+          " other elements]"
+        ] })
+      ] })
     ] }) });
   }
   if (t === "string")
@@ -5120,13 +5207,14 @@ function ConsoleVariable({
         color: dimmed ? "dimmed" : theme.primaryColor,
         lineClamp: 1,
         size: "xs",
+        pl: 5,
         style: {
           overflow: "visible",
           wordBreak: "keep-all",
           whiteSpace: "nowrap"
         },
         weight: 700,
-        children: root ? `{{${label}}}` : label
+        children: root ? `{{${label}}}` : parentIsArray ? `[${label}]` : label
       }
     ),
     /* @__PURE__ */ jsx(
@@ -5136,10 +5224,21 @@ function ConsoleVariable({
         language: "jsx",
         noCopy: true,
         scrollAreaComponent: "div",
-        style: {
-          flex: "1 1 100%",
-          textAlign: "right",
-          overflow: "hidden"
+        styles: {
+          "root": {
+            flex: "1 1 100%",
+            textAlign: "right",
+            overflow: "hidden"
+          },
+          "code": {
+            padding: "5px 0 5px 5px"
+          },
+          "scrollArea": {
+            marginLeft: "5px"
+          },
+          "line": {
+            paddingRight: "5px"
+          }
         },
         children: v
       }
@@ -5171,10 +5270,7 @@ function InputMenuItem({
       value: variables[d]
     },
     d
-  )) : /* @__PURE__ */ jsx(Text, { color: "dimmed", size: "xs", children: /* @__PURE__ */ jsxs("i", { children: [
-    "empty",
-    label
-  ] }) }) });
+  )) : /* @__PURE__ */ jsx(Text, { color: "dimmed", size: "xs", children: /* @__PURE__ */ jsx("i", { children: `empty ${label}` }) }) });
 }
 var InputMenuItem_default = InputMenuItem;
 function Generator2({ outputVariables, status, hasAPI = false, debug: debug2 }) {
@@ -5755,6 +5851,7 @@ init_getBlockContent();
 init_hooks();
 init_varSwapRecursive();
 init_runConsumers();
+init_consts();
 var formatOptions = {
   csv: "CSV",
   json: "JSON",
@@ -5770,20 +5867,25 @@ function DataTab(props) {
   const router = useRouter();
   const sourcesOptions = useAppSelector((state) => {
     const dataInformation = [];
-    console.log("calculate api blocks");
     blocksIds.map((blockId) => state.records.entities.block[blockId]).filter((block) => [BLOCK_TYPES.GENERATOR, BLOCK_TYPES.VIZ].includes(block.type)).map((block) => {
+      console.log(state.variables.status[block.id]);
       if (block.type === BLOCK_TYPES.GENERATOR) {
         const api = state.variables.variables[block.id]._api || state.variables.status[block.id].api;
         if (api) {
-          const ix = dataInformation.length;
-          dataInformation.push(
-            {
-              ix,
-              id: block.id,
-              title: `Data Source ${ix + 1}`,
-              path: api
+          const apis = api.split(apiSeparator);
+          apis.forEach((apiUrl) => {
+            if (apiUrl && apiUrl !== "") {
+              const ix = dataInformation.length;
+              dataInformation.push(
+                {
+                  ix,
+                  id: block.id,
+                  title: `Data Source ${ix + 1}`,
+                  path: apiUrl
+                }
+              );
             }
-          );
+          });
         }
       } else if (block.type === BLOCK_TYPES.VIZ) {
         const content = getBlockContent(block);
@@ -5800,7 +5902,7 @@ function DataTab(props) {
           }
         };
         const d3Props = d3plusPropify_default(transpiledLogic, formatterFunctions, variables, locale, block.id, {}, globals);
-        if (d3Props.config._api) {
+        if (d3Props.config._api && d3Props.config._api !== "") {
           const ix = dataInformation.length;
           dataInformation.push(
             {
@@ -5810,7 +5912,7 @@ function DataTab(props) {
               path: d3Props.config._api
             }
           );
-        } else if (typeof d3Props.config.data === "string") {
+        } else if (typeof d3Props.config.data === "string" && d3Props.config.data !== "") {
           const ix = dataInformation.length;
           dataInformation.push(
             {
@@ -5822,7 +5924,7 @@ function DataTab(props) {
           );
         } else if (Array.isArray(d3Props.config.data)) {
           d3Props.config.data.forEach((dataItem) => {
-            if (typeof dataItem === "string") {
+            if (typeof dataItem === "string" && dataItem !== "") {
               const ix = dataInformation.length;
               dataInformation.push(
                 {
@@ -5944,7 +6046,7 @@ function DataTab(props) {
     )) }) }),
     selectedSource && /* @__PURE__ */ jsx(CopyInput, { title: `Original ${selectedSource.title}:`, url: selectedSource.path }),
     selectedSource && loadingPreview && /* @__PURE__ */ jsx(Fragment, { children: "Loading..." }),
-    selectedSource && !loadingPreview && currentPreview.length === 0 && /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: "1rem" }), title: "Oops!", children: "Sorry. We couldn't generate the data preview. Try to open the source and check the data directly." }),
+    selectedSource && !loadingPreview && currentPreview.length === 0 && /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: "1rem" }), title: "Oops!", children: "Sorry. We couldn't generate the data preview as a table. Try to open the source and check the data directly." }),
     selectedSource && !loadingPreview && currentPreview.length === 0 && /* @__PURE__ */ jsx("a", { href: selectedSource.path, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsx(
       Button,
       {
@@ -7144,7 +7246,7 @@ function Section({ section }) {
                         columnSettings,
                         sx: { flexBasis: `${100 / colsQty}%` },
                         children: columnBlocks.map((item) => {
-                          if (!item.id || !status[item.id].allowed && item.type !== BLOCK_TYPES.NAV)
+                          if (!item.id || !status[item.id]?.allowed && item.type !== BLOCK_TYPES.NAV)
                             return null;
                           const { settings: settings2, type } = blockRecords[item.id];
                           const blockWidth = settings2.width && !settings2.width.stretch && settings2.width.unit ? formatters[settings2.width.unit](settings2.width.value) : settings2.display === "inline" ? "auto" : "100%";
@@ -8949,9 +9051,9 @@ function ApiInput({
   defaultValue,
   id,
   onChange,
-  onEnterPress
+  onEnterPress,
+  onDelete
 }) {
-  const status = useBlockStatus(id);
   const formatterFunctions = useFormatterFunctionsForLocale();
   const blockContext = useBlockContext(id);
   const [preview, setPreview] = useState(() => varSwap_default(defaultValue, formatterFunctions, blockContext));
@@ -8970,21 +9072,9 @@ function ApiInput({
     setPreview(varSwap_default(value, formatterFunctions, blockContext));
     onChange(value);
   };
-  const getColor = (duration2) => {
-    if (duration2 < 150)
-      return "green";
-    if (duration2 < 1e3)
-      return "yellow";
-    return "red";
-  };
-  const duration = status?.duration;
-  return /* @__PURE__ */ jsxs(Group, { noWrap: true, position: "apart", spacing: "xs", children: [
-    /* @__PURE__ */ jsx(Text, { lineClamp: 1, size: "xs", children: /* @__PURE__ */ jsx("a", { href: preview, target: "_blank", rel: "noreferrer", children: preview }) }),
-    /* @__PURE__ */ jsxs(Group, { noWrap: true, spacing: "xs", children: [
-      duration && /* @__PURE__ */ jsxs(Badge, { color: getColor(duration), children: [
-        duration,
-        "ms"
-      ] }),
+  return /* @__PURE__ */ jsxs(Group, { noWrap: true, position: "apart", spacing: "xs", py: 5, children: [
+    /* @__PURE__ */ jsx(Text, { lineClamp: 1, size: "xs", children: /* @__PURE__ */ jsx("a", { href: preview, target: "_blank", rel: "noreferrer", children: preview || "--Add API Url--" }) }),
+    /* @__PURE__ */ jsxs(Group, { noWrap: true, spacing: 0, children: [
       /* @__PURE__ */ jsxs(
         Popover,
         {
@@ -8999,8 +9089,6 @@ function ApiInput({
               {
                 size: "xs",
                 onClick: () => setEditing((e) => !e),
-                variant: "filled",
-                color: editing ? "green" : "gray",
                 children: editing ? /* @__PURE__ */ jsx(IconCircleCheck, {}) : /* @__PURE__ */ jsx(IconPencil, {})
               }
             ) }),
@@ -9023,6 +9111,14 @@ function ApiInput({
             ) })
           ]
         }
+      ),
+      /* @__PURE__ */ jsx(
+        ActionIcon,
+        {
+          size: "xs",
+          onClick: () => onDelete(),
+          children: /* @__PURE__ */ jsx(IconTrash, { color: "red" })
+        }
       )
     ] })
   ] });
@@ -9077,6 +9173,7 @@ var emptyStatus = {
   duration: null,
   error: null,
   log: [],
+  responseSize: null,
   resp: null,
   allowed: true
 };
@@ -9097,27 +9194,9 @@ function BlockPreview(props) {
   const blockContent = types_default[block.type].renderPreviewOnEdit && blockStateContent ? blockStateContent : getBlockContent(block, locale);
   const [content, setContent] = useState(null);
   const [status, setStatus2] = useState(emptyStatus);
-  const [estimatedResponseSize, setEstimatedResponseSize] = useState(void 0);
-  const [estimatedOutputSize, setEstimatedOutputSize] = useState(void 0);
-  const [slugsInterceptor, setSlugsInterceptor] = useState(false);
+  const estimatedOutputSize = block.type === BLOCK_TYPES.GENERATOR && content && content.outputVariables ? JSON.stringify(content.outputVariables).length / 1024 : void 0;
+  const slugsInterceptor = block.type === BLOCK_TYPES.GENERATOR && status.api && status.api.indexOf("bespoke_slugs=") > -1 ? true : false;
   const readMemberFn = useReadMemberFn();
-  useEffect(() => {
-    if (block.type === BLOCK_TYPES.GENERATOR) {
-      if (status.resp) {
-        setEstimatedResponseSize(JSON.stringify(status.resp).length / 1024);
-      } else {
-        setEstimatedResponseSize(void 0);
-      }
-      if (content && content.outputVariables) {
-        setEstimatedOutputSize(JSON.stringify(content.outputVariables).length / 1024);
-      } else {
-        setEstimatedOutputSize(void 0);
-      }
-      if (status.api) {
-        setSlugsInterceptor(status.api.indexOf("bespoke_slugs=") > -1);
-      }
-    }
-  }, [status.resp, status.api, content, block.type]);
   useEffect(() => {
     const fetch = async () => {
       if (block.type === BLOCK_TYPES.VIZ) {
@@ -9226,16 +9305,16 @@ function BlockPreview(props) {
                 ]
               }
             ),
-            estimatedResponseSize && /* @__PURE__ */ jsxs(
+            status.responseSize && /* @__PURE__ */ jsxs(
               Badge,
               {
                 leftSection: /* @__PURE__ */ jsx(IconBox, { size: rem(12) }),
                 size: "md",
                 pl: 5,
-                color: getSizeColor(estimatedResponseSize),
+                color: getSizeColor(status.responseSize),
                 children: [
                   "Api Response Size: \u2248",
-                  estimatedResponseSize.toFixed(2),
+                  status.responseSize.toFixed(2),
                   " Kb"
                 ]
               }
@@ -9736,9 +9815,9 @@ function VariableList({ id, setInlineId }) {
                 size: "xs",
                 compact: true,
                 onClick: () => setInlineId(vid),
-                variant: "light",
-                color: "green",
-                leftIcon: /* @__PURE__ */ jsx(IconSettings, { size: 15 }),
+                variant: "subtle",
+                color: "gray",
+                leftIcon: /* @__PURE__ */ jsx(IconPencil, { size: 15 }),
                 children: "Edit this generator"
               }
             ),
@@ -9750,7 +9829,7 @@ function VariableList({ id, setInlineId }) {
                 onClick: () => removeAsInputClick(vid),
                 variant: "light",
                 color: "red",
-                leftIcon: /* @__PURE__ */ jsx(IconTrash, { size: 15 }),
+                leftIcon: /* @__PURE__ */ jsx(IconLinkOff, { size: 15 }),
                 children: "Remove as input"
               }
             )
@@ -9763,6 +9842,7 @@ function VariableList({ id, setInlineId }) {
 var VariableList_default = VariableList;
 
 // components/blocks/BlockEditor.tsx
+init_consts();
 init_hooks();
 
 // components/sections/SectionVariablesView.tsx
@@ -9799,11 +9879,29 @@ function BlockEditor({
 }) {
   const [tab, setTab] = useState("Content");
   const status = useBlockStatus(id);
-  const resp = status?.resp;
+  const resp = useMemo(() => {
+    let apisResponse = null;
+    if (status && status.resp) {
+      console.log("RESP CHANGED");
+      apisResponse = status.resp;
+    }
+    return apisResponse;
+  }, [status]);
   const variables = useInputVariablesFlat(id);
   const { ref, toggle, fullscreen } = useFullscreen();
+  const apiList = blockContent && blockContent.api ? blockContent.api.split(apiSeparator) : [];
   const onChangeCode = (logic, locale2) => setBlockContent({ logic }, locale2);
-  const onChangeAPI = (api) => setBlockContent({ api });
+  const onChangeAPI = (changedApi, ix) => {
+    const newApiList = [...apiList];
+    newApiList[ix] = changedApi;
+    setBlockContent({ api: newApiList.join(apiSeparator) });
+  };
+  const onAddAPI = () => {
+    setBlockContent({ api: [...apiList, ""].join(apiSeparator) });
+  };
+  const onDeleteAPI = (deletedIx) => {
+    setBlockContent({ api: apiList.filter((ai, ix) => ix !== deletedIx).join(apiSeparator) });
+  };
   const codeEditor = /* @__PURE__ */ jsx(
     MonacoWrapper_default,
     {
@@ -9846,26 +9944,45 @@ function BlockEditor({
           /* @__PURE__ */ jsx(InputMenu_default, { id }),
           /* @__PURE__ */ jsx("div", { style: { width: "100%", maxHeight: "80vh", overflowY: "auto" }, children: /* @__PURE__ */ jsx(VariableList_default, { id, setInlineId }) }),
           blockType === BLOCK_TYPES.GENERATOR && /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx(Divider, { label: "API Data (resp)", labelPosition: "center" }),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(Divider, { label: `${apiList.length} API's`, labelPosition: "center", mt: "md" }),
+            apiList.map((apiUrl, ix) => /* @__PURE__ */ jsx(
               ApiInput_default,
               {
-                defaultValue: blockContent?.api,
+                defaultValue: apiUrl,
                 id,
-                onChange: onChangeAPI,
-                onEnterPress: () => onSave(true)
-              }
-            ),
-            resp && /* @__PURE__ */ jsx(
-              "div",
+                onChange: (changedApi) => onChangeAPI(changedApi, ix),
+                onEnterPress: () => onSave(true),
+                onDelete: () => onDeleteAPI(ix)
+              },
+              `${id}-${ix}`
+            )),
+            /* @__PURE__ */ jsx(
+              Button,
               {
-                style: {
-                  maxHeight: 200,
-                  overflowY: "scroll"
-                },
-                children: /* @__PURE__ */ jsx(InputMenuItem_default, { id, variables: resp })
+                size: "xs",
+                compact: true,
+                onClick: onAddAPI,
+                variant: "light",
+                color: "blue",
+                fullWidth: true,
+                leftIcon: /* @__PURE__ */ jsx(IconPlus, { size: 15 }),
+                my: 5,
+                children: "Add API"
               }
-            )
+            ),
+            resp && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Divider, { label: "Response data preview (resp)", labelPosition: "center", my: "sm" }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    maxHeight: 200,
+                    overflowY: "scroll"
+                  },
+                  children: /* @__PURE__ */ jsx(ConsoleVariable_default, { value: resp, root: true, label: "resp" })
+                }
+              )
+            ] })
           ] })
         ]
       }

package/dist/server.js

@@ -4638,6 +4638,9 @@ function getRootBlocksForSection(sid, blocks) {
   );
 }
 var getRootBlocksForSection_default = getRootBlocksForSection;
+
+// libs/consts.ts
+var apiSeparator = "|||";
 var verbose7 = getLogging_default();
 var debug = yn3(process.env.NEXT_PUBLIC_REPORTS_DEBUG);
 var ORIGIN = process.env.REPORTS_ORIGIN || "";
@@ -4736,8 +4739,8 @@ async function runSingleBlock(block, formatterFunctions, blockContext, readMembe
   const allowed = isBlockAllowed(block, blockContext, variables, formatterFunctions);
   let resp = null;
   const unswappedAPI = block.contentByLocale?.logic?.content?.api;
-  let apiResponse;
   let duration = null;
+  let responseSize = null;
   let api = null;
   if (!allowed) {
     return {
@@ -4748,21 +4751,35 @@ async function runSingleBlock(block, formatterFunctions, blockContext, readMembe
   }
   if (unswappedAPI) {
     api = swapAPI(unswappedAPI, formatterFunctions, blockContext);
-    const isAbsolute = new RegExp("^(?:[a-z+]+:)?//", "i");
-    if (!isAbsolute.test(api)) {
-      api = `${process.env.NEXT_PUBLIC_REPORTS_BASE_URL}/${api}`.replace(/([^:]\/)\/+/g, "$1");
+    const apis = api.split(apiSeparator).filter((apiItem) => apiItem !== "");
+    const apiPromisesList = [];
+    for (let index = 0; index < apis.length; index++) {
+      let apiUrl = apis[index];
+      const isAbsolute = new RegExp("^(?:[a-z+]+:)?//", "i");
+      if (!isAbsolute.test(api)) {
+        apiUrl = `${process.env.NEXT_PUBLIC_REPORTS_BASE_URL}/${apiUrl}`.replace(/([^:]\/)\/+/g, "$1");
+      }
+      apiPromisesList.push(
+        apiFetch(
+          apiUrl,
+          block.settings,
+          readMemberFn,
+          locale
+        ).then((result) => {
+          if (verbose7)
+            console.log("Variable loaded:", apiUrl, "response time: ", result.requestDuration);
+          return result;
+        }, (e) => {
+          if (verbose7)
+            console.error(`Error fetching ${apiUrl} block ${block.id}: ${e.message}`);
+          return { data: {}, requestDuration: 0 };
+        })
+      );
     }
-    apiResponse = await apiFetch(api, block.settings, readMemberFn, locale).then((result) => {
-      if (verbose7)
-        console.log("Variable loaded:", api, "response time: ", result.requestDuration);
-      return result;
-    }, (e) => {
-      if (verbose7)
-        console.error(`Error fetching ${api} block ${block.id}: ${e.message}`);
-      return { data: {}, requestDuration: 0 };
-    });
-    resp = apiResponse.data;
-    duration = apiResponse.requestDuration;
+    const apiResponses = await Promise.all(apiPromisesList);
+    resp = apiResponses.length === 1 ? apiResponses[0].data : apiResponses.map((r) => r.data);
+    responseSize = apiResponses.reduce((acc, r) => acc + JSON.stringify(r.data).length / 1024, 0);
+    duration = Math.max(...apiResponses.map((ar) => ar.requestDuration));
   }
   if (block.type === BLOCK_TYPES.SELECTOR) {
     const { config, log: log2, error: error2 } = runSelector_default(
@@ -4804,6 +4821,7 @@ async function runSingleBlock(block, formatterFunctions, blockContext, readMembe
         error: "Configuration did not return an object",
         log,
         duration,
+        responseSize,
         resp,
         api,
         allowed
@@ -4818,6 +4836,7 @@ async function runSingleBlock(block, formatterFunctions, blockContext, readMembe
       log,
       error,
       duration,
+      responseSize,
       resp,
       api,
       allowed
@@ -4933,10 +4952,17 @@ var runConsumersV2 = async (blocks, sections, bid, formatterFunctions, blockCont
         ).then(({ outputVariables, status }) => {
           if (
             // store output variables for block that:
-            block.consumers.length > 0 && status.allowed && Object.keys(outputVariables).length > 0
+            (block.consumers.length > 0 || block.type === BLOCK_TYPES.GENERATOR) && status.allowed && Object.keys(outputVariables).length > 0
           )
             variablesById[bid2] = outputVariables;
-          statusById[bid2] = mode === "report" ? { allowed: status.allowed } : status;
+          if (mode === "report") {
+            statusById[bid2] = { allowed: status.allowed };
+            if (block.type === BLOCK_TYPES.GENERATOR && status.api) {
+              statusById[bid2]["api"] = status.api;
+            }
+          } else {
+            statusById[bid2] = status;
+          }
         });
         const endBlock = /* @__PURE__ */ new Date();
         const blockTime = (endBlock.getTime() - startBlock.getTime()) / 1e3;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/bespoke",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "description": "Content management system for creating automated data reports",
   "exports": {
     ".": {