@datawheel/bespoke 0.1.31 → 0.1.33

package/dist/index.js

@@ -16,11 +16,11 @@ import { Notifications, notifications } from '@mantine/notifications';
 import React, { forwardRef, useMemo, useState, useCallback, useContext, useEffect, createContext, useRef, Fragment as Fragment$1, createElement } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useDispatch, useSelector } from 'react-redux';
-import { Stack, Text, Badge, Group, useMantineTheme, Flex, packSx, Tooltip, ActionIcon, Center, Modal, Button, SegmentedControl, Select, MultiSelect, Title, TextInput, Switch, Box, List, Menu, Anchor, MantineProvider, Divider, Burger, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Container, Loader, Alert, Collapse, Card, Space, Code, Textarea, rem, Paper, Grid, Input, Popover, Checkbox, Radio, Drawer, Overlay, SimpleGrid, Autocomplete, Tabs, Header, px, Image, FileInput, Accordion, HoverCard, CopyButton, NumberInput, Col } from '@mantine/core';
+import { Stack, Text, Badge, Group, useMantineTheme, Flex, packSx, Title, Tooltip, ActionIcon, Center, Modal, Button, SegmentedControl, Select, MultiSelect, TextInput, Switch, Box, List, Menu, Anchor, MantineProvider, Divider, Burger, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Container, Loader, Alert, Collapse, Card, Space, Code, Textarea, rem, Paper, Grid, Input, Popover, Checkbox, Radio, Drawer, Overlay, SimpleGrid, Autocomplete, Tabs, Header, px, Image, FileInput, Accordion, HoverCard, CopyButton, NumberInput, Col } from '@mantine/core';
 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, 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 } from '@tabler/icons-react';
 import { useMediaQuery, useDisclosure, useDebouncedValue, useHotkeys, useFullscreen, getHotkeyHandler } from '@mantine/hooks';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
@@ -1302,7 +1302,6 @@ var init_runConsumers = __esm({
             );
             if (inputNotAllowed) {
               statusById[bid2] = {
-                log: [],
                 allowed: false,
                 hiddenByCascade: statusById[inputNotAllowed].hiddenByCascade || inputNotAllowed
               };
@@ -1318,8 +1317,12 @@ var init_runConsumers = __esm({
               },
               readMemberFn
             ).then(({ outputVariables, status }) => {
-              variablesById[bid2] = outputVariables;
-              statusById[bid2] = status;
+              if (
+                // store output variables for block that:
+                block.consumers.length > 0 && status.allowed && Object.keys(outputVariables).length > 0
+              )
+                variablesById[bid2] = outputVariables;
+              statusById[bid2] = mode === "report" ? { allowed: status.allowed } : status;
             });
             const endBlock = /* @__PURE__ */ new Date();
             const blockTime = (endBlock.getTime() - startBlock.getTime()) / 1e3;
@@ -1873,15 +1876,12 @@ var init_recordsSlice = __esm({
          */
         setReadRequest(state, action) {
           const req = action.payload;
-          state.requests[req.type][req.key] = req;
+          if (req.type !== "report")
+            state.requests[req.type][req.key] = req;
           if (req.status === "SUCCESS" /* SUCCESS */) {
             const newEntities = normalizeEntity(req.type, req.data);
             const nextEntities = combineRecords(state.entities, newEntities);
             state.entities = nextEntities;
-            if (req.type === "report") {
-              state.reports = Object.values(nextEntities.report).map((item) => item.id);
-              state.tree = req.data;
-            }
           }
         },
         /**
@@ -2929,38 +2929,51 @@ function Viz(config) {
   const Visualization = vizTypes[fallbackType];
   const { _data, ...vizPropsConfig } = vizProps.config;
   const vizConfig = { locale, variables, ...vizPropsConfig, ...configOverride };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flex: "1 1 100%",
-        minHeight: 400
-      },
-      children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx("p", { children: "Error in d3plus viz config." }), children: /* @__PURE__ */ jsx(
-        Visualization,
-        {
-          style: { flex: 1 },
-          dataFormat: (resp) => {
-            vizProps.data && Array.isArray(vizProps.data) && vizProps.data.length > 1 && vizProps.data.some((d) => typeof d === "string");
-            let data;
-            try {
-              data = vizProps.dataFormat(resp);
-            } catch (e) {
-              console.log("Error in dataFormat: ", e);
-              data = [];
-            }
-            return data;
-          },
-          linksFormat: vizProps.linksFormat,
-          nodesFormat: vizProps.nodesFormat,
-          topojsonFormat: vizProps.topojsonFormat,
-          config: { ...defaultConfig_default, ...vizConfig, sectionVariables: sectionVariablesStr }
+  const { title } = vizConfig;
+  return /* @__PURE__ */ jsxs("div", { className: "bespoke-Viz", children: [
+    title && /* @__PURE__ */ jsx(
+      Title,
+      {
+        className: "bespoke-Viz-title",
+        order: 4,
+        size: "h6",
+        align: "center",
+        dangerouslySetInnerHTML: { __html: title }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flex: "1 1 100%",
+          minHeight: 400
         },
-        "viz-key"
-      ) })
-    }
-  );
+        children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx("p", { children: "Error in d3plus viz config." }), children: /* @__PURE__ */ jsx(
+          Visualization,
+          {
+            style: { flex: 1 },
+            dataFormat: (resp) => {
+              vizProps.data && Array.isArray(vizProps.data) && vizProps.data.length > 1 && vizProps.data.some((d) => typeof d === "string");
+              let data;
+              try {
+                data = vizProps.dataFormat(resp);
+              } catch (e) {
+                console.log("Error in dataFormat: ", e);
+                data = [];
+              }
+              return data;
+            },
+            linksFormat: vizProps.linksFormat,
+            nodesFormat: vizProps.nodesFormat,
+            topojsonFormat: vizProps.topojsonFormat,
+            config: { ...defaultConfig_default, ...vizConfig, sectionVariables: sectionVariablesStr, title: void 0 }
+          },
+          "viz-key"
+        ) })
+      }
+    )
+  ] });
 }
 var vizTypes;
 var init_Viz = __esm({
@@ -5164,11 +5177,16 @@ function InputMenuItem({
   ] }) }) });
 }
 var InputMenuItem_default = InputMenuItem;
-function Generator2({ outputVariables, debug: debug2 }) {
-  return debug2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+function Generator2({ outputVariables, status, hasAPI = false, debug: debug2 }) {
+  const loading = hasAPI && !Object.keys(outputVariables).length && !status.error;
+  const preview = loading ? /* @__PURE__ */ jsxs(Stack, { align: "center", children: [
+    /* @__PURE__ */ jsx(Loader, {}),
+    /* @__PURE__ */ jsx(Text, { size: "sm", children: "Loading Generator" })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Divider, { label: "Output Variables", labelPosition: "center" }),
     /* @__PURE__ */ jsx(InputMenuItem_default, { variables: outputVariables })
-  ] }) : /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(Badge, { color: "gray", variant: "outline", children: "GENERATOR" }, "type") });
+  ] });
+  return debug2 ? preview : /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(Badge, { color: "gray", variant: "outline", children: "GENERATOR" }, "type") });
 }
 var Generator_default = Generator2;
 
@@ -5601,35 +5619,50 @@ function SectionBackground() {
     key: member ? `bg-${member.content_id}` : `bg-${ix}`,
     src: member ? `/api/cms/member/image.png?member=${member.content_id}&size=splash` : ""
   }));
-  return /* @__PURE__ */ jsx(
-    Group,
-    {
-      className: "cms-section-bg",
-      grow: true,
-      spacing: 0,
-      style: {
-        background: "white",
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-        opacity: 0.5
-      },
-      children: images.map((image) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "cms-section-member-bg",
-          style: {
-            backgroundImage: `url(${image.src})`,
-            backgroundSize: "cover",
-            backgroundPosition: "center center",
-            height: "100%",
-            width: "100%"
-          }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "cms-section-gradient-bg",
+        style: {
+          background: "white",
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          opacity: 0.33,
+          zIndex: 1
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Group,
+      {
+        className: "cms-section-bg",
+        grow: true,
+        spacing: 0,
+        style: {
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          zIndex: 0
         },
-        image.key
-      ))
-    }
-  );
+        children: images.map((image) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "cms-section-member-bg",
+            style: {
+              backgroundImage: `url(${image.src})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center center",
+              height: "100%",
+              width: "100%"
+            }
+          },
+          image.key
+        ))
+      }
+    )
+  ] });
 }
 
 // components/options/Options.tsx
@@ -7016,8 +7049,8 @@ var PositionWrapper = ({ settings, styles, children, ...props }) => {
 var WidthWrapper = ({ settings, styles, children, ...props }) => {
   const { width: container } = settings;
   const defaultStyles = {
-    "center": {},
-    "full": {}
+    "center": { zIndex: 1 },
+    "full": { zIndex: 1 }
   };
   const defaultProps = {
     "center": { size: "lg", p: "sm", fluid: false },
@@ -7057,7 +7090,7 @@ function Section({ section }) {
       return b.settings.allowed === "always";
     }
   });
-  const columns = sectionBlocks.reduce((acc, d) => {
+  const columns = sectionBlocks.filter((d) => d.type !== BLOCK_TYPES.GENERATOR).reduce((acc, d) => {
     if (!acc[d.blockcol]) {
       acc[d.blockcol] = { [d.blockrow]: d };
     } else {
@@ -7073,6 +7106,7 @@ function Section({ section }) {
   return /* @__PURE__ */ jsxs(
     PositionWrapper,
     {
+      className: `bespoke-Section-${id} bespoke-Section-root `,
       settings: sectionSettings2,
       styles: sectionStyles?.root || void 0,
       children: [
@@ -7080,6 +7114,7 @@ function Section({ section }) {
         /* @__PURE__ */ jsxs(
           WidthWrapper,
           {
+            className: `bespoke-Section-${id} bespoke-Section-container `,
             settings: sectionSettings2,
             styles: sectionStyles?.container,
             id: `section-${id}`,
@@ -7089,34 +7124,52 @@ function Section({ section }) {
                 /* @__PURE__ */ jsx(SectionResetButton, { id: section.id }),
                 sectionSettings2.optionsMenu && /* @__PURE__ */ jsx(Options, { sectionId: section.id })
               ] }),
-              /* @__PURE__ */ jsx(StyleWrapper, { className: "bespoke-section-content", settings: sectionSettings2, styles: sectionStyles?.content, children: /* @__PURE__ */ jsx(ColumnsWrapper, { children: Object.keys(columns).sort((a, b) => orderSort(a, b, "blockcol")).map((columnIndex) => {
-                const column = columns[columnIndex];
-                const columnSettings = settings.columnSettings ? settings.columnSettings[columnIndex] : {};
-                return /* @__PURE__ */ jsx(
-                  SectionColumn,
-                  {
-                    column,
-                    columnSettings,
-                    sx: { flexBasis: `${100 / colsQty}%` },
-                    children: Object.values(column).sort((a, b) => orderSort(a, b, "blockrow")).map((item) => {
-                      if (!item.id)
-                        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%";
-                      const blockStyles = {
-                        alignSelf: type === "visualization" ? "stretch" : "flex-start",
-                        flexGrow: 0,
-                        margin: "0",
-                        textAlign: settings2.align || blockSettings.align.defaultValue,
-                        width: blockWidth,
-                        minWidth: 300
-                      };
-                      return /* @__PURE__ */ jsx(Box, { sx: blockStyles, py: site_default.block.padding, children: /* @__PURE__ */ jsx(Block, { blockId: item.id }, item.id) }, item.id);
-                    })
-                  },
-                  columnIndex
-                );
-              }) }) })
+              /* @__PURE__ */ jsx(
+                StyleWrapper,
+                {
+                  className: `bespoke-Section-${id} bespoke-Section-container`,
+                  settings: sectionSettings2,
+                  styles: sectionStyles?.content,
+                  children: /* @__PURE__ */ jsx(ColumnsWrapper, { children: Object.keys(columns).sort((a, b) => orderSort(a, b, "blockcol")).map((columnIndex) => {
+                    const column = columns[columnIndex];
+                    const columnSettings = settings.columnSettings ? settings.columnSettings[columnIndex] : {};
+                    return /* @__PURE__ */ jsx(
+                      SectionColumn,
+                      {
+                        column,
+                        columnSettings,
+                        sx: { flexBasis: `${100 / colsQty}%` },
+                        children: Object.values(column).sort((a, b) => orderSort(a, b, "blockrow")).map((item) => {
+                          if (!item.id || !status[item.id].allowed)
+                            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%";
+                          const blockStyles = {
+                            alignSelf: type === "visualization" ? "stretch" : "flex-start",
+                            flexGrow: 0,
+                            margin: "0",
+                            textAlign: settings2.align || blockSettings.align.defaultValue,
+                            width: blockWidth,
+                            minWidth: 300
+                          };
+                          return /* @__PURE__ */ jsx(
+                            Box,
+                            {
+                              className: "bespoke-Block-wrapper",
+                              id: `bespoke-Block-${item.id}`,
+                              sx: blockStyles,
+                              py: site_default.block.padding,
+                              children: /* @__PURE__ */ jsx(Block, { blockId: item.id }, item.id)
+                            },
+                            item.id
+                          );
+                        })
+                      },
+                      columnIndex
+                    );
+                  }) })
+                }
+              )
             ]
           }
         )
@@ -9082,7 +9135,8 @@ function BlockPreview(props) {
         return;
       }
       if (block.type === BLOCK_TYPES.GENERATOR) {
-        setContent({ outputVariables: generatorVariables });
+        const hasAPI = Boolean(block.contentByLocale?.logic?.content?.api);
+        setContent({ outputVariables: generatorVariables, hasAPI });
         setStatus2(generatorStatus);
         return;
       }
@@ -9140,7 +9194,7 @@ function BlockPreview(props) {
       style: { width: "100%", minHeight: block.type === BLOCK_TYPES.VIZ ? 400 : "auto" },
       children: [
         !allowed && allowedOverlay,
-        Renderer ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Renderer, { id: block.id, debug: debug2, ...content, settings: block.settings }) }, "renderer") : /* @__PURE__ */ jsx(Center, { style: { minHeight: 100 }, children: /* @__PURE__ */ jsx(Badge, { color: "gray", variant: "outline", children: block.type }, "type") }),
+        Renderer ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Renderer, { id: block.id, debug: debug2, ...content, settings: block.settings, status }) }, "renderer") : /* @__PURE__ */ jsx(Center, { style: { minHeight: 100 }, children: /* @__PURE__ */ jsx(Badge, { color: "gray", variant: "outline", children: block.type }, "type") }),
         debug2 && textLog && /* @__PURE__ */ jsx(
           Textarea,
           {
@@ -10308,6 +10362,28 @@ init_getBlockContent();
 
 // components/sections/SectionHeader.tsx
 init_esm_shims();
+init_store2();
+init_cms();
+init_getBlockContent();
+function AddGeneratorButton({ section_id, onCreate = () => {
+} }) {
+  const dispatch = useAppDispatch();
+  const createGenerator = () => {
+    const { locales: locales4 } = getLocaleDerived({ type: BLOCK_TYPES.GENERATOR });
+    dispatch(actions_exports.createEntity("block", {
+      blockrow: void 0,
+      blockcol: void 0,
+      type: BLOCK_TYPES.GENERATOR,
+      section_id,
+      locales: locales4
+    }));
+    onCreate();
+  };
+  return /* @__PURE__ */ jsxs(Group, { spacing: "xs", ml: "sm", children: [
+    /* @__PURE__ */ jsx(ActionIcon, { color: "blue", size: "xs", radius: "lg", variant: "light", onClick: createGenerator, children: /* @__PURE__ */ jsx(IconApi, { size: "0.8rem" }) }),
+    /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", onClick: createGenerator, children: "Add generator" })
+  ] });
+}
 function SectionHeader({
   active,
   isDragging,
@@ -10329,18 +10405,35 @@ function SectionHeader({
             id || "hello"
           ] }, "s1"),
           /* @__PURE__ */ jsx(ActionIcon, { ...dragHandleProps, children: /* @__PURE__ */ jsx(IconMenu, { size: 16 }) }, "b1"),
-          /* @__PURE__ */ jsx(
+          generators.hasGenerators && active && /* @__PURE__ */ jsx(
             Switch,
             {
               size: "xs",
-              label: "Show generators",
+              label: /* @__PURE__ */ jsxs(Text, { c: "dimmed", size: "xs", children: [
+                generators.showGenerators ? "Hide" : "Show",
+                " generators"
+              ] }),
               color: "green",
               checked: generators.showGenerators,
+              onLabel: /* @__PURE__ */ jsx(IconApi, { size: "0.8rem" }),
+              offLabel: /* @__PURE__ */ jsx(IconApi, { size: "0.8rem" }),
               onChange: (e) => generators.setShowGenerators(e.currentTarget.checked)
             }
-          )
+          ),
+          (!generators.hasGenerators || generators.showGenerators) && active && /* @__PURE__ */ jsx(AddGeneratorButton, { section_id: id, onCreate: () => generators.setShowGenerators(true) })
         ] }),
-        hidden && /* @__PURE__ */ jsx(Text, { size: "xs", fw: 600, color: "dark.3", children: "Section will be hidden on the frontend" }),
+        hidden && /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "xs",
+            fw: 600,
+            pos: "absolute",
+            sx: { transform: "translateX(-50%)" },
+            left: "50%",
+            color: "dark.3",
+            children: "Section will be hidden on the frontend"
+          }
+        ),
         /* @__PURE__ */ jsx(SectionMenu_default, { sectionId: id })
       ]
     }
@@ -10377,7 +10470,7 @@ var CreateBlockButton = ({ columns, columnIndex, section }) => {
         type: "select",
         name: "type",
         label: "Block Type",
-        options: blockTypes.map((d) => ({ label: d, value: d }))
+        options: blockTypes.filter((d) => d !== BLOCK_TYPES.GENERATOR).map((d) => ({ label: d, value: d }))
       }],
       onSubmit: (value) => addBlock(value.type, columnIndex),
       target: /* @__PURE__ */ jsx(ActionIcon, { size: "md", radius: "lg", children: /* @__PURE__ */ jsx(IconCirclePlus, { size: 20 }) })
@@ -10434,21 +10527,29 @@ var ClickToEditOverlay = ({ onActivate, section, show = false }) => {
   );
 };
 var GeneratorsPanel = ({ generators, show = false }) => {
-  return /* @__PURE__ */ jsxs(Collapse, { in: show, p: "sm", children: [
-    /* @__PURE__ */ jsx(Title, { order: 5, align: "center", children: "Generators" }),
-    /* @__PURE__ */ jsx(
-      SimpleGrid,
-      {
-        cols: generators.length > 3 ? 3 : generators.length,
-        breakpoints: [
-          { maxWidth: "md", cols: 3, spacing: "md" },
-          { maxWidth: "sm", cols: 2, spacing: "sm" },
-          { maxWidth: "xs", cols: 1, spacing: "sm" }
-        ],
-        children: generators
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(Collapse, { in: show, p: "sm", children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: (theme) => ({
+        backgroundColor: theme.colors.gray[1],
+        padding: theme.spacing.xl,
+        borderRadius: theme.radius.md
+      }),
+      children: /* @__PURE__ */ jsx(
+        SimpleGrid,
+        {
+          cols: generators.length > 3 ? 3 : generators.length,
+          mt: "md",
+          breakpoints: [
+            { maxWidth: "md", cols: 3, spacing: "md" },
+            { maxWidth: "sm", cols: 2, spacing: "sm" },
+            { maxWidth: "xs", cols: 1, spacing: "sm" }
+          ],
+          children: generators
+        }
+      )
+    }
+  ) });
 };
 function SectionEditor({
   for: section,
@@ -10542,134 +10643,144 @@ function SectionEditor({
             dragHandleProps,
             generators: {
               showGenerators,
-              setShowGenerators
+              setShowGenerators,
+              hasGenerators: Boolean(generators.length)
             }
           }
         ),
-        memberImageBg && /* @__PURE__ */ jsx(SectionBackground, {}),
-        optionsMenu && /* @__PURE__ */ jsxs(Flex, { justify: "flex-end", mx: 16, align: "center", gap: "xs", children: [
-          /* @__PURE__ */ jsx(SectionResetButton, { id: section.id }),
-          /* @__PURE__ */ jsx(Options, { sectionId: section.id })
-        ] }),
-        /* @__PURE__ */ jsx(
-          GeneratorsPanel,
-          {
-            show: showGenerators,
-            generators: generators.map((item) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              BlockElement_default,
-              {
-                id: Number(item.id),
-                active: isActive,
-                isInput: inputs.includes(Number(item.id)),
-                isConsumer: consumers.includes(Number(item.id)),
-                setHoverBlock
-              }
-            ) }, `block-${item.id}`))
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          ColumnsWrapper,
-          {
-            ref: columnContainer,
-            containerProps: {
-              mih: !isActive || !columnsQty ? 120 : "none",
-              p: "md"
-            },
-            children: [
-              /* @__PURE__ */ jsxs(DragDropContext, { onDragEnd, onDragStart, children: [
-                orderedCols.map((columnIndex) => {
-                  const orderedBlocks = Object.values(columns[columnIndex]).sort((a, b) => orderSort(a, b, "blockrow"));
-                  return /* @__PURE__ */ jsx(Droppable, { droppableId: columnIndex, children: (provided, snapshot) => /* @__PURE__ */ jsxs(
-                    SectionColumn,
-                    {
-                      column: columns[columnIndex],
-                      columnSettings: columnSettings[columnIndex],
-                      ref: provided.innerRef,
-                      sx: {
-                        // extra styles for columns on editor
-                        flexBasis: `${100 / columnsQty}%`,
-                        background: snapshot.isDraggingOver ? theme.colors[theme.primaryColor][0] : "inherit",
-                        border: "1px solid transparent",
-                        "& .bespoke-resize-col": {
-                          visibility: "hidden"
-                        },
-                        "&:hover .bespoke-resize-col": {
-                          visibility: "visible"
-                        },
-                        "&:hover": {
-                          border: `1px solid ${theme.colors.teal[1]}`
-                        }
-                      },
-                      ...provided.droppableProps,
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          ResizeColumnInput,
-                          {
-                            sectionId: section.id,
-                            columnIndex
+        /* @__PURE__ */ jsxs(Box, { pos: "relative", children: [
+          optionsMenu && /* @__PURE__ */ jsxs(Flex, { justify: "flex-end", mx: 16, align: "center", gap: "xs", children: [
+            /* @__PURE__ */ jsx(SectionResetButton, { id: section.id }),
+            /* @__PURE__ */ jsx(Options, { sectionId: section.id })
+          ] }),
+          /* @__PURE__ */ jsx(
+            GeneratorsPanel,
+            {
+              show: showGenerators && Boolean(generators.length),
+              generators: generators.map((item) => /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs(Title, { order: 6, children: [
+                  "Generator ",
+                  item.id
+                ] }),
+                /* @__PURE__ */ jsx(
+                  BlockElement_default,
+                  {
+                    id: Number(item.id),
+                    active: isActive,
+                    isInput: inputs.includes(Number(item.id)),
+                    isConsumer: consumers.includes(Number(item.id)),
+                    setHoverBlock
+                  }
+                )
+              ] }, `block-${item.id}`))
+            }
+          ),
+          memberImageBg && /* @__PURE__ */ jsx(SectionBackground, {}),
+          /* @__PURE__ */ jsxs(
+            ColumnsWrapper,
+            {
+              ref: columnContainer,
+              containerProps: {
+                mih: !isActive || !columnsQty ? 120 : "none",
+                p: "md",
+                style: { zIndex: 1 }
+              },
+              children: [
+                /* @__PURE__ */ jsxs(DragDropContext, { onDragEnd, onDragStart, children: [
+                  orderedCols.map((columnIndex) => {
+                    const orderedBlocks = Object.values(columns[columnIndex]).sort((a, b) => orderSort(a, b, "blockrow"));
+                    return /* @__PURE__ */ jsx(Droppable, { droppableId: columnIndex, children: (provided, snapshot) => /* @__PURE__ */ jsxs(
+                      SectionColumn,
+                      {
+                        column: columns[columnIndex],
+                        columnSettings: columnSettings[columnIndex],
+                        ref: provided.innerRef,
+                        sx: {
+                          // extra styles for columns on editor
+                          flexBasis: `${100 / columnsQty}%`,
+                          background: snapshot.isDraggingOver ? theme.colors[theme.primaryColor][0] : "inherit",
+                          border: "1px solid transparent",
+                          "& .bespoke-resize-col": {
+                            visibility: "hidden"
+                          },
+                          "&:hover .bespoke-resize-col": {
+                            visibility: "visible"
+                          },
+                          "&:hover": {
+                            border: `1px solid ${theme.colors.teal[1]}`
                           }
-                        ),
-                        orderedBlocks.map((item, rowIndex) => {
-                          if (!blocks[item.id])
-                            return null;
-                          const { settings, type } = blocks[item.id];
-                          const blockWidth = settings.width && !settings.width.stretch && settings.width.unit ? formatters[settings.width.unit](settings.width.value) : settings.display === "inline" ? "auto" : "100%";
-                          const blockStyles = {
-                            alignSelf: type === "visualization" ? "stretch" : "flex-start",
-                            flexGrow: 0,
-                            margin: "0",
-                            textAlign: settings.align || blockSettings.align.defaultValue,
-                            width: blockWidth,
-                            minWidth: 120
-                          };
-                          return /* @__PURE__ */ jsx(
-                            Draggable,
+                        },
+                        ...provided.droppableProps,
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            ResizeColumnInput,
                             {
-                              draggableId: String(item.id),
-                              index: rowIndex,
-                              children: (provided2, snapshot2) => /* @__PURE__ */ jsx(
-                                Box,
-                                {
-                                  ref: provided2.innerRef,
-                                  ...provided2.draggableProps,
-                                  ...provided2.dragHandleProps,
-                                  sx: [
-                                    blockStyles,
-                                    {
-                                      boxShadow: snapshot2.isDragging ? theme.shadows.lg : "none",
-                                      ...provided2.draggableProps.style
-                                    }
-                                  ],
-                                  children: /* @__PURE__ */ jsx(
-                                    BlockElement_default,
-                                    {
-                                      id: Number(item.id),
-                                      active: isActive,
-                                      isInput: inputs.includes(Number(item.id)),
-                                      isConsumer: consumers.includes(Number(item.id)),
-                                      setHoverBlock
-                                    },
-                                    `block-${item.id}`
-                                  )
-                                }
-                              )
-                            },
-                            item.id
-                          );
-                        }),
-                        isActive && /* @__PURE__ */ jsx(CreateBlockButton, { section, columnIndex, columns }),
-                        provided.placeholder
-                      ]
-                    }
-                  ) }, columnIndex);
-                }),
-                /* @__PURE__ */ jsx(CreateColumnArea, { active: draggingBlock && isActive })
-              ] }),
-              /* @__PURE__ */ jsx(FirstBlockButton, { columns, section, show: isActive && !columnsQty })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(ClickToEditOverlay, { onActivate, section, show: !isActive })
+                              sectionId: section.id,
+                              columnIndex
+                            }
+                          ),
+                          orderedBlocks.map((item, rowIndex) => {
+                            if (!blocks[item.id])
+                              return null;
+                            const { settings, type } = blocks[item.id];
+                            const blockWidth = settings.width && !settings.width.stretch && settings.width.unit ? formatters[settings.width.unit](settings.width.value) : settings.display === "inline" ? "auto" : "100%";
+                            const blockStyles = {
+                              alignSelf: type === "visualization" ? "stretch" : "flex-start",
+                              flexGrow: 0,
+                              margin: "0",
+                              textAlign: settings.align || blockSettings.align.defaultValue,
+                              width: blockWidth,
+                              minWidth: 120
+                            };
+                            return /* @__PURE__ */ jsx(
+                              Draggable,
+                              {
+                                draggableId: String(item.id),
+                                index: rowIndex,
+                                children: (provided2, snapshot2) => /* @__PURE__ */ jsx(
+                                  Box,
+                                  {
+                                    ref: provided2.innerRef,
+                                    ...provided2.draggableProps,
+                                    ...provided2.dragHandleProps,
+                                    sx: [
+                                      blockStyles,
+                                      {
+                                        boxShadow: snapshot2.isDragging ? theme.shadows.lg : "none",
+                                        ...provided2.draggableProps.style
+                                      }
+                                    ],
+                                    children: /* @__PURE__ */ jsx(
+                                      BlockElement_default,
+                                      {
+                                        id: Number(item.id),
+                                        active: isActive,
+                                        isInput: inputs.includes(Number(item.id)),
+                                        isConsumer: consumers.includes(Number(item.id)),
+                                        setHoverBlock
+                                      },
+                                      `block-${item.id}`
+                                    )
+                                  }
+                                )
+                              },
+                              item.id
+                            );
+                          }),
+                          isActive && /* @__PURE__ */ jsx(CreateBlockButton, { section, columnIndex, columns }),
+                          provided.placeholder
+                        ]
+                      }
+                    ) }, columnIndex);
+                  }),
+                  /* @__PURE__ */ jsx(CreateColumnArea, { active: draggingBlock && isActive })
+                ] }),
+                /* @__PURE__ */ jsx(FirstBlockButton, { columns, section, show: isActive && !columnsQty })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(ClickToEditOverlay, { onActivate, section, show: !isActive })
+        ] })
       ]
     }
   );

package/dist/server.js

@@ -4916,7 +4916,6 @@ var runConsumersV2 = async (blocks, sections, bid, formatterFunctions, blockCont
         );
         if (inputNotAllowed) {
           statusById[bid2] = {
-            log: [],
             allowed: false,
             hiddenByCascade: statusById[inputNotAllowed].hiddenByCascade || inputNotAllowed
           };
@@ -4932,8 +4931,12 @@ var runConsumersV2 = async (blocks, sections, bid, formatterFunctions, blockCont
           },
           readMemberFn
         ).then(({ outputVariables, status }) => {
-          variablesById[bid2] = outputVariables;
-          statusById[bid2] = status;
+          if (
+            // store output variables for block that:
+            block.consumers.length > 0 && status.allowed && Object.keys(outputVariables).length > 0
+          )
+            variablesById[bid2] = outputVariables;
+          statusById[bid2] = mode === "report" ? { allowed: status.allowed } : status;
         });
         const endBlock = /* @__PURE__ */ new Date();
         const blockTime = (endBlock.getTime() - startBlock.getTime()) / 1e3;
@@ -5296,15 +5299,12 @@ var recordsSlice = createSlice({
      */
     setReadRequest(state, action) {
       const req = action.payload;
-      state.requests[req.type][req.key] = req;
+      if (req.type !== "report")
+        state.requests[req.type][req.key] = req;
       if (req.status === "SUCCESS" /* SUCCESS */) {
         const newEntities = normalizeEntity(req.type, req.data);
         const nextEntities = combineRecords(state.entities, newEntities);
         state.entities = nextEntities;
-        if (req.type === "report") {
-          state.reports = Object.values(nextEntities.report).map((item) => item.id);
-          state.tree = req.data;
-        }
       }
     },
     /**

package/package.json

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